posts - display content in multiple columns

I am Creating a Multi row , 2 Columns blog Post like this

Post #1   |   Post #4
Post #2   |   Post #5
Post #3   |   Post #6

I have found some post useful

/

Based on the post I have Created Code as follows

<?php

// Some sample styles for the images
echo "<style type='text/css'>
div#left-column {
    width: 150px;
    float: left;
    clear: none;
    }
div#right-column {
    width: 150px;
    float: left;
    clear: none;
    }
</style>\n";

?>


<div class="container">
    <div class="row">
        <div class="span6">
                <div class="span4">
           <?php if (have_posts()) : 
           while(have_posts()) : 
           $i++; ?>

           <?php if(($i % 2) !== 0) :?>

<div id="left-column" class="col-xs-6">
           <?php $wp_query->next_post();the_excerpt();?>
           </div>

<div id="right-column" class="col-xs-6">

           <?php else : the_post(); the_excerpt();?>
</div>                

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

<?php $i = 0; rewind_posts(); ?>
</div>
</div>

But this Code giving me Output like

Either it is posting odd or even posts , and in distorted manner ...I Tried lot of things , But not able to get alternate post in horizontal direction , Either i am getting completely vertical or hoirizontal . Can anyone suggest what I am msssing , Any suggestion will be helpful

I am Creating a Multi row , 2 Columns blog Post like this

Post #1   |   Post #4
Post #2   |   Post #5
Post #3   |   Post #6

I have found some post useful

https://digwp.com/2010/03/wordpress-post-content-multiple-columns/

Based on the post I have Created Code as follows

<?php

// Some sample styles for the images
echo "<style type='text/css'>
div#left-column {
    width: 150px;
    float: left;
    clear: none;
    }
div#right-column {
    width: 150px;
    float: left;
    clear: none;
    }
</style>\n";

?>


<div class="container">
    <div class="row">
        <div class="span6">
                <div class="span4">
           <?php if (have_posts()) : 
           while(have_posts()) : 
           $i++; ?>

           <?php if(($i % 2) !== 0) :?>

<div id="left-column" class="col-xs-6">
           <?php $wp_query->next_post();the_excerpt();?>
           </div>

<div id="right-column" class="col-xs-6">

           <?php else : the_post(); the_excerpt();?>
</div>                

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

<?php $i = 0; rewind_posts(); ?>
</div>
</div>

But this Code giving me Output like

Either it is posting odd or even posts , and in distorted manner ...I Tried lot of things , But not able to get alternate post in horizontal direction , Either i am getting completely vertical or hoirizontal . Can anyone suggest what I am msssing , Any suggestion will be helpful

• posts
• menus
• css

Share Improve this question asked Sep 4, 2016 at 8:28 neerajneeraj 111 silver badge22 bronze badges 4

• Is that's what you're trying to achieve? WP Masonry Plugin. – 99teko Commented Sep 4, 2016 at 8:52
• If you would like to do it yourself, see this. – 99teko Commented Sep 4, 2016 at 8:52
• I am Trying to do it using wordpress loops . can it be possible ? I hope it is – neeraj Commented Sep 4, 2016 at 8:57
• That's a task for display: flex;. See css-tricks.com/snippets/css/a-guide-to-flexbox. And as it can be solved with just CSS this is no WordPress-specific issue, which unfortunately makes that question off-topic. – leymannx Commented Apr 3, 2019 at 13:20

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

found a simple solution ..I m posting full index.php

<?php
/**
 * Description: Default Index template to display loop of blog posts
 *
 * @package WordPress
 * @subpackage BootstrapWP
 */
get_header(); ?>

<?php

// Some sample styles for the images
echo "<style type='text/css'>

    .half {
    width: 50%;
    float: left;
}

.ng-row {
    clear: both;
}

</style>\n";

?>

<div class="container">
    <div class="row">
        <div class="span6">
                <div class="span4">


<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="half">
<?php the_excerpt()?>

</div>
<?php endwhile;endif ?>

    <?php get_sidebar('blog'); ?>
    <?php get_footer(); ?>

---

2. Another Clean and much more accurate solution without even/odd i found and modified is

   <?php if (have_posts()) : 
   
       while(have_posts()) :
       $i++; 
   
        the_post()?>
   
   
    <div class="row" style="width: 670px;">
    <div id="left-column">
   
    <?php the_content(); ?>
    </div>
   
   <?php 
   endwhile;
   ?>
   

   <style>
   
    left-column {
   width: 333px;
   float: right;
   clear: none;
   }
   
   </style>
   

Hope this is helpful

When looking at the code on your example, I guess you tried to replicate the 5th option from the article on digwp.

The first time the query runs the odd posts are picked and placed in the left column. After that, they are using rewind_posts(); to reset the query to the beginning. Then the query is running a second time to pick all the even posts and place them in the right column.

Your code does indeed rewind the posts, but the right column should be filled after that action with a second query, not before. You are running the query only once. Hope this helps!