Add Odd or Even class to posts in loop - WordPress Themes

In Some WordPress theme customizations, I want to give different styles for odd/even post. So adding a class (odd or even) to my repeating element inside the loop is always a handy function.

In such cases, we can use one of the WP Query class property - $current_post. This can provide the current post index number & we can use that one to check whether the post is odd or even.

<?php echo ($loop->current_post%2 == 0?'odd':'even'); ?>

example

<?php
// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {
	echo '<ul>';
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		
		?>
		<li class="<?php echo ($loop->current_post%2 == 0?'odd':'even'); ?>">
			<?php
				echo get_the_title();
			?>
		</li>
		<?php
	}
	echo '</ul>';
} else {
	// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();

In the above example. I added odd or even class to repeating list item - <li> element according to post index.

Recent Posts

1. Disabling Payment Methods in WooCommerce Based on Conditions
2. How to Update Product Quantity in WooCommerce Using Custom Code
3. Dynamically Generating a Table of Contents in WordPress
4. Direct Checkout in WooCommerce - Add Product to Cart from Checkout Page & Skip Shop, Product, and Cart Pages
5. Understanding the Impact of git reset --hard Command

This article was published on February 2, 2015

Your Questions / Comments

If you found this article interesting, found errors, or just want to discuss about it, please get in touch.