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; }
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 ?
Actually was able to figure that out by modifying some of settings for the Infinite Scroll
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.
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
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.
have you tried asking at the WordPress support forum?
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?
if you would like me to work for you on the problem, please send an email to alchymyth@gmail.com with all the details, and I’ll let you know how much it will cost. thanks
Dear alchymyth
Thank you very much for the interesting script. This is what I was looking for.
Cheers
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()’.
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!
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.
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
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….
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; ?>
Thank you! here’s the site within which I used your three column code. http://winewisetestsite.com/producers/
It really is great; in the mobile edition I changed it so it shows one column.
Thank you so much.
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.
thank you – good idea – consider it done