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):

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

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!

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!

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.

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.

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 ?

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.

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.

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

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