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!

17 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.

Lyndi

Apr 14 2009 17:49

This is very interesting and it really opens up a whole lot of possibilities. Love the idea, will be trying it out soon. Thanks.

Jacob

Apr 15 2009 01:42

Very clever this one!

John (Human3rror)

Apr 15 2009 04:39

really cool.

Burak Erdem

Apr 16 2009 08:34

…or you can just use a simple jQuery plugin to separate your content into columns.

http://plugins.jquery.com/project/Columnizer

Daniel

Apr 16 2009 09:20

Great tip
But with a demo would be easier to see and understand. Can you provide a demo link?

Anyhow, congratulations.

Hypotheekrente

Apr 21 2009 16:02

Thanks alot! Was checking this website for lovely recipes and found this good one! Way to go!

Thomas

Apr 26 2009 16:49

Or you can use css. Write float:left; or right and thand you can have two colums. And I don’t have to any code.

Olaf Ghanizadeh

May 05 2009 12:52

Wow, way to make it complicated. you could just use a gridsystem, that’s the easiest.

Gerrit Fries

Jun 06 2009 13:21

@Burak Erdem: thanks for the nice tip with jQuery plugin
http://plugins.jquery.com/project/Columnizer

Leonard Casci

Aug 18 2009 04:53

GREAT! thanks.

Jual Lukisan

Aug 23 2009 08:55

maybe u need make your wp version, i love the way you teach all of us.

Woud

Feb 03 2010 03:29

Awesome! But when I’m using this code all my tags are gone!
How can this be fixed?

Woud

Feb 03 2010 03:30

I ment: formatting tags like paragraphs

Donna

Aug 08 2010 01:05

I have used your concept with great success, I have tweeked it and made it easier by replacing
$page_columns = explode(“[--column--]“, $post->post_content);
with
$page_columns = explode(““, $post->post_content);
so the user simply hits the ‘more’ button before each column to be displayed.

Thank you for your great tweeks.

Trackbacks:

Links for 14th April 2009 | Velcro City Tourist Board

WpRecipes.com - Daily recipes to cook with WordPress