An Introduction to the WordPress Loop (And How It Works)

One of WordPress’ trademark features is the way it displays all your latest posts when you visit your website’s homepage. This is a simple functionality that works splendidly for blogs, and the code that makes it possible is called the ‘WordPress loop‘. The problem is, if you want to make any changes to the way WordPress shows your loop, you’ll need to dig into some code.

Fortunately, the way the WordPress loop is structured is rather simple. That means you can edit it even without a background in development, as long as you know what its default elements are and how to make changes to them. Using this knowledge, you can tweak the way WordPress displays your posts through the loop.

In this article, we’ll talk more about what the WordPress loop does and how it works. Then we’ll teach you several ways to customize your loops. Let’s get to it!

What the WordPress Loop Is (And How It Works)

In WordPress the loop is a deceptively simple piece of code that enables your website to show a list of available posts. To fully explain how it works, we need to show you what the code looks like first:

<?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            //
            // Post Content here
            //
        endwhile; // end while
    endif; // end if
?>

This is a snippet of PHP code, hence the php tag at the start. The first thing this snippet does is tell WordPress to check if you have any published posts available, via the following line:

if ( have_posts() ) :

If the answer to that question is yes, the code then sets a further condition. It tells the platform that, while there are posts available, it should keep doing whatever the code tells it to next. That’s what this line is about:

while ( have_posts() ) :

The code goes on to call your latest post and tell the platform what parts of it should be displayed. In this case, it will display all of the post’s content:

the_post();
           //
           // Post Content here
           //

Technically, you’re free to show any element you want from your posts. There are dozens of elements, or ‘template tags’, that you can specify and instruct your code to display. In other words, you can customize your WordPress loop to show your posts using a custom format.

In a nutshell, that’s what the basic WordPress loop looks like. You can include one anywhere you want on your website. In most cases, people use the loop as the centerpiece for their blog index page. So let’s talk about how to find the corresponding file and edit your loop directly.

How to Find the WordPress Loop Within Your index.php File

Your index.php page is also known as your home page. In most cases, it will include a variation of the WordPress loop. To find your index page, you’ll need to use File Transfer Protocol (FTP) to look through your website’s files.

First off, you’ll want to install an FTP client such as FileZilla. Then go to your 000Webhost dashboard, and navigate to the Settings > General page. Look for the FTP Details section at the top of the screen:

Keep this tab open, and take note of the fields labeled Host Name, Username, and Password. Now open FileZilla, and you’ll find several empty fields at the top of the window, corresponding to those credentials. Type them in now (you can leave Port blank), and click on the Quickconnect button when you’re done:

FileZilla will now establish a connection to your website via FTP. When it succeeds, some folders will show up in the lower right-hand quadrant of the tool. One of them is called public_html, and is also known as your WordPress root folder. Open it now, and then navigate to wp-content > themes.

Inside, you’ll find a list of folders, including one for each theme you’ve installed on your website:

Look for the folder that corresponds to your currently active theme, and open it up. There should be an index.php file within. As we’ve discussed, this file contains the data for your home page:

To open the file, right-click on index.php and choose the View / Edit option. This will run the file using your local default text editor. Somewhere in the code, you should see a variation of the WordPress loop:

When you want to make changes to your WordPress loop, this is the file you’ll need to edit. There should be several other index.php files within your WordPress directory, but you only need to worry about the one that corresponds to your active theme.

If you save any changes to a file you opened via FileZilla, the client will ask if you want to upload those changes to your server. Say yes and that’s it – you just learned how to manually edit a file using an FTP client!

3 Ways to Display Your Posts Using the WordPress Loop

Now that you know how to find and edit your WordPress loop, it’s time to explore some of the changes you might want to make. You’ll be making significant alternations to the way your WordPress website behaves and looks in the following sections. With that in mind, we recommend that you back up your website if you haven’t done so recently.

When you’re ready, let’s move on to our first example of how to tweak the WordPress loop.

1. Use Different Styles for Each Category of Posts

The example of the WordPress loop that we analyzed earlier is as simple as the code gets. However, in most cases, you’ll see far more complex snippets when you encounter the code in the wild. If, for example, you wanted to create a loop that set a specific style for one of your content categories, here’s how that might look:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <?php if ( in_category( '3' ) ) : ?>
  <div class="post-cat-three">
  <?php else : ?>
  <div class="post">
  <?php endif; ?>
  <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
  <div class="entry">
  <?php the_content(); ?>
  </div>
  <p class="postmetadata"><?php _e( 'Posted in' ); ?> <?php the_category( ', ' ); ?></p>
  </div> 
 <?php endwhile; else : ?>
   <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p> 
 <?php endif; ?>

Just as we did before, we’re going to break down what this code does, so you can make changes to it if you want to. The code at the beginning should be familiar by now – it’s what tells WordPress to launch the loop and continue showing posts until it reaches the limit you set:

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

Next, we tell the loop to look for content within a specific category. In this case, that category is 3, since WordPress assigns numerical IDs to each category:

<?php if ( in_category( '3' ) ) : ?>
<div class="post-cat-three">
<?php else : ?>
<div class="post">
<?php endif; ?>

If WordPress finds posts within that category, it will execute the following code, which we’ll break down into three sections to better explain what it does. First, this snippet tells WordPress to display the titles of your posts, and to set those titles as links to their individual pages:

 <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

Right below that, there’s the following snippet, which should be familiar since we studied it near the beginning of this article. It instructs the platform to display your posts’ contents. In this case, we’re creating a unique container for that content, to keep things more organized (hence the div tags):

 <div class="entry">
  <?php the_content(); ?>
  </div>

We can also tweak the loop to display a list of all the categories each post belongs to. That’s exactly what the code below does, and it even separates those categories using commas (grammar is important!):

<p class="postmetadata"><?php _e( 'Posted in' ); ?> <?php the_category( ', ' ); ?></p>
</div>

That’s it for our posts’ structure, but the loop isn’t over yet. If you look closely, you’ll see that the loop closes right after the last snippet. However, we also included a few lines of code that will appear if there are no posts within the category you chose for your loop:

<p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>

If the category is empty, your index.php page will show a message that says “Sorry, no posts matched your criteria”, so visitors aren’t left confused.

2. Exclude Specific Categories From Being Displayed

In some cases, you’ll want your WordPress loop to display all your posts except those in specific categories. If that’s the case, you can easily instruct the platform to do so using a variation of the code in the last section. Here’s a quick example:

 <?php $query = new WP_Query( 'cat=-3' ); ?>
 <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
 <div class="post">  
 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time( 'F jS, Y' ); ?> by <?php the_author_posts_link(); ?></small>
  <div class="entry">
   <?php the_content(); ?>
  </div>
  <p class="postmetadata"><?php esc_html_e( 'Posted in' ); ?> <?php the_category( ', ' ); ?></p>
 </div>
 <?php endwhile; 
 wp_reset_postdata();
 else : ?>
 <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
 <?php endif; ?>

The bulk of the previous code is basically the same as the one we analyzed above. In this case, we added the post’s date right below its title, to improve our loop’s style. Furthermore, you’ll notice a new line right before the start of the loop:

<?php $query = new WP_Query( 'cat=-3' ); ?>

This instructs WordPress to omit posts from category 3. You could also go a step further, and exclude more categories using the same format:

<?php $query = new WP_Query( 'cat=-3, -9' ); ?>

The process is remarkably simple, and provides you with full control over the content your loop will show to users.

3. Create a Loop for WordPress Custom Post Types

Out of the box, WordPress enables you to create posts and pages and not much else. Fortunately, those two types of content are enough to tackle most projects. However, you’ll often need to add a wider array of content on your website, and that’s where custom post types come in.

Imagine, for example, that you run a website focused on publishing sneaker reviews. You could, hypothetically, create a custom post type called Reviews, and configure it so that it includes elements such as a rating system out of the box. This way, when you add a new review instead of a regular post, that added functionality will be available.

WordPress loops can also call upon custom post types. Here’s an example of how to do that:

<?php
       $query = new WP_Query( array( 'post_type' => 'reviews' );
   if ( have_posts() ) :
       while ( have_posts() ) :
           the_post();
           //
           // Post Content here
           //
       endwhile; // end while
   endif; // end if
?>

We’ve kept it simple, so you can focus on the important bit. As you probably realized, the query at the top of the loop calls upon the Review category exclusively:

$query = new WP_Query( array( 'post_type' => 'reviews' );

In other words, this loop will only display content within the Review custom post type. You can also add other categories to the list by separating them with a comma, so you don’t have to limit yourself to a single content type if you don’t want to.

Conclusion

The WordPress loop is an elegant piece of code that powers one of the platform’s trademark functionalities. Without it, your home page wouldn’t display all your latest posts automatically, and using WordPress as a beginner would be much harder.

Fortunately, you don’t need to have a background in development to understand what this code does and how to customize your own WordPress loop. There are plenty of simple ways to tweak your loops. For example, you can:

  1. Use different styles for each category of posts.
  2. Exclude specific categories from appearing in your loops.
  3. Create a loop for WordPress custom post types.

Do you have any questions about how the WordPress loop works? Let’s talk about them in the comments section below!

This post was last modified on May 14, 2018 4:21 pm