How do I add a class to every nth item in a php loop (wordpress)

Question

I have a Wordpress loop as follows:

<?php $loop = new WP_Query( array( 'post_type' => 'portfolio' ) ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="four columns">
        <?php the_content(); //along with other stuff in looped div ?>
    </div>
<?php endwhile ?>

How can I add an 'alpha' class to every (4n-3)th div (div.four.columns) and an 'omega' class to every (4n)th item using php?

Thanks (a lot!), Jamie

Keep a counter, starting from 0, and incremented by 1 each loop. Then if counter % 3 == 0 then it is "every 3rd loop". Likewise, counter % 4 == 0 for "every 4th loop". Do extra math as required. — user166390
– user166390, Commented Oct 2, 2012 at 20:53

Simon Bennett · Accepted Answer · 2014-03-31 16:52:33Z

29

Why not add a counter and use the modulus approach to get to know in every column what element you are currently echoing.

Lets say you have 4 columns as specified.
You start with counter = 1
1 % 4 = 1 ( you are in the first element )
2 % 4 = 2 ( you are in the second element )
3 % 4 = 3 ( you are in the third element )
4 % 4 = 0 ( you are in the fourth element )
5 % 4 = 1 ( you are in the first element )
6 % 4 = 2 ( you are in the second element )

And you just use an If statement with the class as following

<?php $counter = 1 ?>
<?php $loop = new WP_Query( array( 'post_type' => 'portfolio' ) ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="four columns <?php if ($counter % 4 == 1){echo 'alpha'}else if ($counter % 4 == 0){echo 'omega'} ?>">
        <?php the_content(); //along with other stuff in looped div ?>
    </div>
<?php $counter++ ; 
endwhile ?>

edited Mar 31, 2014 at 16:52

Simon Bennett

3553 silver badges8 bronze badges

answered Oct 2, 2012 at 21:13

Max Doumit

1,1231 gold badge12 silver badges35 bronze badges

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

Comments

Sam · Accepted Answer · 2016-10-12 16:17:01Z

2

Implementation from the comments made:

<?php $loop = new WP_Query( array( 'post_type' => 'portfolio' ) ); ?>
    <?php
        $i = 0;
        while ( $loop->have_posts() ) : $loop->the_post(); 
           if( $i % 4 == 0 )
             $class = 'omega';
           else
             $class = ''; 
        ?>
    <div class="four columns <?php echo $class ?>">
        <?php 
           the_content(); // Along with other stuff in looped div
           $i++;
        ?>
    </div>
<?php endwhile ?>

edited Oct 12, 2016 at 16:17

Sam

1,4713 gold badges30 silver badges58 bronze badges

answered Oct 2, 2012 at 21:16

JvdBerg

21.8k8 gold badges40 silver badges55 bronze badges

1 Comment

user849137 Over a year ago

But you're not resetting $class on each loop. Once $class = 'omega'; does occur, $class will always be omega. $class = ''; should be inside of the while loop.

Collectives™ on Stack Overflow

How do I add a class to every nth item in a php loop (wordpress)

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related