What is The WordPress Loop

Ah, The Loop. One of the little things that makes WordPress work so well.

The WordPress Loop is actually the backbone of pretty much every page on your blog, as it is the block of code responsible for finding and displaying your posts.

The Loop is where you are able to specify exactly what should happen for each post that is displayed on a given page, and that covers everything from which posts and how many you want, to what information should go on the the page, things link the title, the tags, even the body of the post itself.

Let’s take a closer look.

The Basics Of The WordPress Loop

The Loop can be broken up into three main sections. It starts like this:

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

And ends like this:

  <?php endwhile; ?>
<?php endif; ?>

In between those little blocks of code you fill in the third section, which includes the instructions for displaying your content. Here’s and example of a very basic, completed Loop.

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

    <?php the_content(); ?>

  <?php endwhile; ?>
<?php endif; ?>

Okay, let’s look at the first part. This line is comprised of a conditional, or IF statement, followed by a WHILE statement. The IF statement is telling WordPress “Check to see if there are any posts that belong on this page, based on the URL that this person is trying to pull up.”

The WHILE statement basically translates to “As long as there are more posts to display, load the next one and then do whatever this block of code says.”

The block of code is what you want WordPress to do or display for each post that gets pulled up.

In this example, the only thing we’re telling WordPress to do is display the content of the post in question.

We then close The Loop with by ending the WHILE statement, and then close the IF statement, and we’re done!

So, at the end of the day, all The Loop is really just a set of instructions for WordPress to follow for every post it pulls up on a page. With that in mind, the above example isn’t really very useful. All it’s going to give you is a bunch of posts without any titles or formatting or anything, just blocks of text.

Adding Additional Info and Formatting To The Loop

Let’s look at a more useful version that includes a title, the author name and the tags assigned to the post. We’ll also add in some HTML for links and CSS information so that the content can be styled later on.

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

    <div class="post_box">
      <h2 class="post_title"><a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>"><?php the_title();?></a></h2>
      <div class="post_meta">Written by: <?php the_author();?><?php the_tags(' | ');?></div>
      <?php the_content(); ?>
    </div>

  <?php endwhile; ?>
<?php endif; ?>

As you can see, in addition to some HTML and CSS details, we’ve now included some template tags to provide a link to the single post page, the author and tag information. These details will now be added to every post that this Loop displays.

Using The Loop To Customize Formatting And More

So now we have a Loop that gives us some basic formatting and information about each post as it’s displayed.

But what if you want to get a little more creative?

Let’s try adding three more features to our Loop, just to get a feel for it. First off, lets label the posts from a specific category as “Featured Posts,” to highlight some of the more important content on our blog.

After that, let’s customize the CSS class of our posts for each author. That would let us change the formatting for each person, so their posts would all look unique.

Lastly, we should probably add a message that will display in the event the The Loop can’t find any posts for us – otherwise we’ll just be showing people a blank screen.

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

    <?php if (in_category('featured-articles')) : ?>     <!--Check to see if this post is in "Featured Articles" category...-->
      <p class="featured">*Featured Article*</p>  <!--...Display this message when the category condition is met-->
    <?php endif; ?>      <!--End conditional statement for Featured Category-->

    <div class="post_by_<?php the_author_meta('ID')?>"> <!--Define CSS class with Author ID-->
      <h2 class="post_title"><a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>"><?php the_title();?></a></h2>
      <div class="post_meta">Written by: <?php the_author();?><?php the_tags(' | ');?></div>
      <?php the_content(); ?>
    </div>

  <?php endwhile; ?>
 
<?php else : ?>  <!--In case no posts are found, display the following message-->
   <p>Sorry, but no posts are available at this time. Please check back again soon</p> 
<?php endif; ?>

Clearly this is a little more complex than our previous examples, but it’s still a pretty basic Loop. There are five lines that were changed from last time, and I’ve added a comment to each of them explaining the changes. First off, on line 4, we’re checking to see if the current post belongs to a specific category. On line 5, we’re providing instructions for what to do if the post does belong to that category, and then ending the IF statement on line six.

Next, on line 8, we’re using a WordPress template tag to fill in the end of our CSS class declaration. That means each post will carry it’s author’s ID in it’s CSS, making them easily customizable with a unique font or background color or, well, whatever your little heart desires.

Finally, we’ve added and ELSE statement on lines 16 and 17 – just after the WHILE statement. An ELSE statement tells WordPress what to do in the event that the IF statement turns up false. In this case we’re saying “If there are posts, display with like this… if there aren’t any, put up this message instead.”

That’s All, Folks…

That’s pretty much it for The Loop. Obviously, you can take things further as you see fit, adding more data, conditions and formatting. Loops can get a lot more complicated than the one’s we’ve looked at here, and you can even play around with having multiple Loops on a single page… but that’s all for another day.

For now, get out there and enjoy your Loop customizations. Drop me a note in the comments letting me know what cool tags you’re adding in and how your augmenting your Loops!