Understanding the WordPress Loop

If you’ve either looked into developing with WordPress or have developed with WordPress for any length of time, I’m sure you’ve heard of the “WordPress Loop.” The loop is one area of WordPress that you don’t want to skimp on. In order to be proficient in development, it’s important to understand exactly what’s going on. With this post, it’s my intention to help out with that. The good news is, it’s fairly straightforward.

To get the most out of learning how to loop works, it’s a good idea to visit the related page in the Codex. It’s here where much of what you’ll need to know is explained.

I think we’ll get started by looking at a small piece of code that’s shown in the Codex:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    // YOUR CONTENT GOES HERE
<?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

What you’re looking at above is the bare bones basics of what the WordPress loop can look like. If you’ll notice, there are a few areas and functions in use. I’ll go through things line by line.

In the first line, we have a lot to look at. In this one line, we actually have an if statement, a while statement and the content itself. There are three areas that require consideration.

The first area is an if statement that holds the “have_posts” function and basically asks if there are any posts in existence. If so, then go ahead and continue on to the next area. If not, then jump to the statement that says, “Sorry, no posts matched your criteria.” The have_posts function returns only a yes or no answer and no parameters are allowed.

The second area is a while loop and also uses the have_posts function. This area says that as long as posts continue to exist, then continue on to the next function. If no more posts exist, stop looping.

The last area is used for the content itself and uses the “the_post” function. In the Codex, WordPress says that this function, “Iterates the post index in The Loop. Retrieves the next post, sets up the post, sets the ‘in the loop’ property to true.”

The following lines end the loop and end the if statement.

The above code is one way to write the loop. If you want to see another way, check out this code:

<?php
if ( have_posts() ) {
  while ( have_posts() ) {
    the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
  <?php }
}
?>

This might be a bit easier to understand because of the use of the curly braces. You can see more clearly that everything is contained inside the if statement and that the content is contained inside the while loop. But, as you get used to creating and working with the loop, the shorthand that was in the first example is much cleaner to use in your code.

Also, if you’ll notice above, there are a few more functions in use. We already looked at the have_posts and the the_post functions, but we haven’t gone over the “the_title” or “the_content” functions yet.

The the_title function returns the title of the current post. There are a few parameters that you can use inside this function, so if you’re interested in using them, I suggest you read the page in the Codex.

The the_content function displays the contents of the current post and must be used inside the loop. Again, there are a few parameters that you can use here, so if you’re interested, check them out.

To go one step futher, I’m going to build upon my last post and show you some code for how your index page can look. This code should assist in clarifying where you can place your HTML in reference to these PHP functions.

<?php get_header(); ?>
<section class="row">
  <div class="small-12 columns text-center">
    <div class="leader">    
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>    
      <h1><?php the_title(); ?></h1>
      <p><?php the_content(); ?></p>   
  <?php endwhile; else : ?>  
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>  
  <?php endif; ?>    
    </div>
  </div>
</section>
<?php get_footer(); ?>

As you can see above, we’ve included the header and footer files. Also in this code is the wrapper code for the loop. So, outside the loop is some HTML for semantics and styling and inside the loop is a heading tag and a paragraph tag to be used for every iteration of content.

I’d like to finish up this post by giving a few references that’ll help make building your template pages and working with the loop much easier. The first one is “The Loop In Action” page in the Codex. By browsing this page, you can find many great code samples that should give you enough ideas to get started.

Also, if you want to work with the loop, you’ll surely want to know some functions that you can use with it. Guess what? There’s a resource for that. It’s the “Function Reference” page in the Codex. Check this one out, but take a few days with it. There’s a lot to go through. Better yet, just put it in your favorites to look back on when you need it.

If you’re interested in going over more WordPress template concepts with me, be sure to take a look at my WordPress category. I write almost every day, so I think you’ll get a lot out of it. I sure am getting a lot out of my learning!