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

Question

I am trying to build a content slider so that each slide contains 8 images. To do this I need to add the 'row-fluid' class to every 4 posts and 'slide' class to every 8 posts in my WP query.

HTML of what I am try to achieve -

<div class="coda-slider"  id="slider-id">

  <div class="slide">

    <div class="row-fluid">
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
    </div><!-- /row-fluid -->

    <div class="row-fluid">
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
    </div><!-- /row-fluid -->

  </div><!-- /slide -->

  <div class="slide">

    <div class="row-fluid">
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
    </div><!-- /row-fluid -->

    <div class="row-fluid">
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
    </div><!-- /row-fluid -->

  </div><!-- /slide -->

</div><!-- /coda-slider -->

My query that doesn't work correctly -

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

$i = 1;

echo '<div class="slide">';

echo '<div class="row-fluid">';

if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();

echo '<div class="span3">';

the_post_thumbnail();

echo '</div>';

     if($i % 8 == 0) {echo '</div><div class="slide">';}

     elseif($i % 4 == 0) {echo '</div><div class="row-fluid">';}

$i++; endwhile; endif;

echo '</div>'; //row-fluid

echo '</div>'; //slide

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

echo '</section>';

What the query is printing out -

enter image description here

The php is adding the 'slide' class to every 8 posts but the first 'slide' class isn't closing correctly. This probably sounds really confusing, so let me know if you need additional information.

I appreciate the help!

How many row-fluides in per slide you want ?

The Alpha
– The Alpha

2013-09-30 08:04:14 +00:00
Commented Sep 30, 2013 at 8:04 — The Alpha
– The Alpha, Commented Sep 30, 2013 at 8:04
I missed but posted an answer, check if this help :-)

The Alpha
– The Alpha

2013-09-30 09:08:49 +00:00
Commented Sep 30, 2013 at 9:08 — The Alpha
– The Alpha, Commented Sep 30, 2013 at 9:08

Rowman Pirce · Accepted Answer · 2013-09-30 08:27:31Z

2

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

answered Sep 30, 2013 at 8:27

Rowman Pirce

4232 silver badges8 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:01:20Z

1

This code is from another answer on SO

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

https://stackoverflow.com/a/12698408/804087

<?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 May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Sep 30, 2013 at 8:23

Anagio

3,0759 gold badges47 silver badges81 bronze badges

Comments

The Alpha · Accepted Answer · 2014-03-27 06:35:30Z

1

You may try this using get_posts and array_chunck

$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);
$posts = get_posts($args);
$postGroups = array_chunk($posts, 8);

foreach($postGroups as $group) :
    echo "<div class='slide'>";
        $slides = array_chunk($group, 4);
        foreach($slides as $fluides) :
            echo "<div class='row-fluide'>";
                foreach($fluides as $video) : setup_postdata($video)
                    <div class="span3">
                       // ...
                    </div>
                endforeach;
            echo "</div>";
        endforeach;
    echo "</div>";
endforeach;

edited Mar 27, 2014 at 6:35

answered Sep 30, 2013 at 9:01

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related