CODEWITHSUNDEEP
phpjavascriptwordpress
Rob
Rob

Reputation: 1505

Add a class to every third wordpress post

Im listing all wordpress posts in the blog category but trying to add a class called 'last' to every third 'fourcol' class

HTML

<div class="container">
    <div class="row">

    <?php query_posts('category_name=blog&showposts=10&orderby=date&order=dsc'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <div class="fourcol">
            <a href=""><h2 class="blogtitle"><?php the_title(); ?></h2></a>
            <a href="#"><img src="images/_scroll1.jpg"></a>
            <span class="date">12 May 2011</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a class="more" href="#">Keep reading</a>
                </div><!-- fourcol END -->

            <?php endwhile; endif; ?>
        </div><!-- row END -->
    </div><!-- container END -->

Hope this makes sense?

Upvotes: 2

Views: 2643

Answers (6)

csehasib
csehasib

Reputation: 365

if ( have_posts() ) : while( have_posts() ) : the_post();
//Loop code goes here. 
if ( 0 == $count%4 ) {
    echo 'div class="clrFix"></div>';
}
endwhile; 
if ( 0 != $count%4 ) {
   echo 'div class="clrFix"></div>';

}

Here add a clrFix div after every 4 post.

Upvotes: 0

locrizak
locrizak

Reputation: 12279

you need the modulus operator

<?php query_posts('category_name=blog&showposts=10&orderby=date&order=dsc'); 
    $counter = 0; //add a ounter to keep track of the number post we're on
    if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    //check if the remainder of $count is 0, if so add the class 'last'
    <div class="fourcol <? if ( $count % 3 == 0 ) echo 'last' ?>">                                                        
        <a href=""><h2 class="blogtitle"><?php the_title(); ?></h2></a>
        <a href="#"><img src="images/_scroll1.jpg"></a>
        <span class="date">12 May 2011</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="more" href="#">Keep reading</a>
    </div><!-- fourcol END -->
    <? $count++; ?>
<?php endwhile; endif; ?>

Upvotes: 2

Phil
Phil

Reputation: 11175

EDIT:

var i = 1;
$('#row .fourcol').each(function() {
    if(i++ % 4 == 0) 
        $(this).addClass('last'); 
});

$('.fourcol').eq(3).addClass('last');

Upvotes: 3

ChristopheCVB
ChristopheCVB

Reputation: 7305

Using CSS

Instead of

.last

Use

.fourcol:nth-child(3n+1)

Upvotes: 3

hakre
hakre

Reputation: 198217

You can do that with PHP in your template. Just add the string last on every third post. The following variant makes use of the existing post counter in wordpress and the modulo operator. The counter starts at 0 so we add 1 to it every time:

<div class="fourcol<?php if ( !((1 + $wp_query->current_post) % 3) ) echo ' last' ?>">

This is fairly compact and the most compact solution I can imagine for wordpress on the PHP side of your theme.

The idea behind it is the following:

Add a variable as a counter, count it up on every post and if it is 3, set it to 0 again and add the class.

The following script shows each of this step: Define the counter if it does not exists, count it up, reset it to 0 if applicable and do the echo:

<div class="fourcol<?php

  isset($iposts) || $iposts = 0;

  if (++$iposts === 3)
  {
    $iposts = 0;

    echo ' last';
  }

 ?>">

That's for demonstration only. As you're using the standard query object, it's much more easy as we can re-use an existing variable. Additionally making use of the modulo operator helps to find every X element.

Upvotes: 1

Ruslan Polutsygan
Ruslan Polutsygan

Reputation: 4461

<?php query_posts('category_name=blog&showposts=10&orderby=date&order=dsc'); 
if ( have_posts() ) : 
    $i=0;
    while ( have_posts() ) : 
        the_post(); 
    ++$i; 
    ?>

    <div class="fourcol<?php if($i%3==0) echo ' every-third-post' ?>" >
        <a href=""><h2 class="blogtitle"><?php the_title(); ?></h2></a>
        <a href="#"><img src="images/_scroll1.jpg"></a>
        <span class="date">12 May 2011</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="more" href="#">Keep reading</a>
            </div><!-- fourcol END -->

        <?php endwhile; endif; ?>
    </div><!-- row END -->
</div><!-- container END -->

Try this. Should work.

Upvotes: 3

Related Questions