When I was developing my new site, I wanted to show WordPress posts in two columns. If you look at my Web Design portfolio page, you’ll see the effect I achieved.
Update: John asked why I didn’t use a simple float:left, float:right solution – the answer being I wanted to develop the code so that it would accommodate posts of different lengths but with rows of equal heights – in other words that each pair of headings would line up. This would be important when returning the usual type of blog post content or excerpt. The question did however make me realise that I had not highlighted in the post the benefit of having a containing div for each set of columns :)
In order to do this, I found a great post on coding a two column WordPress loop which got me started – unfortunately I found that the container div for the columns wasn’t closed if there were an odd number of posts on the page, and so I had to dig a little deeper.
I found another post about styling the last post on a page which got me most of the rest of the way.
I use this technique to query pages, not posts, but here I present the code as it would be used on your main blog page querying posts.
Please note that I have excluded sticky posts from this example – because I was querying pages, and I don’t use stickies anyway, I didn’t need to figure out how to accommodate sticky posts.
I’ve done my best to comment the code so it makes some kind of sense, and I hope this proves useful to someone looking for a two column wordpress solution.
<?php
$postsPerPage=intval(get_option('posts_per_page')); // how many posts per page
query_posts('caller_get_posts=1&amp;amp;amp;amp;amp;amp;posts_per_page='.$postsPerPage.'&amp;amp;amp;amp;amp;amp;paged='.$paged);
// caller_get_posts stops sticky posts being stuck to the top &amp;amp;amp;amp;amp;amp; returns them to natural placement
$col = 1; // set up column switch
$postCount=1; // set up the post counter
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // page we're on
$pages = intval(ceil($wp_query->found_posts / $postsPerPage)); // how many pages are returned by the query
$maxPosts = $pages * $postsPerPage; // maximum possible posts from the query
$numberPosts = $wp_query->found_posts; // actual number of posts returned
$shortOfaPage = $maxPosts - $numberPosts; // how many posts short of a page will the last page be
$numberPostsLastPage = $postsPerPage - $shortOfaPage ; // how many posts on the last page
if (have_posts()) : while (have_posts()) : the_post(); // start the wordpress loop
if ($col == 1) echo "<div class=\"row\">"; // if this is the first post, create the div to contain columns
?>
<!-- simplified post - add your own here -->
<div class="column<?php echo $col;?>" id="post-<?php the_ID(); ?>">
<h2 <?php post_Class(); ?>><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</div>
<!-- here is where we close the row in the appropriate places -->
<?php if ($col == 2) {
echo "</div><!-- end row -->"; // this closes the row div if this is a post in the second column
} elseif ($postCount == $postsPerPage){
// this will add the closing div if there are an
// odd number of posts per page and this is the last
// post on a page
if ($col == 1) echo "</div><!-- end row -->";
} elseif ($paged == $pages &amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp; $postCount == $numberPostsLastPage) {
// this will check if we're on the last page, and if it's
// the last item on the page
if ($col == 1) echo "</div><!-- end row -->";
}
$postCount++; // increase the post count by one
(($col==1) ? $col=2 : $col=1); // switch the col number
?>
<?php endwhile; endif; ?>