When coding themes, clients frequetly request things like Google ads being displayed after post #2, the top post having a differently colored background, only displaying the title for a few posts - stuff like that. You can’t do any of this inside a single Loop, so here’s how to use multiple loops to display lists of posts differently.

What exactly is The Loop?

“The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed between where The Loop starts and where The Loop ends will be used for each post.”

Source: WordPress.org

In other words, The Loop is a section of code in your WordPress page that “loops”, or repeats, for each post. Here’s an example:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php the_content('Read more »'); ?>
</div>
Posted on <?php the_time('F jS, Y') ?> in <?php the_category(', '); ?>
<?php endwhile; endif; ?>

The top and bottom lines are what starts and ends The Loop. All the code inside The Loop is repeated for each post. The code above would produce the following:

<h3>Post Title</h3>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mauris magna, accumsan at, commodo vitae, lacinia nec, odio. Sed non nulla a tellus rutrum cursus.</p>
</div>
Posted on July 29, 2007 in <a href="#">Tutorials</a>

This format will now repeat for each post that is listed.

Now let’s say we want to display the entire contents of the first post, but only the title and the date of the next four. To do this, we’re going to introduce a second Loop with different post styling. For instance:

<?php query_posts('showposts=1‘); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php the_content('Read more »'); ?>
</div>
Posted on <?php the_time('F jS, Y') ?> in <?php the_category(', '); ?>
<?php endwhile; endif; ?>

The above code will display the latest post only. Notice the line of code in blue. This tells WordPress to display only one post. We place this outside of The Loop.

For the next four posts, we only want to display the title and the date, so we use the following:

<?php query_posts('showposts=4&offset=1‘); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
Posted on <?php the_time('F jS, Y') ?> in <?php the_category(', '); ?>
<?php endwhile; endif; ?>

Notice the text in orange. We want to display four posts, leaving out the first one, because it has already been displayed. Put these two sets of code together and you’ll get something like this:

<h3>Post Title</h3>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mauris magna, accumsan at, commodo vitae, lacinia nec, odio. Sed non nulla a tellus rutrum cursus.</p>
Posted on July 29, 2007 in <a href="#">Tutorials</a>

<h2>Another Post</h2>
Posted on July 29, 2007 in <a href="#">Tutorials</a>

<h2>A Third Post</h2>
Posted on July 29, 2007 in <a href="#">Tutorials</a>

<h2>A Fourth Post</h2>
Posted on July 29, 2007 in <a href="#">Tutorials</a>

<h2>One More Post</h2>
Posted on July 29, 2007 in <a href="#">Tutorials</a>

You can also use a double Loop to display google ads after a certain number of posts:

<?php query_posts('showposts=2'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2<?php the_title(); ?></h2>
Posted on <?php the_time('F jS, Y') ?> in <?php the_category(', '); ?>
<?php endwhile; endif; ?>

<!-- google ad script -->

(Google ads here)

<?php query_posts('showposts=3&offset=2'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
Posted on <?php the_time('F jS, Y') ?> in <?php the_category(', '); ?>
<?php endwhile; endif; ?>

That code will output something like this:

<h2>First Post</h2>
Posted on July 29, 2007 in <a href="#">Tutorials</a>

<h2>Second Post</h2>
Posted on July 29, 2007 in <a href="#">Tutorials</a>

<h4>Google Ads</h4>

<h2>Third Post</h2>
Posted on July 29, 2007 in <a href="#">Tutorials</a>

<h2>Fourth Post</h2>
Posted on July 29, 2007 in <a href="#">Tutorials</a>

<h2>Fifth Post</h2>
Posted on July 29, 2007 in <a href="#">Tutorials</a>