php - Add a class to every third wordpress post - Stack Overflow

admin管理员组

文章数量:1350027

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?

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?

• php
• javascript
• wordpress

Share Improve this question Follow asked Jul 27, 2011 at 15:45 RobRob 1,50555 gold badges3030 silver badges5858 bronze badges 1

• Updated my answer for you. Misread it – Phil Commented Jul 27, 2011 at 16:27

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

Using CSS

Instead of

.last

Use

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

<?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.

EDIT:

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

---

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

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; ?>

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 pact and the most pact 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.

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.

本文标签： phpAdd a class to every third wordpress postStack Overflow