How to: Display posts in columns

How to: Display posts in columns

Today, here one of the top most wanted WordPress hacks: Displaying post content in columns. In this recipe, you’ll learn how to easily do it without any plugin.

To split your post content in columns, the first thing to do is to format your posts that way:

potential content goes here that appears before the columns.
[--column--]
Content for column 1 here.
[--column--]
Content for column 2 here.
[--column--]
Content for column 3 here.

Once done, open your single.php file and the following code within the loop:

<?php
$page_columns = explode("[--column--]", $post->post_content);
print $page_columns[0];
print '<div class="column first">';
print $page_columns[1];
print '</div>';
print'<div class="column second">';
print $page_columns[2];
print '</div>';
print '<div class="column third">';
print $page_columns[3];
print '</div>';
?>

The last part is css styling. Open your style.css file and paste the styles below in it:

.column{
  width:33%;
  float:left;
  margin-right:10px;
}

column.first, column.second, column.third, {
  /* Customize to fit your needs */
}

That's all, you can finally display your posts in three columns!

Thanks to krimsly for this awesome recipe!

16 Responses

Ed

Apr 14 2009 11:36

This was exactly what i was going to look for today, you’ve just saved my day Jean!

Thanks!

Christina

Apr 14 2009 14:54

Good tips. I’m looking for a way to automate this even more though, i.e. detect the length and divide the content into multiple columns, for instance.