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.

Need Help?

Do you need any help on WordPress? I'm happy to help you.

Contact Me

Recent Posts

  1. Update query order - WordPress
  2. Display featured products - WooCommerce
  3. Remove "Category:", "Tag:", "Author:" from the_archive_title - WordPress
  4. The essential & basic WP-CLI commands for a WordPress developer
  5. Install theme unit test data using WP-CLI - WordPress


Questions / Comments

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