Tutorials WordPress

Add Odd & Even Post Class to WordPress Post Listings

Updated

Written by

Dave Warfel

Reading Time

2 minutes

If you buy something from one of our links, we may earn a commission.

WordPress provides a function called post_class() that outputs various class names for the post being referenced. This is most often used on post listing template files, such as index.php & archive.php, as well as the single.php template file.

You’ll often see it in your theme like this:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

The default classes that WordPress adds DO NOT include classes for odd & even posts. If you want to style your odd/even posts differently, we’ll extend the post_class() function to include an extra class for “odd” or “even.”

Add “Odd” & “Even” Post Classes

There are two ways to include this code: create a plugin, or add directly to your functions.php file.

// Adds 'odd' and 'even' classes to each post
function wpsd_oddeven_post_class ( $classes ) {
	global $current_class;
	$classes[] = $current_class;
	$current_class = ($current_class == 'odd') ? 'even' : 'odd';
	return $classes;
}
add_filter ('post_class', 'wpsd_oddeven_post_class');
global $current_class;
$current_class = 'odd';

If you view the source code of a post listing page, you should see either “odd” or “even” applied to each post listing. The first one will always start with “odd.”
WordPress Odd/Even Post Class Example

“Odd” Class Added to Single Posts

The above code will add an “odd” class to all single posts (single.php). This isn’t very useful for styling purposes, and I can’t think of a reason why you’d need it.

If anyone can provide an update to this code that only applies odd/even classes to non-single references to post_class(), we’d appreciate it. I tried various options using the ! is_single() conditional statement, but couldn’t find a solution.

Reference post_class() in the WordPress Codex.

Dave Warfel

LinkedIn  •  X (Twitter)
Dave has been working with WordPress since 2011. He's built 100s of client sites and almost a dozen of his own. He's tested almost every plugin you can think of, hosted with at least 10 different companies, and gone down every SEO rabbit hole you can imagine. When's he's not tinkering with new software, you'll find him in the mountains of Colorado, trail running, summiting peaks, and rippin' downhills on his mountain bike. 🏔️🏃🚴🤸

3 responses to “Add Odd & Even Post Class to WordPress Post Listings”

  1. Martin Scott Avatar
    Martin Scott

    Maybe wrap the whole function in a conditional to only apply to the home page:
    global $current_class;
    if(is_home() && !is_paged()):
    // rest of code
    endif;
    return $classes;

  2. Webdigital Avatar
    Webdigital

    Hello Dave, i was thinking is this can be done with a 3rd elemen?

    At this moment i’m in the need of:
    – odd
    – even
    – even

    1. Dave Warfel Avatar

      I’m not sure how to add a class name to every third element, but if you just need styling, you could try using CSS instead.

      Use the :nth-child selectors.

      div p:nth-child(3n) {
          background: yellow;
      }
      

      This would select every third <p> tag inside of a <div>.

      Learn more: https://css-tricks.com/useful-nth-child-recipies/

Leave a Comment