Posts in Two Or Three Columns – Twenty Twelve

If your index and archive pages are getting too long, or if you want to compact the information within those pages a little bit, for instance because the featured images above each post are just too large, consider to change the template to show the posts in two columns.

This is easier done than said, with some useful css classes injected into the output of the ‘post_class()’ in the div of each post, together with some rather simple css.

For instance, to change the category archive into two columns, without editing category.php itself, add a filter function into functions.php (as always with the default themes of WordPress, this  is done within a child theme):

add_filter('post_class','category_two_column_classes');

function category_two_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
endif;
return $classes;
}

The minimum css for this is:

.two-column-post { width: 47%; float: left; margin-left: 5.9%; }
.two-column-post-left { clear: left; margin-left: 0; }

If you want to apply the same principle for instance to the posts page or other archives, replace

is_category()

with another conditional tag like

is_home()

.
The code is easily adapted to three columns (or actually any number of columns) by changing the number in the modulus operator:

add_filter('post_class','category_three_column_classes');

function category_three_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'three-column-post';
if( $wp_query->current_post%3 == 0 ) $classes[] = 'column-post-left';
endif;
return $classes;
}

the css for three columns would be:

.three-column-post { width: 30%; float: left; margin-left: 4.9%; }
.column-post-left { clear: left; margin-left: 0; }

36 Replies to “Posts in Two Or Three Columns – Twenty Twelve”

  1. Hi Michael: I’ve been revisiting this code for a site that I’m developing. When I use the three column version on a custom page template it doesn’t seem to recognize the “.column-post-left” styles. I’m working locally so can’t show you the link. Thanks!

  2. Hi ,

    For anyone who needs to make this code responsive here it goes :

    @media screen and (max-width: 600px){
    .column-post-left {
    width:99%;
    margin: 0 2% 5px 0;
    padding: 0;
    float: none;
    }
    }

    @media screen and (max-width: 600px){
    .three-column-post{

    width: 30%;
    float: none;
    margin-left: 0.1%;
    }
    }

    Nuno @ http://www.nuno-sarmento.com

    1. as the CSS is already using % percentage width values, it should be responsive.
      you might need to add some @media queries to break it into one column on very small screens.

  3. Hello – while all these soutions are probably great, they do people like me no good what so ever! I have a wp site but I do not understand code. So when I go to these forums for help no one can help me because the info provided is for those who understand code. How about including those of us who are struggling to have a decent site? Is this a coders only club? If you guys would break down where to find the code in one’s editor and exactly how to change it, in laymen’s terms, perhaps with a screenshot, then we could utilize the forum’s help. I am trying to add 2- column post feed for my news site. You would think I was trying to go to the moon! Thee is no way I can understand the codes and where topp ut them. I guess I will not keep trying the wordpress forums anymore because you guys are in this “club” that one has to be a coder to get help. Your information-like in all wp forums, is to complicated. I sure wish somebody out there would be understanding and help us that do not understand code!

    1. were the featured images clickable before the change of the code?
      I can’t check for any solution without a live link to your site.

  4. I used the 2 column function and it works great!!! Thank you for this, you helped me a lot!

    One question though… how do I make the articles go under each other and not align at the end of the longest article?
    Like.. for example how bootstrap themes are done.

    Thank you very much in advance!

      1. I check that article but It doesn’t work with the latest version of Twenty Twelve, or I am doing something wrong 🙁

      2. the code will need to get tweaked to work in Twenty Twelve, i.e. adapted to the different way the loop and the content template are called; unfortunately, direct support here on my site is beyond what I can provide.
        Consider to ask at the WordPress support forum.

  5. i organized my posts into two columns. do you have any info on how to make one of these columns show “recent posts” and the other column show “favorites” or “recommended” posts, so that the site owner could choose posts she loves to keep on the homepage?? i would really really appreciate it. the theme i use is a twentytwelve child.

    internalcompass.us/castle

  6. Hi Alchymith,

    I’ve integrated your grid view on a page-of-post template with the conditional tag
    if( is_page( '44' ) )

    I would like to exclude the page-content from the css .three-column-post class
    and just address the class to the posts of the page;

    alternatively I could work on template output but it looks more complicated,

  7. Thank you for this tutorial, it was very easy to implement.
    I am having a minor issue. I have the Infinite Loop feature by Jetpack turned on. That causes the posts to display in groups of 7 and that creates gaps. Here is the link to the site – http://www.metropolitanfashionhub.com/fashion-channel/
    If I turn off Infinite Loop, then the posts all appear in normal order. However I want to keep the Infinite Loop on.
    Any suggestions ?

    1. possibly use some styles like:

      .three-column-post{ border: 1px solid #f4f4f4; padding: 1%; width: 28%; margin: 0 1.5% 3%; }
      .column-post-left { margin-left: 0; }

      if you have further questions, consider to join the WordPress support forum

  8. I’m getting this error on my web
    “Fatal error: Cannot redeclare twentytwelve_setup() (previously declared in /home/a7593697/public_html/wp-content/themes/aaycc/functions.php:52) in /home/a7593697/public_html/wp-content/themes/twentytwelve/functions.php on line 77”

    I’m using a chilled theme of twenty twelve and created a functions.php with the code provided here and added the css code to the chilled style.css.
    I really need to display posts as a grid.
    Hopefull somebody point me to the right direction.

      1. not really… I posted it here because i can’t get your “Posts in Two Or Three Columns” to work o my site… any ideas?

  9. Dear alchymyth

    Thank you very much for the interesting script. This is what I was looking for.

    Cheers

  10. This is awesome, just what I was looking for!
    Just one questin in addition: I now have the caption, I have a thumbnail, but the entire text of the post. How can I get the column to just show like 2 or 3 lines of text underneath the thumbnail image and then stop?
    See http://www.subchurch.de

    1. Hi Dave,
      you could try to use the ‘more tag’ to set where the post content will stop;
      as you are showing images within the post’s content, unfortunately, you cannot change the code to use ‘the_excerpt()’.

      1. Great, simple idea with the more tag, thank you!!
        the_excerpt would be really cool, but the more tag will do the trick.
        Appreciate the help!

  11. Hi. Excellent code.

    I have two questions:

    1) How can I expand the total area of posts and sidebar? I think twenty twelve have a lot of unused space in margins.

    2) How can I position posts immediately after posts, not using the “vertical margin”.

    Thank you.

    1. please send me an email with more details so I can give you an estimate of how much it will cost to help you with the problem.
      Thanks, Michael

  12. And now I wonder if there’s a way to have posts displayed as a running list (eg. if one is just indexing/archiving the post titles)? That is, how could you display posts as follows:

    title post 1, title post 2, title post 3, title post 4, title post 5,
    title post 6, title post 7….

    1. although the question is a bit off topic:
      here is one posiblility way:
      <?php $comma = ''; while( have_posts() ) : the_post();
      echo $comma . '<a href="' . get_permalink( $post->ID ) . '">' . get_the_title( $post->ID ) . '</a>';
      $comma = ', '; endwhile; ?>

      a bit more complicated if you want to have 5 posts per line:
      <?php $comma = ''; while( have_posts() ) : the_post();
      echo $comma . ( $wp_query->current_post%5 == 0 ? '<br />' : '') . '<a href="' . get_permalink( $post->ID ) . '">' . get_the_title( $post->ID ) . '</a>';
      $comma = ', '; endwhile; ?>

  13. Excellent code.
    Can you please include in the comments the code to make three columns? I know a few of us would really appreciate it.

Leave a Reply to Lucian Cancel reply

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