title: Add class to every 4 posts and 8 posts -- WordPress Loop
body: <p>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.</p>
  
  <p>HTML of what I am try to achieve - </p>
  
  <pre><code>&lt;div class="coda-slider"  id="slider-id"&gt;
  
    &lt;div class="slide"&gt;
  
      &lt;div class="row-fluid"&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /row-fluid --&gt;
  
      &lt;div class="row-fluid"&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /row-fluid --&gt;
  
    &lt;/div&gt;&lt;!-- /slide --&gt;
  
    &lt;div class="slide"&gt;
  
      &lt;div class="row-fluid"&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /row-fluid --&gt;
  
      &lt;div class="row-fluid"&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;img src="..."&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /row-fluid --&gt;
  
    &lt;/div&gt;&lt;!-- /slide --&gt;
  
  &lt;/div&gt;&lt;!-- /coda-slider --&gt;
  </code></pre>
  
  <p>My query that doesn't work correctly - </p>
  
  <pre><code>&lt;?php
  
  $args = array( 'post_type' =&gt; 'video', 'posts_per_page' =&gt; 10,);
  
  $the_query = new WP_Query( $args );
  
  echo '&lt;section id="our-clients"&gt;';
  
  echo '&lt;div class="coda-slider"  id="slider-id"&gt;';   
  
  $i = 1;
  
  echo '&lt;div class="slide"&gt;';
  
  echo '&lt;div class="row-fluid"&gt;';
  
  if ( $the_query-&gt;have_posts() ) : while ( $the_query-&gt;have_posts() ) : $the_query-&gt;the_post();
  
  echo '&lt;div class="span3"&gt;';
  
  the_post_thumbnail();
  
  echo '&lt;/div&gt;';
  
       if($i % 8 == 0) {echo '&lt;/div&gt;&lt;div class="slide"&gt;';}
  
       elseif($i % 4 == 0) {echo '&lt;/div&gt;&lt;div class="row-fluid"&gt;';}
  
  $i++; endwhile; endif;
  
  echo '&lt;/div&gt;'; //row-fluid
  
  echo '&lt;/div&gt;'; //slide
  
  echo '&lt;/div&gt;'; //coda-slider
  
  echo '&lt;/section&gt;';
  </code></pre>
  
  <p>What the query is printing out - </p>
  
  <p><img src="https://i.stack.imgur.com/yBMdS.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>I appreciate the help!</p>