Sarathlal N

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.

Looking for a skilled WordPress/WooCommerce developer? I'm currently available for freelance, contract, or full-time remote opportunities! Let's create something amazing together. Send me a quick message, and I'll respond within 24 hours!

Recent Posts

  1. Understanding the Singleton Pattern and Using Traits to Achieve Singleton in WordPress Plugin Development
  2. REST API Methods Explained with Best Practices for Building Clean and Secure APIs
  3. My 28-Day Plan to Master Modern WordPress Development Using AI Tools
  4. Scaling WordPress - How Custom Database Tables Solve the Post Meta Bottleneck
  5. WordPress Transients Explained - A Developer's Guide to Site Performance

Your Questions / Comments

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