Snippet: Add “alt” CSS Class to Alternative Posts

If you want to have different look and feel for post one after the another. This snippet will let do that quite easily. It will add “alt” class to alternative posts and you can then change, lets say, background color or border to make it different from the adjacent posts.

Snippet

add_filter( 'post_class', 'wpds_alt_post_class' );
function wpds_alt_post_class( $classes ) {
    global $wp_query;
    if( $wp_query->current_post%2 == 0 )
        $classes[] = 'alt';
    return $classes;
}

Sample CSS

div.post {padding: 15px 10px 5px;}
div.post.alt {background: #eee;}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>