20 | Multi-Column Grid-Style Posts in WordPress

g+

RECOMMENDATION:
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
3 

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(); ?>
<?php
// code to display a number of posts in multi columns top-to-bottom left-to-right
?>
<?php global $query_string; ?>
<?php
$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;
query_posts($query_string.'&showposts='.$set_showpost.'&paged='.$paged);
// 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;?>">
<?php
$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 -->
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="storycontent">
<?php the_excerpt(__('(more...)')); ?>
</div>
<!-- end of anything to do with post -->
</div> <!-- end #post -->
<?php
$row++;
endforeach; ?>
</div>
<?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>
</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.

This entry was posted in WordPress and tagged , , , , , , , , , , , . Bookmark the permalink.

34 Responses to Multi-Column Grid-Style Posts in WordPress

  1. king comments:

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

    thanks,
    King

    • alchymyth replies:

      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 WordPress.org support forum.
      or you can hire me anytime to help you with the details.

  2. Toure comments:

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

  3. jon comments:

    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?

    thanks!

    • alchymyth replies:

      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. Biastore comments:

    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

    • alchymyth replies:

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

  5. Lai Shao Yi comments:

    Sorry to bother you.
    I am astonished by your modified three column content list.
    While I am confused with showing content like:
    1 2 3
    4 5 6
    7 8 9

    I’ve checked your article: http://www.transformationpowertools.com/wordpress/playing-with-columns-stacking-posts-grid-style
    while that version doesn’t have page navigation like above.
    Would you please teach me how to modify like above?

    Thank you very much.

    Lai.

  6. ayhan comments:

    I use this code in my blog and work fine,but u k’now how to get thumbnail for post?

  7. yash comments:

    first i would like to thank you, for this nice post

    dear i want to create multiple layout like this http://demos.gabfirethemes.com/wp-newspaper/category/entertainment/

    here are three loops

    please guide me

  8. bossaxe comments:

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

    to

    1 2 3
    4 5 6
    7 8 9

    thanks for great tutorial! Doing gods work..

  9. Jan comments:

    Thanks a lot for this example

  10. Pingback: lesterparker.co.uk » Blog Archive » Multi-Column Grid-Style Posts in WordPress | TransformationPowerTools | for personal growth and transformation

    g+

    05/03/2011 | […] Multi-Column Grid-Style Posts in WordPress | TransformationPowerTools | for personal growth and tran…. //…

  11. Pingback: wp-popular.com » Blog Archive » Multi-Column Grid-Style Posts in WordPress | TransformationPowerTools | for personal growth and transformation

    g+

    25/01/2011 | […] here: Multi-Column Grid-Style Posts in WordPress | TransformationPowerTools | for personal growth and tran… Tags: code, column, custom, grid,…

  12. salsa comments:

    Oh, You’re a God! No wonder your logo is Buddha. btw, your code http://wordpress.pastebin.com/4PRYEbF6 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 http://yfrog.com/cb46901083j 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

  13. salsa comments:

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

    • alchymyth replies:

      Hi Salsa,

      here is a different code ( http://wordpress.pastebin.com/4PRYEbF6 ) 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,
      michael

  14. salsa comments:

    hi alchymyth. Thank you very much for your reply. i never thought you reply this thou. I have post the code to http://wordpress.pastebin.com/Ec8pQTRS 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 http://wordpress.pastebin.com/CLYY2Y65 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,
    Salsa

  15. salsa comments:

    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

    • alchymyth replies:

      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 http://wordpress.org/support/ (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: http://www.transformationpowertools.com/wordpress/playing-with-columns-stacking-posts-grid-style
      it does pretty much the same as this article, particularly if you can format all posts with the same height.

      all the best, alchymyth

  16. salsa comments:

    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 🙂

  17. Brian comments:

    You rock! Alchmyth, it all works like a charm. really appreciates the time and effort.

    brian

  18. Brian comments:

    Hi Alchymth,

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

    cheers
    brian

    • alchymyth replies:

      hi brian,
      thank you for your interest.
      i have uploaded a page template version of the code ( http://wordpress.pastebin.com/CLYY2Y65 ).
      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,
      alchymyth

      ps: don’t forget that there is a wordpress support forum at http://wordpress.org/support/

      • Rachel replies:

        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.

      • alchymyth replies:

        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));
        to:
        $posts = get_posts('numberposts='.$ppc.'&offset='.$noffset.'&cat=142');
        or to:
        $posts = get_posts(array('numberposts' =>$ppc, 'offset' => $noffset, 'category' => 142));
        (untested)

    • Rachel replies:

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

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

  19. alchymyth comments:

    hi joao,

    thank you for your interest.
    i would probably use the code in index.php to display the front page.
    however, if you want to use it for a page template ( http://codex.wordpress.org/Pages#Page_Templates ), there may be a few changes neccesary to get it to show the posts.
    if you need more assistence, sign up to the wordpress help forum ( http://wordpress.org/support/ ).

    see you there,
    alchymyth

  20. Joao comments:

    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

    Joao

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*