Printed magazines often display text in columns, so why blogs shouldn’t be able to do the same? Juste read on to find out how to easily and automatically display your post content in columns.
This code is poweful but definitely easy to implement. Just paste it on your functions.php file and it will automatically output your post content in columns.
Your post content will be splitted on <h2> tags.
function my_multi_col($content){
$columns = explode('<h2>', $content);
$i = 0;
foreach ($columns as $column){
if (($i % 2) == 0){
$return .= '<div class="content_left">' . "\n";
if ($i > 1){
$return .= "<h2>";
} else{
$return .= '<div class="content_right">' . "\n <h2>";
}
$return .= $column;
$return .= '</p></div>';
$i++;
}
if(isset($columns[1])){
$content = wpautop($return);
}else{
$content = wpautop($content);
}
echo $content;
}
}
add_filter('the_content', 'my_multi_col');
Don't forget to add the following styles to your style.css file :
.content_right, .content_left{
float:left;
width:45%;
}
.content_left{
padding-right:5%;
}
Thanks to www.kriesi.at for contributing this great function to the community!
If you enjoyed this article, please consider sharing it!
Leave a Comment
Copyright © 2008 - 2010 WordPress Development by Jean-Baptiste Jung. Graphic art by GreenBubbles.org.ua, all right reserved.
15 Responses
This code breaks my theme and all I get is a blank page.
Is there a way to do this for a portion of a post? I guess what I would really like to do is detect an element, if it exists, break it up into two even columns inside the post… That might be a little outside of the scope of this recipe though…
Cheers,
J
This is amazing, I’ve always wanted to know how to do this. PS, Jean-Baptiste…spelling mistake in “powerful.”
@David it might be a problem with your functions file/theme. If you’re using a child theme, it might have “the_content” filtered out or removed and replaced with something else. Just a thought.
David
The code is missing a closing curly brace “}” at the very end of the function. That is why it is breaking. Insert that and it will work
Hi!
You can do exactly the same with CSS3. You just put the text into a div and then apply this;
-moz-column-count: 2;
-moz-column-gap: 8px;
-moz-column-rule: none;
-webkit-column-count: 2;
-webkit-column-gap: 8px;
-webkit-column-rule: none;
You can change the number in column-count to add more columns
Well this could be really useful, I never thought about this idea… Great work as always!
It’s just what i need for my website.
Thanks for this recipe!
A good option – but as an idea … Code is not quite correct and simplified. A better option – is on http://www.robsearles.com/2009/07/05/wordpress-multiple-content-columns/ They are grateful to you for the idea. Who needs – see the code on three columns.
That’s a nice solution till the CSS3 way is supported by more browsers.
Is there a way to split text on one column and images, videos, etc. on the second column?
I tried it just now at my blog with studio press theme and it results 500 internal server error on my blog. Luckily, I did not apply it on my prime blog. But, after I remove the script, I get my blog back. I will try it again later with more watchful.
Trackbacks: