WordPress posts in multiple columns in multiple loops

If you need something like this:

• The first column, first loop: display posts #1-5
• The second column, second loop: display posts #6-10
• The third column, third loop: display posts #11-15

Using WordPress this configuration is relatively easy to accomplish. Let’s cut right to the chase..

Step 1: Setup the multiple loops

The first thing we want to do is replace the standard WordPress loop with the following code:

<div class="container">
  <div class="row">
    <div class="col-md-4">
    // FIRST LOOP: display posts 1 thru 5
    <?php query_posts('showposts=5'); ?>
    <?php $posts = get_posts('numberposts=5&offset=0'); foreach ($posts as $post) : start_wp(); ?>
    <?php static $count1 = 0; if ($count1 == "5") { break; } else { ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>

    <?php $count1++; } ?>
    <?php endforeach; ?>
    </div>

    <div class="col-md-4">
    // SECOND LOOP: display posts 6 thru 10
    <?php query_posts('showposts=5'); ?>
    <?php $posts = get_posts('numberposts=5&offset=5'); foreach ($posts as $post) : start_wp(); ?>
    <?php static $count2 = 0; if ($count2 == "5") { break; } else { ?>

    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>

    <?php $count2++; } ?>
    <?php endforeach; ?>

    </div>
    <div class="col-md-4">
    // THIRD LOOP: display posts 11 thru 15
    <?php query_posts('showposts=5'); ?>
    <?php $posts = get_posts('numberposts=5&offset=10'); foreach ($posts as $post) : start_wp(); ?>
    <?php static $count3 = 0; if ($count3 == "5") { break; } else { ?>

    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>

    <?php $count3++; } ?>
    <?php endforeach; ?>	
    </div>
  </div>
</div>

That’s the juice right there. We have three loops, each displaying five posts. The first loop displays the first five posts, the second loop displays the next five posts, and the third loop displays the next five posts. Thus, this multiple-loop configuration displays the most recent 15 posts, each of which being unique.

To make the above code work perfectly, you must need to call bootstrap in your WordPress.

Without bootstrap a little CSS, this configuration is relatively easy to accomplish. Let’s cut right to the chase.

<div class="column_wrap">
  <div class="column_01">
  // FIRST LOOP: display posts 1 thru 5
  <?php query_posts('showposts=5'); ?>
  <?php $posts = get_posts('numberposts=5&offset=0'); foreach ($posts as $post) : start_wp(); ?>
  <?php static $count1 = 0; if ($count1 == "5") { break; } else { ?>
  <h2><?php the_title(); ?></h2>
  <?php the_content(); ?>

  <?php $count1++; } ?>
  <?php endforeach; ?>
  </div>

  <div class="column_01">
  // SECOND LOOP: display posts 6 thru 10
  <?php query_posts('showposts=5'); ?>
  <?php $posts = get_posts('numberposts=5&offset=5'); foreach ($posts as $post) : start_wp(); ?>
  <?php static $count2 = 0; if ($count2 == "5") { break; } else { ?>

  <h2><?php the_title(); ?></h2>
  <?php the_content(); ?>

  <?php $count2++; } ?>
  <?php endforeach; ?>

  </div>
  <div class="column_01">
  // THIRD LOOP: display posts 11 thru 15
  <?php query_posts('showposts=5'); ?>
  <?php $posts = get_posts('numberposts=5&offset=10'); foreach ($posts as $post) : start_wp(); ?>
  <?php static $count3 = 0; if ($count3 == "5") { break; } else { ?>

  <h2><?php the_title(); ?></h2>
  <?php the_content(); ?>

  <?php $count3++; } ?>
  <?php endforeach; ?>	
  </div>
</div>

সিএসএস দিয়ে কলাম স্টাইলিং

/* three column layout */
div.column_01 {
  float: left;
  clear: none;
  width: 33%;
}
div.column_02 {
  float: left;
  clear: none;
  width: 33%;
}
div.column_03 {
  float: right;
  clear: none;
  width: 33%;
}

Once you get your setup, your post should display multiple-loop content in multiple columns, with each column showing the content of a different loop. This is a great way to customize your theme, which makes it possible to present a lot of incompatible information in a layout that is easy to understand. However, this technique can not be done if that is so, we have got one more WordPress moves up our sleeve!