Modifying Individual Posts In The Loop

27 Comments

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>

27 thoughts on “Modifying Individual Posts In The Loop

  1. This is a great tip — many thanks! We’ve been using a really clunky workaround to make this very type of thing work.

  2. Micheal… Good tip, as most people customizing themes miss this rather general “workaround”. The only problem with this workaround, is that it normally screws up your Next / Prev links and that needs another workaround to make that work…

    I’ve found the easiest way to add AdSense after the second post is simply to run a little php for counter with an if statement determining when it should display the AdSense.

  3. I was just going to post what Adii said about the next/prev links. I never got the workaround for that so I’m headed to read the link he posted now.

    This post reminded me to look into this more, so thanks for posting it 🙂

  4. My own blog has a setup like in this example, however the code behind it is different. I only call the query once then check a counter to see if it is the first post.

    counter = 0
    if counter == 0{
    first post output
    counter
    }else{
    other post output
    }

    Of course for google ads you could continue to use the counter and increase it on the output of each post, then output the google ads when the condition is met.

    My concern for the way you have done it is making two queries might have a bigger impact on performance than necessary, though it wouldn’t be too significant. 🙂

  5. Pingback: Weekend Roundup #19 » JaypeeOnline // Blogging News & Reviews

  6. Thanks for the detailed walkthrough. I am designing a new theme myself, and was searching for the featured post-ads-postheadings loop that you have mentioned. Thanks a ton!

    And I’ll remember to credit you for helping me understand the loop modifications. Hope it helps.

  7. Offset is an interesting parameter which I haven’t ever used before. I’m really wondering about the performance (number of queries, execution time) between using simple counter within a single loop like Adii mentioned or with double loop like this.

    I’m going to test soon and report back what happened.

  8. Okay the numbers are in.

    The double loop method results in 4 queries, while a single loop with counter costs 2 queries.

    The execution time for both is barely noticeable, both methods takes about 0.02ms to execute. But then again, this is a local test with only 1 page viewer at a time, so results in live environment might be different.

    I’m all for reducing number of queries as much as I can, and the single loop method is the way to do it.

  9. Pingback: Finding Query Count for a Certain Part in a WordPress Theme | Play Work Play Studio

  10. Pingback: On Blogging Australia » Blogging tips Recently popular » WordPress Theme Editing Part 2: The Actual Coding

  11. Pingback: Weekend Roundup #19 - PinoyPortal

  12. Hi Michael

    Well I have been here five minutes and this is the second nugget that I have discovered so far. I had seen this done on other blogs and wondered how easy it was to do and now I know!

    Thanks.

    Paul

  13. Featured posts – this is something I hadn’t even considered for a WordPress theme. Its an extra bonus that its also suprisingly easy!

    Thanks for opening a whole new world of theme design possibilities for me! 😉

  14. Pingback: Mastering Your WordPress Theme Hacks and Techniques

  15. Pingback: links for 2008-03-23 at DeStructUred Blog

  16. In my opinion I would go the counter route, as it allows you to save some request time. Depending on what type of wordpress plugins you are running, this small save in performance could make a difference. Plus you can do some cool things with the counter value like color every odd post or load special background images based on the value of the counter.

    Either way this post is definitely a great resource.

  17. This is great! Thanks so much for laying things out so clearly. I was wondering if you could say more in another post about the counter method that a few people prefer. I’d love to see a tutorial on that.

  18. Pingback: paidnetpedia.com

  19. Pingback: SEO & Web Design » Blog Archive » Mastering Your WordPress Theme Hacks and Techniques

  20. Pingback: SEO & Web Design » Blog Archive » Mastering Your WordPress Theme Hacks and Techniques

  21. Pingback: An Introduction to the WordPress Loop » Arbenting Freebies - The Product of Being Creative

  22. Pingback: An Introduction to the WordPress Loop » Arbenting - The Act of Being Creative

Comments are closed.