WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

My loop displays posts in two columns using this php

if (have_posts()): while (have_posts()) : the_post();
    <?php  if ($count == 1) : ?>
    <div class="home-ci-row">

    <div style="padding: 0px;" class="main-column-item-wrap">
    CONTENT OF POST : Title, Thumbnail, Excerpt... etc

    <div class="home-ci-gap"></div><!-- /* the gap */ -->

    <?php elseif ($count == 2) : ?>    

   <div style="padding: 0px;" class="main-column-item-wrap">
   CONTENT OF POST : Title, Thumbnail, Excerpt... etc
   </div> <!-- main-column-item-wrap -->

</div><!-- /* home-ci-row*/ -->

<?php $count = 0; ?>

      <?php else : ?>
<?php endif; endwhile; endif; ?>

You can see that the div '' opens in the first count & closes in the second one.

so when my loop has an even number of posts works great, but with odd number it doesn't close the div

so My idea is this: If loop has even number http://i.stack.imgur.com/Hu4Ua.png

If loop has odd number of posts http://i.stack.imgur.com/JjqzZ.png

I hope my question is clear,

share|improve this question
up vote 1 down vote accepted

You could do this much easier. As you are making a layout that can be achieved by floats, there is no need to declare a Row every second time.

In my Code example I just youse the $count to determine the Class of the HTML-Element. In combination with the total Number of Posts displayed.

If the total number of posts $wp_query->post_count is reached by the $count AND the total number is odd, I give the Element the Class fullwidth. In the same way, I determine if it is the first or the second (see the IF-Statement).

All I need to do afterwards is output the corresponding Class for each HTML-Element in the Loop. Besides the Class, no Element is diffferent from each other.

I use the Modulo Operator in PHP ( % ) to determine odd/even. It delivers 1 if I use $count % 2 and $count is odd. If you are not sure about this operator, read about it here.

So your code could look like this:

    $count = 0;
    if (have_posts()): while (have_posts()) : the_post();
        if ( ++$count == $wp_query->post_count && ( $wp_query->post_count % 2 ) == 1 ) {
            // if final count is reached AND final count is odd
            // full width item
            $postclass = "fullwidth";
            $opentag = '';
            $closingtag = '</div>';
        } else if ( ( $count % 2 ) == 1 ) {
            // if $count is odd it is the first item in a 'row'
            $postclass = "halfwidth first";
            $opentag = '<div class="home-ci-row">';
            $closingtag = '';
        } else {
            // second item in a row
            $postclass = "halfwidth second";
            $opentag = '';
            $closingtag = '</div>';
    <?php echo $opentag; ?>
    <div class="main-column-item-wrap <?php echo $postclass; ?>">
    CONTENT OF POST : Title, Thumbnail, Excerpt... etc
    </div><!-- main-column-item-wrap -->
    <?php echo $closingtag; ?>

<?php endwhile; endif; ?>
share|improve this answer
This would work for me I will use it, but How can I echo this <div class="home-ci-row"> at the begging of the loop then comes <div class="main-column-item-wrap <?php echo $postclass; ?>"> twice then close the loop with </div><!-- /* home-ci-row*/ --> – Adam Azad Mar 14 '13 at 8:24
why do you need the <div class="home-ci-row">? you would be mucch more flexible if you do not put this div around the items. – fischi Mar 14 '13 at 11:21
I need it if possible – Adam Azad Mar 14 '13 at 16:03
see updated version. still, it would be better if you created the rows by css instead of a div. – fischi Mar 14 '13 at 17:19

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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