How to add css class on every third post in wordpress?

Question

I want to add a css class to every third post display on page. I have tried this code given below:

 <?php if (have_posts()) : ?>
 <?php $c = 0;
     while (have_posts()) : the_post(); $c++;
        if( $c == 3) {
            $style = 'third';
            $c = 0;
        }
        else $style='';
     ?>
     <div <?php post_class($style) ?> id="post-<?php the_ID(); ?>">

Have you searched for other answers here? E.g. stackoverflow.com/questions/12698135/… or stackoverflow.com/questions/12743708/… — i alarmed alien
– i alarmed alien, Commented Aug 25, 2014 at 6:31
Hm. I was about to vote this question as a duplicate, but IMO the answer by Fabio is way better than the answers in the other question. — Gerald Schneider
– Gerald Schneider, Commented Aug 25, 2014 at 6:37

Devin · Accepted Answer · 2014-08-25 06:33:39Z

3

I got this from somewhere, don't remember where, so it's not mine, but I've used it and works like a charm because it works on any page, archive, etc:

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

However, assuming you're using the default .post class, then you could easily target via CSS

.post:nth-child(3){your code}

or whatever class your post uses

answered Aug 25, 2014 at 6:33

Devin

7,7306 gold badges43 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ram Sharma · Accepted Answer · 2014-08-25 06:37:55Z

1

try to change

 while (have_posts()) : the_post(); $c++;
 if( $c == 3) {
        $style = 'third';
        $c = 0;
    }
    else $style='';

with

 while (have_posts()) : the_post();
      if( $c % 3 == 0 )
         $style = 'third';
       else
         $style = '';

and make increment of varible $c++; before the while loop ends

I feel

<?php post_class($style) ?> id="post-<?php the_ID(); ?>">

is working, if not than change it to

<?php class = "<?php $style; ?>" id="post-<?php the_ID(); ?>">

answered Aug 25, 2014 at 6:37

Ram Sharma

8,8157 gold badges48 silver badges59 bronze badges

Comments

immayankmodi · Accepted Answer · 2014-08-25 06:44:02Z

1

You do not need to change in any .php file or function. You can achieve this simply via CSS only.

#content div:nth-child(3n)
{
    background-color: yellow; 
}

NOTE: Simply change the #content div with your post div or class selectors, that's it, you are all set!

Here is the Demo: jsFiddle

Hope it helps!

answered Aug 25, 2014 at 6:44

immayankmodi

8,63010 gold badges41 silver badges56 bronze badges

3 Comments

immayankmodi Over a year ago

Change the CSS selectors that i already mentioned in my answer and also the style you want to give to every 3rd element. This is only an example that you can simply use. Please prepare your jsfiddle or update your answer with some html code, i'll check your example code.

Kanan tuteja Over a year ago

please find the sample div. <div>div 1 <div> test</div><div>test2</div></div>

i alarmed alien Over a year ago

Select divs that are direct children of #content like this: #content>div:nth-child(3n). If they are children of children, you can do this: #content>div>div:nth-child(3n).

Collectives™ on Stack Overflow

How to add css class on every third post in wordpress?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related