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 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
- SQL From Basics to Mastery — A Complete, Hands-On Guide
- WordPress Beginner Interview Questions
- Mastering Traits in PHP - The Complete Guide for Code Reuse and Modularity
- Understanding the Singleton Pattern and Using Traits to Achieve Singleton in WordPress Plugin Development
- REST API Methods Explained with Best Practices for Building Clean and Secure APIs
Your Questions / Comments
If you found this article interesting, found errors, or just want to discuss about it, please get in touch.