Fruit Loop: Separate any Number of Odd and Even Posts from any Category in WordPress
Recently, I discussed how to implement a horizontally sequenced display order for WordPress posts in two columns. In that tutorial, I explain how to separate odd and even posts using a dual-loop configuration and PHP’s modulus operator. Such technique serves well a variety of configurational scenarios, but is limited to the display of the default (admin-specified) number of posts from all categories. In this tutorial, we adapt this odd-and-even loop configuration to accommodate a much greater degree of customization. Specifically, we will focus on separating any number of odd and even posts from any specific category or group of categories. Several additional configurational customizations will also be covered.
In that previous dual-loop article I was telling you about, the dual-loop configuration is based upon two “
<?php if(have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?> <?php the_content(); ?> <?php endif; endwhile; else: ?> <!-- alternate content --> <?php endif; ?> <?php $i = 0; rewind_posts(); ?> <?php if(have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?> <?php the_content(); ?> <?php endif; endwhile; else: ?> <!-- alternate content --> <?php endif; ?>
Unfortunately, this configuration does not allow us to easily customize additional parameters such as the number of posts displayed in each loop, the category/categories from which posts are displayed, the order in which posts are displayed, and many others. As-is, our dual-loop configuration separates odd posts from even posts using two loops; all posts are pulled from all available categories, and the total number of posts displayed is based upon the specified value in the “Reading” options page in the WordPress admin. For example, if your default number of displayed posts is ten, each loop would display five posts, depending on availability.
What we want to do in this tutorial involves adapting our even/odd, dual-loop setup to accommodate further customization of various loop parameters. By replacing the two
if(have_posts()):while(have_posts()): queries with two
query_posts() queries, we expand the functionality of our loop configuration to enable category filtering, post numbers, and much more.
The solution is very straightforward; simply replace the first part of each loop:
Such that we arrive with this very similar dual-loop configuration:
<?php query_posts(); while(have_posts()) : ?> <?php $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?> <?php the_content(); ?> <?php endif; endwhile; ?> <?php $i = 0; rewind_posts(); ?> <?php query_posts(); while(have_posts()) : ?> <?php $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?> <?php the_content(); ?> <?php endif; endwhile; ?>
Having done that, our odd/even dual-loop setup will continue to function as before, with the default number of posts being called from all categories and subsequently divided into odd and even posts via the two loops. The only difference at this point is that our new loop configuration is a lean, mean, highly customizable machine. We can now specify any number of posts, filter any number of categories, and do all of the other wonderful things made possible by the
Now that we have modified our loop to accommodate customization of various parameters, let’s configure a dual-loop function that accomplishes the following:
- display only posts from category "x" in both loops
- display only ten posts in each loop, for a total of twenty posts
- display only odd posts in the first loop
- display only even posts in the second loop
To do this, we will use our custom loop setup and add two parameters to each of two
query_posts() functions. As defined at the WordPress Codex, there are many parameters available to the
query_posts() function, including the two we will use for this example:
These parameters are self-explanatory. The
cat=x parameter defines the category (remember to replace "x" with your category!), and the
showposts=10 parameter defines the number of posts to be shown. Here is how these two parameters look when included properly into each of the
<?php query_posts('cat=x&showposts=10'); while(have_posts()) : ?>
And with that, we have accomplished our previously defined loop configuration. Ten category-"x" posts will be displayed in each loop, with odd posts appearing in the first loop and even posts appearing in the second loop. Of course, by simply modifying either or both of these two parameters, any number of posts may be called from any category, or even group of categories, as explained more fully in the WordPress Codex.
By taking advantage of the many other parameters available to the
query_posts() function, the configurational possibilities are virtually endless. Here are just a few examples of the different parameter-based modifications you make to any
tag=chevy,monza— display specific tag content
author_name=fonzi— display specific author content
year=— display time-specific content
showposts=7— specify any number of posts
'post__in' => array(1,2,3)— display specific posts
As you can see, just about anything is possible when it comes to customizing the WordPress loop! For more great tips and tricks on WordPress loops, check out the “Related articles” section at the end of this tutorial. I also invite you to subscribe to Perishable Press for a periodic dose of WordPress, Web Design, and much more! :)
Huge thanks to Tony Boswell for his work with the primary technique covered in this tutorial. While implementing the odd/even, dual-loop configuration on his site, Sound Check Enterprises, Tony discovered the secret to customizing the method presented in my previous loop article:
query_posts() function enables extensive control over many key loop parameters, thereby enabling the various techniques presented in this article. Thanks for the eye-opener, Tony! :)
This is a old topic, but still came very useful to me. Although I got 2 things – code say’s more then a thousand words :):
The part with the code in my first comment is missing?