0

I'm trying to split my loop into 4 columns. My logic is very flawed here and my layout is breaking. Such a simple problem, but I'm struggling with it.

I essentially need each group of four posts to be wrapped in a container "row" div. And, of course, whatever remaining posts are left over, even if less than four, to be wrapped as well.

<div class="twelve columns">    
    <?php 
     $i = 0; 
     if (have_posts() ) : while ( have_posts() ) : the_post(); 
        if ($i == 0) { echo '<div class="row">'; }
        if ($i%4== 0) { echo '</div><div class="row">'; } ?>

        <div class="three columns">
            <?php the_post_thumbnail(); ?>
            <h3>Title</h3>
        </div>

        <?php 
         if ( $i%4 == 0) { 
           echo '</div>'; 
         } 
         $i++; 

        endwhile; endif; ?>

    </div>

I posted this over at stackoverflow as well, but no replies. Any suggestions to solve my problem here?

0

Try this:

<div class="all-posts">
   <div class="post-group>
      <?php $i = 0;
      if (have_posts() ) : while ( have_posts() ) : the_post();
         if ($i%4 == 0) echo '</div><div class="post-group">'; ?>
         <div class="post">
            <?php the_title(); ?>
         </div>
         <?php $i++;
      endwhile; endif; ?>
   </div><!-- end post-group -->
</div><!-- end all-posts -->

You code was closing, opening and closing div on multiples of 4. Anyway, I'm guessing all this is about layout, so you should be able to find a better solution only with CSS.

| improve this answer | |
  • Badabing...that's it. Thanks! So obvious actually...sigh... ;-) – user56498 Jul 13 '14 at 10:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.