In this tutorial I’ll explain how the WordPress loop works and how to bend it to your will. The Loop is the heart of your blog and is used to display your blog posts. We’re going to be looking at a standard theme that uses the basic loop such as the default WordPress theme or even a theme created with Artisteer. More sophisticated themes will have heavily modified or multiple loops to display the front page.

By controlling The Loop you can display what you want where you want. You can insert code before and after The Loop or even inside The Loop between posts. It’s up to you.

Below is the structure of the basic loop.

// Anything here will always be displayed 

<?php if (have_posts()) : ?>

// If there are post then whatever is here will only be displayed once 

<?php while (have_posts()) : the_post(); ?>

// 1. Stuff that gets displayed in the Loop
//Anything here will be output before the content

<?php the_content(); ?> // This function displays the content of each post

// Everything here will be output after the content

<?php endwhile;?>

// 2. Stuff that gets displayed only once when the loop is over 

<?php else : ?>

// 3. Stuff that get's done if there’s nothing to display 

<?php endif; ?>

If there are posts to display they’ll be output during the while loop (#1). When The Loop is finished displaying the required number of posts it will display whatever is in the endwhile (#2) section and then jump to the endif. If there aren’t any posts that meet the criteria to display then The Loop will jump right to else (#3) and display whatever is there before ending.

Now that you know how The Loop works, let’s look at some of the stuff you’ll find in the different sections. WordPress has done all of the hard work and provided us with a bunch of template tags to control what gets displayed.

Below is a shot of The Loop (with lots of comments) contained in the index.php file of the default WordPress theme…

the-loop2

You’ll notice that there are a lot of different template tags used to output all of the info about a post. In reality a typical theme will use only a fraction of the available tags. Go to here to see the complete list.

You’ll also notice that after the loop gets done looping it will output the pagination info that gets displayed on the home page, archives and search results pages.

endwhile_stuff

You could replace the above code with WP-Pagenavi if you wanted.

Also every section is wrapped in a DIV with different style classes assigned to them. This is so that you can style every aspect of the output.

class_id

And finally, if there are no posts to display the else section will be output. This displays the Not Found message and the search form from the searchform.php file.

nothing_found

Well, now you know how all of that stuff gets on your page. In Part 2 I’ll show you how to control The Loop to display different info between posts. So stay tuned.

If you have any comments or need some help, leave a note. I’d love to hear from you.


  • Steve Young says:

    I really liked your article on WordPress Loop in Detail part 1. I hope you are going to put out a “Part 2″ etc. very soon.

    Thanks for all the info.

  • LSA says:

    Hello

    I’m working on a site offline where I av all post excerpts on the home page, I then want, the full post to be featured on its own page – so there would be a number of pages, how do I achieve this?

    Another question is how did you create your post image thumbnails on the homepage?

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“Nearly all men can stand adversity, but if you want to test a man's character, give him power.”

by Abraham Lincoln