67 | Posts in Two Or Three Columns – Twenty Twelve

g+

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; }
This entry was posted in Tips & Tricks, Twenty Twelve, WordPress and tagged , , , , , , , . Bookmark the permalink.

32 Responses to Posts in Two Or Three Columns – Twenty Twelve

  1. Steven Denger comments:

    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!

  2. Brad Dalton comments:

    Great solution but the featured images aren’t clickable.

    Is there an easy solution for this?

    • michael replies:

      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.

  3. Lucian comments:

    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!

  4. kelly ann beavers comments:

    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

  5. Frank maio comments:

    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,

  6. Raven comments:

    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 ?

  7. Ayse comments:

    Hi, thanks for code. But I need some differences and your suggestions. this is my website http://www.modaciperi.com and this is the website what I want to design like this http://www.modahat.com . I would like to have a table border for these posts. I used your code how can I add table border to this code? Thanks.

    • Michael replies:

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

    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.

  9. Mehrshad comments:

    Dear alchymyth

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

    Cheers

  10. Dave comments:

    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

    • alchymyth replies:

      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()’.

      • Dave replies:

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

    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.

    • Michael replies:

      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. David G. comments:

    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….

    • alchymyth replies:

      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. David G. comments:

    Thank you so much.

  14. David G. comments:

    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

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>