Often a design calls for styling that makes an article archive (or any list of custom post types) easier to visually navigate. This can be as simple as altering the background color of every other post or something more involved depending on the situation at hand, but to do this we need alternating classes for each post in the loop. WordPress doesn’t do this out of the box, but adding this to your theme couldn’t be easier!

The Post Class Function

WordPress gives us the function post_class() for adding relevant classes to each post within our loop. Out of the box the output of this function doesn’t include alternating classes of any kind, but the function does give us a way to inject our own tags on the spot by way of a parameter. This looks something like this:

<div id="post-<?php the_ID(); ?>" <?php post_class( 'class-name' ) ?> >

Which will output the built in post related classes as well as adding in the additional class “class-name“:

<div id="post-4564" class="post post-4564 category-48 category-dancing logged-in class-name">

So the first step is making sure our loop is using the post_class() function in our index template. Once we know we have that, we just need a little bit of php action to alternately add our own classes, in this case .odd and .even, or whatever suits your needs best.

The Old Way

Once upon a time to achieve this we needed to get our hands a little dirty by getting into the loop itself. This looked something like this:

<?php
$count = 0;
 if (have_posts()) : while (have_posts()) : the_post();
$count++;
$add .= ( $count % 2 ) ? ' even_post' : ' odd_post';
?>
<div <?php post_class($add);?> >

Nowadays we’re breaking template files up into smaller modules and often the first part of the loop (index.php) is in a different file then the post output (content.php) which can make this method a bit tougher to manage. Luckily, we now have a filter to the rescue rendering this old method effectively obsolete!

The Current Way

In this case we are simply going to filter the post_class() function to insert our own alternating classes. This can be done directly in the theme’s functions.php file (or a plugin if you prefer.) The full code I’ve been using looks like this:

<?php
// Add 'odd' and 'even' post classes
function alternating_post_class ( $classes ) {
 global $current_class;
 if( is_home() ):
 $classes[] = $current_class;
 $current_class = ($current_class == 'odd') ? 'even' : 'odd';
 endif;
 return $classes;
}
add_filter ('post_class', 'alternating_post_class');
global $current_class;
$current_class = 'odd';
?>

You’ll notice that we’ve also added a conditional check so that we only add the alternating classes to the main post index (avoiding the classes on single posts and pages.) And that’s all there is to it. From here you can add specifically targeted CSS to style alternating posts to your hearts content!!

Happy styling!

Special Thanks

Thanks go out to Dave Warfel for turning me on to this filter a few years back, and to Martin Scott for later improving upon it with the conditional check. Cheers!