24 | Playing with columns – stacking posts in a grid

g+

a different approach to ‘grid style’ – stacking the posts in a tightly ordered grid; to get a similar design as in http://www.creativedepart.com/ – ideal to use with thumbnails and excerpts:

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

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

(bare minimum code, without explanation, totally flexible and automatic)

<?php
$num_cols = 4; // set the number of columns here
//the query section is only neccessary if the code is used in a page template//
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // for pagination
$args = array(
  'posts_per_page' => 16, // optional to overwrite the dashboard setting
  'cat' => 0, // add any other query parameter to this array
  'paged' => $paged
);
query_posts($args);
//end of query section
if (have_posts()) :
  for ( $i=1 ; $i <= $num_cols; $i++ ) :
    echo '<div id="col-'.$i.'" class="col">';
    $counter = $num_cols + 1 - $i;
    while (have_posts()) : the_post();
      if( $counter%$num_cols == 0 ) : ?>
        <!-- core post area;
        title, content, thumbnails, postmeta, etc -->
      <?php endif;
      $counter++;
    endwhile;
    rewind_posts();
    echo '</div>'; //closes the column div
  endfor;
  next_posts_link('&laquo; Older Entries');
  previous_posts_link('Newer Entries &raquo;');
else:
  echo 'no posts';
endif;
wp_reset_query();
?>

minimum css:

.col { width:150px; float:left; margin-right:5px; }

addendum:
this method can be implemented into the Twenty Ten theme, using the new ‘get_template_part()’ function to use custom loops.
for the code see:
loop-grid.php;
page template;
css styles.

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

39 Responses to Playing with columns – stacking posts in a grid

  1. Lucian comments:

    It’s been 3 days and still no answer on the wordpress forum :(
    http://wordpress.org/support/topic/2-or-3-column-grid-layout-for-twenty-twelve?replies=0#post-5200320

    I’m stuck.

  2. Edmiel Leandro comments:

    Thank you so much! You save my life!!!

    Awesome code, amazing job ;)

  3. Roselle comments:

    Hi Michael,

    I’ve been up for almost 19 hours now doing some work. The last 5 hours of that was spent on Googling a solution for this. I’ve found many codes that seem to help…but as the hours tick, and I implement the advice I find, the more it seems to not work. Needless to say, “arghhhhhh!!!”

    So, here’s the problem:

    I’ve made custom category pages. I’m looking for this specifically:

    1) category posts to be split between two or three columns.

    2) category posts to act as if newsfeed (like, if you scroll down further, it will show more posts from that category).

    3) here’s a picture of what I want to go for: http://img13.imageshack.us/img13/4738/themejunkiequestions.png

    4) here’s another picture of something like it, but just as 2 or 3 columns: http://www.creativedepart.com/

    I’m pretty sure that since I’ve seen your avatar more than once in searching for a solution for this, that you’ve come the closest to knowing what I want.

    The code in your post looks like it would work for me. I tried it but it didn’t work. I either don’t know what to add or take away, or maybe I just need to sleep a few hours, lol.

    I need your help!

    Thanks,
    Roselle

  4. Devie Ygoña comments:

    This is a very useful code i really like it the answer is in the point…..thanks a lot more power.

  5. Mattiz comments:

    Hi alchymyth,

    First of all, thanks for this great post. Just what I was looking for.
    I’m trying to implement your code into the Twentyeleven category.php, so all category overviews in my site will have the same column layout.

    I tried to delete the query part in loop-grid.php but that doesn’t seem to work so i’m doing something wrong. Could you please put me in the right direction?

    Regards,
    Mattiz

  6. Scott comments:

    I keep coming back to this post, I’ve used it in so many templates. Is there any way to make it ignore other post formats? display: none works for sticky posts, but for asides and other formats it removes the post, but does not add a new one in its place.

    For example, using the templates you linked,I have 4posts displayed on a page, if I hide an aside using CSS, it only displays 3.

  7. Britt comments:

    Hi there,

    First of all, great code! Love it very much.. Only I seem to get one problem.. Whenever I want to use my search option and just type something ordinairy I don’t get results.. I keep getting the posts from te first page from my index.

    Same as I click a category or tag. The URL changes but in the screen the post from the index remain.

    I’m assuming it’s the code since I do not have this problem when I replace this with the normal wordpress loop.

    Any idea?

    • alchymyth replies:

      if you are using the code in an index.php template (or archive.php, or search.php…) do remove this section:
      $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // for pagination
      $args = array(
      'posts_per_page' => 16, // optional to overwrite the dashboard setting
      'cat' => 0, // add any other query parameter to this array
      'paged' => $paged
      );
      query_posts($args);

      this section is only needed if the code is used in a page template.

  8. Dawn comments:

    Got it to work. Deleted all the column info in style sheet and then added the the .col to style. I also named loop-grid loop-index for main index page. Not sure if necessary but it works.

    Thanks for the code and your quick response.

    Dawn.

  9. Dawn comments:

    I made all of the changes that you posted to change the Twenty Ten theme to a grid syle but it is not working. Are there anymore changes I need to make to code?

  10. Elle comments:

    Thanks for this! It’s exactly what I’m looking for.

    HOWEVER, I’m designing a new blog and have a few questions. First, can I implement this on the Twenty Eleven Framework in a child theme? I’ve already done some customizing and would like to add this to my code.

    If so, how? Where ever twenty ten is referenced in the code, do i change that to twenty11? I’m guessing I can just add the attached css to my own child theme, and then add a loop-grid.php and the new page template. Can you confirm? But what about the get_template_part() mentioned above in your addendum? Where do I add that to my code, and what exactly should I add?

    Thanks! (and feel free to reply like you’re speaking to a moron. It might actually be helpful!)

    • alchymyth replies:

      the principle will work in most themes, however the example files are specific and cannot simply be used in Twenty Eleven, for instance.
      the reference of ‘twentyten’ is for localisation (translation) purposes, and could be change to ‘twentyeleven’ if you like.

      if you like to get free support, join the WordPress support forum, and ask there.

  11. maurizio comments:

    Hi alchymyth, great code, but one question about pagination. i have a category link in menu (link –> /?cat=7) and it’ll display posts in categlory 7. i have 10 posts in this category and my args are:

    $args = array(
      'posts_per_page' => 8, // optional to overwrite the dashboard setting
      'cat' => 7, // add any other query parameter to this array
      'paged' => $paged
    );
    

    but when i click on “« Older Entries” it’ll show all previous post and not only posts of category 7…
    can i fix it?
    thanks
    Maurizio

    • maurizio replies:

      it’ll show the 404.php page.. why?

      • maurizio replies:

        ok i fix it.. in admin-> settings->reading i put 8
        then i remove ‘posts_per_page’ => 8, in your code and now works..!!!

  12. Dave Redder comments:

    Thanks for this – out of interest, any reason why you don’t indent your code? Makes it slightly hard to read…

    • alchymyth replies:

      I usually don’t care to indent code; however, it sems to be a nice idea, so here it is ;-)

  13. Amarender comments:

    Thank you dude for your Valuable, which have helped me alot.

  14. Bart comments:

    is it possible to only show a list of 1 category?
    and show posts in alphabetic order?

    many thanks

    • alchymyth replies:

      use corresponding parameter for the query:
      example:
      $cat_id = 17; //the cat ID of the one category
      $args = array(
      'posts_per_page' => 16, // optional to overwrite the dashboard setting
      'category__in' => array($cat_id),
      'orderby' => 'title',
      'order' = 'ASC',
      'paged' => $paged
      ); query_posts($args);


      list of all possible query parameters

      • lucymothership replies:

        Hiya. First of all thanks for all your blog posts and comments on the wordpress forums. I keep seeing your photo pop up when i’m looking for help! I was wondering if you could help me with this..

        I am using

        $cat_id = 17; //the cat ID of the one category
        $args = array(
        ‘posts_per_page’ => 16, // optional to overwrite the dashboard setting
        ‘category__in’ => array($cat_id),
        ‘orderby’ => ‘title’,
        ‘order’ = ‘ASC’,
        ‘paged’ => $paged
        ); query_posts($args);

        which has solved part a problem I have been working on for what feels like months!! Just one thing I need is for the posts to be displayed from both the parent category and its child categories. I don’t suppose you would know I could do this?

        Thanks

        Lucy

      • alchymyth replies:

        Hi Lucy (the one in the sky with diamonds?)

        try and change this line:
        'category__in' => array($cat_id),
        into:
        'cat' => $cat_id,

        http://codex.wordpress.org/Class_Reference/WP_Query#Category_Parameters

        good luck,
        Michael aka alchymyth

      • lucymothership replies:

        Genius!! Thanks very much!

  15. Anthony comments:

    Is it possible for this code to exclude the first post, or to allow me to style the first post differently? I want to first to span the size of 4 columns, and be alone. Basically, I want the columns to start under the first post.

    • alchymyth replies:

      generally, yes.
      possibly by putting a simple loop infront of the code to output the first post, and then excluding this post in the main loop. for how to, see http://codex.wordpress.org/The_Loop#Multiple_Loops_in_Action
      however, if you don’t want this first post to be different on paginated pages, then it would need quite extensive coding for this, as you require different post numbers for those pages.

  16. George Coghill comments:

    A couple of questions:

    I am trying to use this grid for the search results template for a custom post type. How do I go about this? I’ve been wracking my brain trying to figure this out.

    Also, when I use this grid for my custom taxonomy category/tags archives pages, I only see three items (which is the setting in the Reading settings). How do I get it to display more?

    • alchymyth replies:

      what arguments have you tried with the query? to use this for search results, you might need to integrate the global $wp_query as in http://codex.wordpress.org/Function_Reference/query_posts#Usage_Note.
      as for the category archives, does the ‘posts_per_page’ parameter not work? be aware, you might get some problems with pagination if the number of posts don’t match what is in the dashboard settings.

      for further questions, please consider joining the wordpress.org support forum.

  17. Patrick comments:

    Awesome tutorial – the adendum at the bottom solved my problem after hours or searching.

    Thanks so much!

  18. Zeaks comments:

    Thanks for this and the reply on wordpress forums, I have it working on my site now with a few changes. I added featured image into each area with a line of code from another tutorial.
    Only thing is, my header isn’t showing the featured image anymore when the post is selected, and I’m trying to track down what’s doing it but haven’t had any luck. Any suggestions? Would it be something from this code, or maybe somethign else I’ve done.

    Your tutorials are very help, I’ve learned alot from them.

  19. RedRooster comments:

    now THIS is exactly what I was looking for – im working on a custom theme and needed a way of labelling my third column with a unique class to remove excess padding to the right!!!!

    Exciting times for me :) – many thanks and keep up the good work

  20. vu nguyen comments:

    Im using your code and it works good at index.php, but when i click on categories, it keeps the same page, doesn’t load any thing, except URL. Please help me
    PS: I use many loop to make columns and mostly get this issue

  21. Jason Paul comments:

    Could provide a clue as to how to implement this? My theme is based off of Twenty Ten and the loop is a bit more layered and I’ve found a lot of loop hacks won’t work. Where in the loop could this be pasted?

    • alchymyth replies:

      Hi Jason,
      thanks for your interest.

      the general loop.php is a bit crowded already, therefore, i would make a loop-grid.php and integrate the stacking code there, for instance: http://wordpress.pastebin.com/09HncmWf
      as you can see, a lot of the conditional code has been removed.

      then call it from a page template, for instance: http://wordpress.pastebin.com/P6vPLb2g

      esssential css styles, to be added to style.css of the Twenty Ten based theme: http://wordpress.pastebin.com/sEP6SV3F

      you may need to edit the post output area to force excerpts, for instance, or to integrate thumbnails.

      hope you are familiar with page templates, and how to use them.
      good luck

      • Zeaks replies:

        Thanks for this, it’s just what I was searching for. I have a question though, I’m unable to figure out how to change the format in which the posts are displayed. they show up (I have it set to 2 column)

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

        I need it to display them in this format.
        Post #1 | Post #2
        Post #3 | Post #4
        Post #5 | Post #6
        Is this possible to do with this code?

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=""> <strike> <strong>