Look Ma! Only One WordPress Loop!

[drain file 6 show codetplt] Is less really more? Heck if I know, I'm not much of a philosopher. But I think using one WordPress loop to do lots more stuff could be more.

The index page of this blog is using a single WordPress loop to a) display the first post with full text in the main content section of the blog, and b) display the next four newest posts as excerpts only in the side bar.

Not only that, but I've managed to place some information I wanted at the top of the post right at the top without having to have it floated, and thus above the content in the code. I did this by beginning my sidebar code inside the WordPress Loop.

I think that's a pretty neat trick and worthy of explaining. You might not want to implement this exact configuration, but when you see how simple it is to do, you might want to try doing something with the idea.

I introduced the basic concept that drives this trick in my post on combining full text and excerpted posts on the WordPress home page. This post expands on the ideas in that one, so if you haven't read it, you might want to read it now.

The first thing to note is that while I'll be displaying 20 posts on my Tag and Category pages (at the time of this writing, I don't have 20 posts yet, so you'll have to take my word on this), I only want to display five posts on the home page. To accomplish this I'll be using a built in WordPress function that simply tells the loop to only show the first five posts.

This is the query_posts() function. There are actually a lot of things you can do with this function, but all I'm doing for now is telling WordPress I want to show just five posts in the loop on this page.

[php]

[/php]

Line 2 in this snippet is what we are really interested in. I've called query posts and passed it the argument 'showposts=5'. this tells WordPress to get just the five newest posts when going through this loop. Line 4 checks to make sure there actually are posts to display. Line 6 is the actual start of the WordPress (while()) loop. This begins the part of the code where things get repeated for every post.

But what to do if you don't want to repeat something for every post? Well, one way to do that is to have two loops on your page and do one thing with one of them, and another thing with the other. I don't really like this solution. It overly complicates things, and there are some gotchas to look out for, like calling query_posts() incorrectly a second time, or making sure plugins can access the second loop. It just gets messy.

There are times when the only way to do something will probably require a second loop, but there a lot of times when simply counting through your posts will be a lighter and better solution. And it's really amazing what you can achieve this way if you put some thought into it.

On page 2 I'll explain how I put the the newest post in the main content area and the next four in the sidebar as excerpts only.

Okay so, now we have a loop begun and we have a post counting variable. Lets look at some more code and see just what we can do with this.

[php]
< ?php $postcount = 0; ?>
< ?php while (have_posts()) : the_post();?>
< ?php $postcount++; ?>
< div class="post">
< div class="entry entry-">

< ?php the_title(); ?>

< ?php if ($postcount == 1) : ?>

< ?php the_content('Read the rest of this article ->'); ?>
< ?php if ( comments_open() ) : ?>

< ?php comments_popup_link( 'No comments yet', '1 comment', '% comments so far', 'comments-link', 'Comments are off for this post'); ?>

< ?php endif; ?>
< ?php else : ?>
[/php]

Lines one and two are familiar from the first code sample. they (1) Initialize the post counting variable, and (2) Start the WordPress Post Loop.

Line three is part of the magic for this method. It simply says, add 1 to the current value of $postcount. So the first time through the loop, when this line is reached, the value of $postcount will be increased from 0 to 1, and the second time through it will be increased from 1 to 2, and so on each time through the loop.

Lines four and five open HTML division containers that hold the post. each of these has style information assigned in the style sheet and the second class name in the entry division references the $postcount. This means that the first time through the loop this division will have a class="entry entry-1". So you could add some style information to entry-1 {} and have a different appearance for the post entry. you could also add individual styles to each of the other posts on the page if you wanted.

Line 6 sets up the title link to the single post page in a heading 2 tag. And so far, remember that this will still happen for every pass through the loop. So this title will appear eon every post.

Lin 8 is the next key component in this technique. And line 16 is a continuation of it. What we've done here is tell the loop that if the post counting variable is equal to 1 do everything up until you reach the else. The effect of this is that all of the code between line 8 and line 16 will only happen for the first post. In this case what happens is that the_content() displays the full text of the post and if comments are open a link to the comments for the post is displayed with comments_popup_link().

Not only is the else statement the end of the code that gets executed on the first post, it is also the beginning of the code that happens on the rest of the posts. We'll dig into what happens there on page three.

Now we have displayed the first post, and it's time to set up how the remaining four posts will be displayed.

[php]
< ?php else : ?>
< ?php the_excerpt(); ?>
Read this article ->
< ?php endif; ?>
[/php]

Line 1 is the same else statement from the last code sample. It is telling the loop that if the post count variable is not 1, then do everything until we reach the endif statement.

In this case what we are doing is displaying the post excerpt with a call to the_excerpt() and then displaying a link to the dingle post page with the text 'Read this article'.

Since the endif statement ended the if ... else condition section, any code we use next will again be shown for all of the posts on the page.

[php]

[/php]

So every post will have a post=meta division container displaying which category the post is filed under, and what tags have been assigned to it. And then the post-meta, entry and post divisions are all closed.

If you wanted to, you could now simply call the sidebar and have a page displaying the first post full text and the remaining posts as excerpts. But that's yesterday's hat as it were. On page four, we'll set things up so that the excerpts are moved into the sidebar area.

In order to move the excerpted posts to the sidebar we'll need to start another if section and check to see if we are on post number one.

[php]
< ?php if ($postcount == 1) : ?>
< /div>
< div id="left-bar">
< div id="share">
< ?php print sociable_html(); ?>

< ?php if(function_exists('wp_email')) : ?>
Please e-mail this post to your friends
< ?php email_link(); ?>
< ?php endif; ?>
< ?php if(function_exists('the_ratings')) : ?>

Please Rate This Post!
< ?php the_ratings(); ?>
< ?php endif; ?>
Add To Technorati Favorites
< /div>

It's easy to link to this post! Just copy and paste!
<br /> <a href="<?php the_permalink() ?>" rel="bookmark">< ?php the_title(); ?></a>

Article Categories

< ?php wp_list_categories('title_li=&optioncount=2'); ?>

Recent Articles

< ?php endif; ?>
[/php]

So, line 1 starts a new if section that tells the loop to do everything up to line 33 only if the loop is displaying the first post. Line 2 closes the content container and lines 3 and 4 open two new containers. The sidebar container and the share container.

Lines 5 through 15 display some social media icons, an email this post link, a ratings widget to allow rating the post and an invitation to add my blog to your Technorati favorites. And line 16 closes the share div container.

Lines 17 through 19 invite the reader to link to this post and provide copy / paste text to do so. Lines 21 through 24 display the blog's categories. Line 25 sets up a headline to show above the excerpt posts.

And line 26 tells the loop we've reached the end of this 'only for post 1' section.

Now we need to tie up some loose ends.

[php]
< ?php if ($postcount == 5) : ?>
< /div>
< ?php endif; ?>
< ?php endwhile; ?>

[/php]

What we've done here is set up a new condition section, but this time we are setting the condition to display only if the loop is displaying post 5, the last post to be displayed on the home page.

Line 1 starts the 'only for post 5' section. Line 2 closes the sidebar division. Note, that if you wanted to display any additional information in the sidebar you could add it right before this line.

Line three ends the 'only for post 5' section and line 6 ends the WordPress loop.
[drain file 6 show codetplt]

After this code, you'll want to include an else section to display if no posts are available. and then call your footer template. Remember you do not want to call your sidebar template, because you've already put code into your sidebar section, and including that template now would break the page.

If you have any questions or comments on this WordPress design technique, Please use the comment form for this post, or drop me a note.