Display WordPress Post Content in Multiple Columns

Most blogs display their post content in single columns, like what we do here at Digging Into WordPress. But you know it’s also possible to display post content in multiple columns. Multiple-column layouts are perfect for newspaper and magazine-style themes. This article presents six ways of getting the job done using a variety of techniques, tricks, and tips.

1. Using CSS3 and progressive enhancement

<div class="content">
	<p>Lorem ipsum..</p>
	<p>Lorem ipsum..</p>
	<p>Lorem ipsum..</p>
</div> We can add the following CSS to display the content in multiple columns:

.content {
	  -moz-column-count: 3;
	  -moz-column-gap: 10px;
	  -moz-column-rule: none;
	  -webkit-column-count: 3;
	  -webkit-column-gap: 10px;
	  -webkit-column-rule: none;
	column-count: 3;
	column-gap: 10px;
	column-rule: none;
	}

This will display your content in three columns with a 10px gap* between each. This technique is a great way to enhance the display of your content for people running cool modern browsers like Safari and Firefox. What about folks visiting with Internet Exploder or older browsers? They will see your content displayed in a single column, just like they would have before you applied the multiple columns. Progressive enhancement FTW.

2. Multiple loops displayed in multiple columns

Not too long ago, I wrote a post at Perishable Press explaining how to display multiple loops with multiple columns. The final product will look display something like this:

• First column, first loop: display posts #1-5
• Second column, second loop: display posts #6-10
• Third column, third loop: display posts #11-15

Using WordPress and a little CSS, this configuration is relatively easy to accomplish. Let’s cut right to the chase..

Step 1: Setup the multiple loops

The first thing we want to do is replace the standard WordPress loop with the following code:

// FIRST LOOP: display posts 1 thru 5
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=0'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count1 = 0; if ($count1 == "5") { break; } else { ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php $count1++; } ?>
<?php endforeach; ?>


// SECOND LOOP: display posts 6 thru 10
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=5'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count2 = 0; if ($count2 == "5") { break; } else { ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php $count2++; } ?>
<?php endforeach; ?>


// THIRD LOOP: display posts 11 thru 15
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=10'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count3 = 0; if ($count3 == "5") { break; } else { ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php $count3++; } ?>
<?php endforeach; ?>

That’s the juice right there. We have three loops, each displaying five posts. The first loop displays the first five posts, the second loop displays the next five posts, and the third loop displays the next five posts. Thus, this multiple-loop configuration displays the most recent 15 posts, each of which being unique. See the original post for more information, options and details.

Step 2: Markup your theme template file(s)

Now that we have the PHP in place, we are ready to add the (X)HTML markup required for the final three-column configuration. There are many ways to accomplish this, this is merely one of them:

<div id="column_01">

	<!-- FIRST LOOP -->

</div>

<div id="column_wrap">

	<div id="column_02">

		<!-- SECOND LOOP -->

	</div>
	<div id="column_03">

		<!-- THIRD LOOP -->
	
	</div>

</div>

Step 3: Styling the columns with CSS

The final step in the tutorial is to style the markup with CSS. Nothing too fancy, really. Creating the columns is merely a matter of floating the individual divs and applying a width to each of them:

/* three column layout */
div#column_01 {
	float: left;
	clear: none;
	width: 30%;
	}
div#column_wrap {
	float: right;
	clear: none;
	width: 60%;
	}
	div#column_02 {
		float: left;
		clear: none;
		width: 45%;
		}
	div#column_03 {
		float: right;
		clear: none;
		width: 45%;
		}

The trick here is to use width values that will create the correct column widths. The values used in the example produce three columns of approximately equal width. Again, for more information on the details of this technique, see the original post.

Once you get everything setup, your posts should display your multiple-loop content in multiple columns, with each column showing the contents of a different loop. This is a great way to customize your theme, making it possible to present lots of disparate information within an easy-to-understand layout. Even so, this technique may not do it for you either. If so, we’ve got a couple more WordPress tricks up our sleeve!