How to mark every 3rd post

I’m working on a WordPress site for my band and I’d like to mark every 3rd post on our blog page to have a special class applied to it, anybody have any pointers on how to achieve this? Any help is very very appreciated, thanks! rock n roll.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

My approach. No extra function, no filter. 🙂

<?php $GLOBALS['wpdb']->current_post = 0; ?>
<div <?php post_class( 0 === ++$GLOBALS['wpdb']->current_post % 3 ? 'third' : '' ); ?>>

Alternative:

<div <?php post_class( 0 === ++$GLOBALS['wpdb']->wpse_post_counter % 3 ? 'third' : '' ); ?>>

Method 2

As an addition to @helgathevikings answer

Use the post_class() fn without polluting the global namespace

1. Using static variables inside a class allows the same behavior as having global variables: They stay in place and don’t change, unless you don’t alter them.
2. Even better (as @Milo suggested in the comments), take the current post from the DB class.

The Example:

function wpse44845_add_special_post_class( $classes )
{
    // Thanks to @Milo and @TomAuger for the heads-up in the comments
    0 === $GLOBALS['wpdb']->current_post %3 AND $classes[] = 'YOUR CLASS';

    return $classes;
}
add_filter( 'post_class','wpse44845_add_special_post_class' );

Update

We could utilize the current_post property of the global $wp_query object. Let’s use an anonymous function, with the use keyword, to pass on the global $wp_query by reference (PHP 5.3+):

add_filter( 'post_class', function( $classes ) use ( &$wp_query )
{
    0 === $wp_query->current_post %3 AND $classes[] = 'YOUR CLASS';

    return $classes;
} );

Further on, we could restrict it to the main loop with a in_the_loop() conditional check.

Method 3

if your theme uses post_class() to generate post classes you could try. i’m not 100% sure how it will handle pagination b/c i don’t have enough posts on my local install to test it out

add_filter('post_class','wpa_44845');

global $current_count;

$current_count = 1;

 function wpa_44845( $classes ){

    global $current_count;

    if ($current_count %3 == 0 ) $classes[] = 'special-class';

    $current_count++;

    return $classes;

 }

Method 4

$i = 0;
if ( have_posts ) :
while( have_posts ) :
    the_post();

    $class = 'class="BASIC-CLASS';
    if ( 0 === ( $i % 3 ) )
        $class .= 'YOUR-SPECIAL-CLASS';
    $class .= '"';

    echo "<div {$class}>";
        // do stuff
    echo '</div>';

    $i++;
endwhile;
endif;

Method 5

There are also ways to do this with CSS and javascript.

With CSS3 you target every third post with an nth-child selector.

article.post:nth-child(3n+0)
{
    background-color: #777;
}

Or with jQuery, you could add the CSS class using the same technique.

jQuery(function($) {
    $( "article.post:nth-child(3n+0)" ).addClass("custom-class");
});

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0