Add individual class for first 3 posts - Wordpress

Question

On my wordpress posts page (index.php) i am using Metafizzy Isotope to display my blog posts.

I would like to add a extra class to the latest 3 items on the array so i can style them slightly differently. My current code is below that is used to get the posts on index.php. The class for each three would need to be different i.e. "first", "second" & "third".

<?php $args = array( 'post_type' => 'post', 'posts_per_page' => 30 ); ?>

<?php $the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>

<div class="grid">

<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>


<?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
$termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term 
$termsString .= $term->slug.' '; //create a string that has all the slugs 
}
?>


<div class="<?php echo $termsString; ?>grid-item">
    <div class="grid-item-inner">
        <div class="gi-inner-img">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
        </div>
        <div class="gi-inner-content">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
            <p><?php the_excerpt(); ?></p>
            <span class="item-date"><?php the_date(); ?></span>
        </div>
    </div>
</div> 


<?php endwhile;  ?>

</div> <!-- end -list -->

<?php endif; ?>

Answer 1

Have a look working code.

        <?php 
        $flag=0;
        while ( $the_query->have_posts() ) : $the_query->the_post(); 
        $termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
        $termsString = ""; //initialize the string that will contain the terms
        foreach ( $termsArray as $term ) { // for each term 
        $termsString .= $term->slug.' '; //create a string that has all the slugs 
        }

        // class logic
        $class='';
        if($flag==0) $class="first";
        elseif($flag==1) $class="second";
        elseif($flag==2) $class="third";

        ?>


        <div class="<?php echo $termsString; ?>grid-item <?php echo $class;?>">
            <div class="grid-item-inner">
                <div class="gi-inner-img">
                    <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
                </div>
                <div class="gi-inner-content">
                    <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
                    <p><?php the_excerpt(); ?></p>
                    <span class="item-date"><?php the_date(); ?></span>
                </div>
            </div>
        </div> 


        <?php 
        $flag++;
        endwhile;  ?>

Answer 2

What you need? Just add a class? The easiest way to do this make a increment in while loop;

like

  $i = 1;
    while(condition) :

   $i++;

 endwhile;

In your code it will be like

    <?php $args = array( 'post_type' => 'post', 'posts_per_page' => 30 ); ?>

    <?php $the_query = new WP_Query( $args ); ?>

    <?php if ( $the_query->have_posts() ) : ?>

    <div class="grid">

    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>


    <?php 
$i = 1;
while ( $the_query->have_posts() ) : $the_query->the_post(); 
    $termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
    $termsString = ""; //initialize the string that will contain the terms
    foreach ( $termsArray as $term ) { // for each term 
    $termsString .= $term->slug.' '; //create a string that has all the slugs 
    }
    ?>


    <div class="<?php echo $termsString; ?>grid-item <?php echo $i; ?>">
        <div class="grid-item-inner">
            <div class="gi-inner-img">
                <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
            </div>
            <div class="gi-inner-content">
                <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
                <p><?php the_excerpt(); ?></p>
                <span class="item-date"><?php the_date(); ?></span>
            </div>
        </div>
    </div> 


    <?php 
$i++;
endwhile;  ?>

    </div> <!-- end -list -->

    <?php endif; ?>

Now you will have a class like "grid-item 1"

Answer 3

You have to define a variable which will autoincrement each time inside loop so take $count = 1 above while loop or use below code i have already done.

<?php if ( $the_query->have_posts() ) : ?>

<div class="grid">

<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>


<?php $count = 1;
while ( $the_query->have_posts() ) : $the_query->the_post(); 
$termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term 
$termsString .= $term->slug.' '; //create a string that has all the slugs 
}
?>


<div class="<?php echo $termsString; ?>grid-item <?php if($count == 1){ echo "first"; } elseif($count == 2){ echo "second"; }elseif($count == 3){ echo "third"; } ?>">
    <div class="grid-item-inner">
        <div class="gi-inner-img">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
        </div>
        <div class="gi-inner-content">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
            <p><?php the_excerpt(); ?></p>
            <span class="item-date"><?php the_date(); ?></span>
        </div>
    </div>
</div> 
<?php $count++;
endwhile;  ?>

</div> <!-- end -list -->

<?php endif; ?>