Question

Basically I need a custom WordPress post loop which outputs posts in the following format (it should be formatted that way for every two posts, so two posts each in a “col” div both contained in the “row” div.):

<div class="row cols2">
<div class="col left">
<a href="#"><img src="featured-image.jpg" /></a>
<h2><a href="#">Blog Post Title</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div><!-- /.col left -->

<div class="col right">
<a href="#"><img src="featured-image.jpg" /></a>
<h2><a href="#">Blog Post Title</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div><!-- /.col right -->
</div><!-- /.row cols2 -->

I have more or less achieved this using the following loop:

<?php $counter=1;$grids=2;global $query_string;query_posts($query_string.'&caller_get_posts=1&posts_per_page=6');if(have_posts()):while(have_posts()):the_post();if($counter==1):?>
<div class="row cols2">
<div class="col left">
<a href="<?php the_permalink()?>"><?php the_post_thumbnail('default-thumb')?></a>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt() ?>
</div><!-- /.col left -->

<?php elseif($counter==$grids):?>
<div class="col right">
<a href="<?php the_permalink()?>"><?php the_post_thumbnail('default-thumb')?></a>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt() ?>
</div><!-- /.col right -->
</div><!-- /.row cols2 -->
<?php $counter=0;endif;$counter++;endwhile;endif;?>

The only problem with this is when there is only one post in the “.row cols2” div it messes up because the “.row cols2” closing tag is only outputted when there are two posts in a row. If anyone has any idea on how to help it would be GREATLY appreciated!

Answer 1

I’m so glad i dont have to work with your code, it’s a nightmare to read. I would recommend not bunching up conditions and loops like that, it just makes reading and debugging so much more difficult.

On to your question, the basic idea is that you output the container every even count increment, then check the counter at the end to find if your missing any requirements (i.e. table cells in a table, an ending tag for an element e.c.t.).

So all you need to do is check it at the end (i’ve also rewritten your post output, never duplicate the same code unnecessarily, it could cause you issues later on when you make changes to one and not the other).

<?php 
$counter=1;
$grids=2;
global $query_string;
query_posts($query_string.'&caller_get_posts=1&posts_per_page=6');

if(have_posts()):

  while(have_posts()):

    the_post();

    //-- ouput start elements
    if($counter==1): ?>
      <div class="row cols2">
      <div class="col left">
    <?php
    elseif($counter == $grids): ?>
      <div class="col right">
    <?php endif; ?>

    <?php /* Output column box content */ ?>

    <a href="<?php the_permalink()?>"><?php the_post_thumbnail('default-thumb')?></a>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt() ?>



     <?php /* always need to close the inner div */ ?>
     </div>

     <?php 
     //-- if its the second column, then end row and reset counter
    if($counter == $grids): ?>
      </div>
    <?php 
      $counter = 0;
    endif; ?>


<?php 
$counter++;
endwhile;

if($counter == 1):
  //--- output empty second column div then end the row
  ?>
  <div class="col right"></div>
  </div>
  <?php
endif; 
    ?>

<?php
/** Forgot this one */
endif;

?>