Multi-Column Grid-Style Posts in WordPress

as this code can have its challenges, and is not always easy to apply, i would like to point to an easier to implement approach with the same results (depending on formatting):
Playing with columns – stacking posts in a grid.
There is also a newer article for creating posts in three columns.

Following question comes up regularly in the wordpress support forum: ‘i want to show my posts in three (four, five) columns, how can i do it?’

see the effect here in action: under pages ‘grid of posts’.

here, i am going  to present yet another solution: a flexible core structure to allow any number of columns with any number of rows, limited only by screen space, readability and fantasy…

a three column grid category template
a three column grid category template

the structure (for instance 3 columns, 4 rows, 12 or more posts):

1  5   9
2  6  10
3  7  11
4  8  12

the structure (for instance 3 columns, 4 rows, less than 12 posts, i.e. 7):

1  4  6
2  5  7

the code is setup step by step:

  1. setting of variables
  2. query_posts
  3. calculate rows
  4. loop 1 – the columns
  5. the wordpress loop – the rows
  6. page navigation

here is the full code:

<?php get_header(); ?>
// code to display a number of posts in multi columns top-to-bottom left-to-right
<?php global $query_string; ?>
$set_number_of_columns = 2; // enter numbers of columns here;
$set_number_of_rows = 4; // enter numbers of rows here
$set_showpost = $set_number_of_columns * $set_number_of_rows ;
//setup query with parameter for paged
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
// get number of posts for this,
$num_of_posts = $wp_query->post_count;
// make adjustment for paged to get three equaly long columns even on last paged page
// divide by $set_number_of_columns to get number per column,
// round up to next integer to make $ppc posts per column variable, or $set_number_of_rows whatever is smaller
$ppc = min(ceil($num_of_posts/$set_number_of_columns),$set_number_of_rows);
// calculates number of rows, i.e. showposts for the following query_posts and get_posts
<?php for ( $col = 1; $col <= $set_number_of_columns; $col += 1) { ?>
<div class="col<?php echo $col;?>">
$row = 1;
$noffset = ($col -1) * $ppc + ($paged - 1) * $set_showpost ; //calculate offset parameter if paged
$posts = get_posts($query_string.'&numberposts='.$ppc.'&offset='.$noffset);
foreach ($posts as $post) : start_wp(); ?>
<div id="post-<?php the_ID(); ?>" class="post row-<?php echo ($row%2); ?>">
<!-- start of anything to do with post -->
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="storycontent">
<?php the_excerpt(__('(more...)')); ?>
<!-- end of anything to do with post -->
</div> <!-- end #post -->
endforeach; ?>
<?php } ?>
<?php // close the for-loop // ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
<?php get_footer(); ?>

the naming of the css classes is:
class .col1 for the first column; class .col2 for the second column; and so forth.
same thing for the rows: class .row1 for the posts in first row, on so on.
going with this code is the css:

.col1, .col2 {float:left; width:49%; }

you can see the code in action: under pages ‘grid of posts’.
the effect ia achieved by giving each post a fixed height; and using a bit of javascript trickery.

37 Replies to “Multi-Column Grid-Style Posts in WordPress”

  1. awesome tutorial but the featured image [insert into post] on thumbnails was missing. how to display the image into post thumbnails?


    1. I am not quite sure what you are referring to (?)
      the ‘featured image’ can be called with the_post_thumbnail(). for those kind of questions consider joining the support forum.
      or you can hire me anytime to help you with the details.

      1. Your article couldn’t be written any better! I’m just awestruck as a result of the intelligent points on your website. This blog has many different points of view when compared to the other blogs I’ve seen. I am really intrigued about how this will change things in the long term, it is probably impossible to tell with all the current changes we see happening.

  2. Thanks for this great code. Got some ideas how I could set a more post ajax load instead of using pagination or next?

  3. Hi Sweeper,
    thanks for this, helped me troubleshoot something like it I made myself but paging didn’t work. I knew your code would be solid so I tried it, paging still produced 404. So immediately I knew it wasn’t the code. I tried a bunch of stuff, turns out out it was the reading settings. I had 10 and changed it to 5, now it works… but why?


    1. but why?

      I know that this is a common case, that the ‘posts_per_page’ in custom loops has to match the number in the ‘reading’ settings in the dashboard, to avoid 404s. why this is so – I have honestly no idea.

  4. The code is great but can not integrate it into the theme f2. And useful articles as if containers are equal. If you modify this code I would be grateful. Many thanks in advance

    1. any particular requirements? size of posts? number of columns? as page template or for the index page?

  5. Wonderful!
    How can I make it go from:
    1 4 7
    2 5 8
    3 6 9


    1 2 3
    4 5 6
    7 8 9

    thanks for great tutorial! Doing gods work..

  6. Oh, You’re a God! No wonder your logo is Buddha. btw, your code said something broken on line 58. I tried to find what happen but I couldnt find it. So as you said, it’s just CSS issue and I fix it with your previous code but I am curious with Code you just gave me. I would like to try it if you know which line is broken

    btw, I still cannot change it to 4 columns instead of 3. I still cannot figure it out why, but this is lot better. anyway, this is my web screenshot i dont know what html code of my browser so I can just only give you screenshot. And once again, I love you :* thank you sooooooo much

  7. oh and the css is col1, .col2, .col3, .col4 {float:left; width:150px; padding-top:10px; padding-right:5px; } 🙂

    1. Hi Salsa,

      here is a different code ( ) which does the same as the other, just different and more simple.
      you could use it instead of the code you pasted first.

      i tried it in my local test blog, in category.php, and it seems to work fine.

      i can’t say, why the other code did not work as expected.

      hope this helped,
      good luck,

  8. hi alchymyth. Thank you very much for your reply. i never thought you reply this thou. I have post the code to I do offline so i cannot show you my URL as i haven’t upload it. Those code should work perfectly to call category but as I said above it shows to
    _______________________________title & thumbnail_______________________
    _______________________________title & thumbnail_______________________
    __title & thumbnail_ __title & thumbnail_
    __title & thumbnail_ __title & thumbnail_

    I tried but it just shows all the posts I have (I want it to show only if somebody click the category) and everytime I change the coloumn into 4 coloumn it still shows 3 coloumn. Oh thank you so much for your reply. I also try to ask ppl on the forum.
    Thanks in advance, regards,

  9. hi Alchmyth, I have question, how do you put code to the explanation on your code. I have error, my post float like this :
    __ __
    __ __

    what did i do wrong???

    thanks for the answer

    1. Hi Salsa,
      difficult to tell without a link to your site and the code of your page template.
      i suggest you take your question to the wordpress help forum at (you need to register there) and post a link and maybe the code. there are lots of experienced volunteer helpers, and i am usually there as well, and will try to help you when i see your question coming up.
      it is much easier to exchange code and discuss these things in the help forum.

      also, have a look at my other approach to grid posts:
      it does pretty much the same as this article, particularly if you can format all posts with the same height.

      all the best, alchymyth

  10. oh thanks so much for this!!!! I bookmark your web and i will try it as soon as possible. if it does work i will donate you some money soon after I have my paypal set up. if dont, please be ready for my questions 🙂

  11. Hi Alchymth,

    Im trying to use your code for a page template unfortunately. Can you please translate your code for that usage please..


    1. hi brian,
      thank you for your interest.
      i have uploaded a page template version of the code ( ).
      obviously, you need to adapt the classes of the div to suit your styles, and add whatever you want to display for each post.
      the only main css class is ‘.col’ which should be set to ‘float:left; margin-right:5px; width:100px;’ with the ‘margin’ and ‘width’ set to a value so that the chosen number of columns fit the available space.

      hope you can work with the code,
      all the best,

      ps: don’t forget that there is a wordpress support forum at

      1. Thank you so much for posting this! You sure are generous with your time and expertise; it’s mighty nice of you.

        I’m trying to use your grid page template, but I need it to display teasers/excerpts of posts from only one category.

        I tried editing this one line, and it almost worked….kinda. It showed only the one category, but each post in triplicate. No idea why.

        $posts = get_posts(array('numberposts='.$ppc.'&offset='.$noffset, 'category' => 142));

        Can you help? I’d sure appreciate it. Thanks.

      2. possibly caused by mixing different syntaxes; try to change this line (which similar occurs three times):
        $posts = get_posts(array('numberposts='.$ppc.'&offset='.$noffset, 'category' => 142));
        $posts = get_posts('numberposts='.$ppc.'&offset='.$noffset.'&cat=142');
        or to:
        $posts = get_posts(array('numberposts' =>$ppc, 'offset' => $noffset, 'category' => 142));

    2. Thanks – your first guess works! You’re the best.

      $posts = get_posts('numberposts='.$ppc.'&offset='.$noffset.'&cat=142');

  12. I am now for days looking for a tutorial how to make multicolom posts.
    You really break it dowd. Could you tell me where in wich files to put this code?

    kind reagards


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.