Display wordpress posts in columns

April 15, 2009 · Print This Article

For those of you who want a simple but limited approach (not using a plug-in), here’s the code for your theme for multiple columns within a page. It is set up to use 3 columns but is easy to modify to N columns.

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 */
}

Note: if there is content that appears before column 1, the array index for the first column should be zero. Otherwise the array index for the first column should be one. This seems to be the way explode() indexes things.


Your choice for site templates and wordpress themes

Comments

Got something to say?

You must be logged in to post a comment.