How to Add a Class to Every Nth Item in a PHP Loop (Wordpress)

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

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

Add class to every 4 posts and 8 posts -- WordPress Loop

Try this ;)

<?php

$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);

$the_query = new WP_Query( $args );

echo '<section id="our-clients">';

echo '<div class="coda-slider"  id="slider-id">';   

for($i=1; $the_query->have_posts(); $i++)
{
    $the_query->the_post();

    $prePost='';
    $postPost='';

    if($i==1)
    {
        $prePost='<div class="slide"><div class="row-fluid">';
    }
    if($i==4)
    {
        $prePost='</div><div class="row-fluid">';
    }

    if($i==8)
    {
        $postPost='</div></div>';
        $i=0;
    }

    echo $prePost, '<div class="span3">';
    the_post_thumbnail();
    echo '</div>', $postPost;
}

echo '</div>'; //coda-slider

echo '</section>';

PHP Add every 2 items inside DIV in WordPress loop

The problem is that you print both <div> and </div> on even values of $i. That's why they always wrap only one and the second post stands aside.

You have to echo the <div> on even numbers and </div> on odd:

<?php if ( have_posts() ) : // If have post start. ?>

    <?php $i = 0; ?>

    <?php while ( have_posts() ) : the_post(); // Start Loop: ?>

        <?php if ( $i % 2 ==  0) : ?>
            <div class="wrap">
        <?php endif; ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <?php the_content(); ?>
        </article>

        <!-- changed == 0 to != 0  -->
        <?php if ( $i % 2 != 0 ) : ?>
            </div>
        <?php endif; ?>

    <?php $i++; endwhile; // End Loop. ?>

        <!-- added closing </div> for odd number of posts -->
        <?php if ( $i % 2 != 0 ) : ?>
            </div>
        <?php endif; ?>

<?php endif; // If have post end. ?>

I added a second </div> after the loop, because without it you wouldn't get the closing tag at all if you have an odd number of posts.

WPquery + add row every nth element

Add new row after 4 cols

<section class="row service_block_row bgf" id="page-<?php the_ID(); ?>">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <?php
                        $args = array(
                        'post_type'      => 'page',
                        'posts_per_page' => -1,
                        'post_parent'    => $post->ID,
                        'order'          => 'ASC',
                        'orderby'        => 'menu_order'
                     );

                    $parent = new WP_Query( $args );

                    if ( $parent->have_posts() ) : 
                     $count=0;
                    ?>
                        <div class="row">
                        <?php while ( $parent->have_posts() ) : $parent->the_post(); 
                            $count++;
                        ?>
                            <div class="col-sm-12 col-lg-3">
                                <h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
                            </div>

                        <?php 
                        if($count%4==0)
                        {
                            echo '</div><div class="row">';
                        }
                        endwhile; ?>
                        </div>
                        <?php endif; ?>

                        <?php wp_reset_query(); ?>
                </div>
            </div>
        </div>

php add class to every item in while loop except the 1st item

Here you go:

<?php $i=0; ?>
<?php while($a = $abc->fetch()){ extract($a); ?>
    <div class="<?php if($i++ != 0) echo "items";?>"></div>
<?php } ?>

How to add a class for every second div in a row

Use this, I have created a variable $divclass which will add the class accordingly.

Replace:

/*I need to add a class to the each second box-div2 div */
<div style="background-image: url('<?php echo $image[0]; ?>')"   class="box-div2">

With:

<?php 
    $divclass="";
    if ($counter%2==0) {
        $divclass="box-div2";
    }
?>
<div style="background-image: url('<?php echo $image[0]; ?>')"   class="<?php echo $divclass;?>">

Add class every third li throug Php

Assuming you're creating them via for-loop, you can just check on the index. Something like this:

for ($i=0; $i<$num_lis; $i++) {
    echo '<li'.($i % 3 == 2 ? ' class="last_child"' : '').'></li>';
}

Or if you prefer not to use ternary notation:

for ($i=0; $i<$num_list; $i++) {
    if ($i % 3 == 2) {
         echo '<li class="last_child"></li>';
    } else {
         echo '<li></li>';
    }
}

But as j08691 comments, you're probably better off simply selecting every third li in whatever it is that you have using the last_child class, i.e. nth-child for CSS, e.g.

li:nth-child(3n) {
 styles
}

---

Related Topics