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">    
     $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(); ?>

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

        endwhile; endif; ?>


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

1 Answer 1


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(); ?>
         <?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.

  • Badabing...that's it. Thanks! So obvious actually...sigh... ;-)
    – user56498
    Commented Jul 13, 2014 at 10:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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