4 Ways to Display WordPress Post Content in Multiple Columns


Most blogs display their content in single columns, but it’s also possible to display content in multiple columns. Multiple-column layouts are perfect for newspaper and magazine-style themes. Here are six ways of getting the job done.

1. Using CSS3 and progressive enhancement

I think the easiest way to display your content in multiple columns is to apply a little CSS3 in progressively enhancing fashion. Let’s say you have the following markup:

We can add the following CSS to display the content in multiple columns:

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 Exploser or older browsers? They will see your content displayed in a single column, just like they would have before you applied the multiple columns. Note that you can specify any number of coulmns and any width for the gap.

2. Multiple columns by filtering the_content

If you need something a little more “universal” than what is currently available with CSS3, we can always dig into our template files, modify things at the PHP/XHTML level, and then style accordingly. Here is the technique provided by Kriesi.at:

Just place that into your active theme’s functions.php file and then apply the following CSS:

Once implemented, this multi-column technique creates a a column for each instance of <h2> found within the post content. Thus, be sure to limit the number of <h2> elements to two in order to avoid layout breakage. Note that you could also modify the code to use a different element if the <h2> tag isn’t good for you. Multiple columns doesn’t get much easier, but just in case you need an alternate method for whatever reason, read on for some more great techniques.

3. More flexible multiple columns

The previous method works nice for two columns and no fuss, but for three or more columns we’re going to need something a little more robust. fortunately, Rob Searles shares a technique that allows any number of columns with completely different content in each. This technique creates columns based on multiple instances of the <!–more–> tag. There are several caveats, so check the orginal article for all the details.

Here are the steps involved in implementing this technique:

  1. Add the my_multi_col_v2 function to your functions.php file
  2. Add another snippet to your theme template file, for example page.php
  3. Add some CSS to format the markup into columns
  4. Add a couple of <!–more–> tags in your post or page to create the three columns

1. Let’s go through these steps, beginning with the main function that you should place into your theme’s functions.php file:

2. Once that’s in place, replace your the_content() tag with the following code:

3. The last bit of code that we need to setup is the CSS to make it all sweet:

4. And last but not least, remember to add the two <!–more–> tags in your post/page content to create the three columns.

That’s all there is to it. Pretty good stuff, but even so, there are even more alternatives available. next we’ll look at a technique for displaying multiple loops in multiple columns.

4. Bonus: Display your category list in two columns

Using a little PHP magic, we can get WordPress’ wp_list_categories() to display our categories in two columns. As Blog Oh Blog (404 link removed 2013/07/10) explains, all you need is the following code placed in your theme file:

Just use that code where you would like the categories to appear and enjoy the results.

Hopefully these techniques will inspire and enable you to break out of the “single-column” mindset and explore some multi-column possibilities. Using multiple columns for your content is a great way to enhance the visual appeal of your design and readability of your content.

Ashwani Bhatia

Ashwani Bhatia

Highly creative, innovative and multitalented web designer and developer with 9+ years experience in front end development technologies including advanced PHP,HTML5,CSS3, JavaScript, AJAX and Internet Marketing.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

eight − 2 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">