How to Create an Odd/Even Class System in WordPress

There are many times when coding a WordPress blog or full website that you may encounter the need for a class that targets odd/even posts or items. While this might seem like it would be complicated it is actually very easy to implement. In this tutorial we will teach you a very simple method for adding odd/even classes anywhere inside of your WordPress loop using a function.

Step 1: Create the WordPress Function

The first step in adding odd/even classes to your posts in WordPress is to create a simple function. Copy and paste this function code into your functions.php file or wherever you store your WordPress functions.

// odd or even
$odd_or_even = 'odd';

Step 2: Add the WordPress Function Callback to your Loop

The next step is to add the php callback inside of your WordPress loop as a class.

<?php echo $odd_or_even; $odd_or_even = ('odd'==$odd_or_even) ? 'even' : 'odd'; ?>

Implementation Example:

<div class=”post <?php echo $odd_or_even; $odd_or_even = ('odd'==$odd_or_even) ? 'even' : 'odd'; ?>“>Post</div>

Step 3: Use CSS to Control the Style of your Odd/Even Items

Now that you have your odd/even classes applied, the final step is to control the styling of your posts or items using CSS.


If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.