Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

How can I display WordPress Post Content in 3 Columns and in order using WP_Query(); ?

For example,

<div class="1column">
    Post-1
    Post-4
</div>
<div class="2column">
    Post-2
    Post-5
</div>
<div class="3column">
    Post-3
    Post-6
</div>

Any help is appreciated! Thanks.

share|improve this question

migrated from stackoverflow.com Jul 19 '12 at 12:02

This question came from our site for professional and enthusiast programmers.

3 Answers 3

up vote 4 down vote accepted

Query the posts like you are known to it, but then get all posts and restructure them for the order you need it. Take care of setting up the global $post variable your own so that to ensure you template code still works.

The array_chunk­Docs function normally comes in handy for column based output:

$query = WP_Query($queryParameters);
if ($query->have_posts())
{
    $columnCount = 3;
    $rows = array_chunk($query->get_posts(), $columnCount);
    foreach (range(0, $columnCount - 1) as $column)
    {
        printf("<div class=\"class-%dcolumn\">\n", $column + 1);
        foreach ($rows as $row)
        {
            if (false == isset($row[$column]))
            {
                continue;
            }
            $post = $row[$column];
            setup_postdata($post);
?>
   ... single post template html/php mixture ...
<?php            
        }
        print("</div>\n");
    }
}

Some additional notes:

  • CSS class names can not start with a number. Please see the CSS specification and/or What characters are valid in CSS class names? - I prefixed those with class-....
  • You might not need this exact source-order. If not, you can just output one post after the other and take care of column display with CSS only. That normally lightens up the template code a lot.
share|improve this answer

Try below code...

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$get_all_post = new WP_Query('posts_per_page=15&paged=' . $paged);
$post_cont=0;
while ( $get_all_post->have_posts() ) : $get_all_post->the_post();
if(($post_cont)%3==0 || $post_cont==3){?><div class='1column'><?php }?>

title
  content...
<?php if(($post_cont)==2 || $post_cont==5){?></div><?php }?>


$post_cont++;
    endwhile;
?>
share|improve this answer

It would be easier to make it like this, and in html it is valid, and it indexes better on google: If you agree this would be better I gladly give the WP_Query code if you want it.

<style><!--put this in the css-->
.column{
    float:left;
    width:33.3%;
}
</style>
<div class="column">
    Post-1
</div>
<div class="column">
    Post-2
</div>
<div class="column">
    Post-3
</div>
<div class="column">
    Post-4
</div>
<div class="column">
    Post-5
</div>
<div class="column">
    Post-6
</div>
share|improve this answer

Your Answer

 
discard

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.