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
- ModThemessave 15% off your purchase […]
- Zidalgo Themessave 20% on your order […]
- WooThemessave 20% on your purchase […]
- Autobloggedsave $40 on multi-site licence […]
- Kreative Themessave 50% on your purchase […]
- Smarter Themesave $5 on your order […]
- Classipress Themesave 20% on your purchase […]
- ReviewAZONsave $15 on your order […]
- Headway Themeget 20% off your licence […]
- Gorilla Themesget 10%off any theme […]
On Twitter : @VPSneeded trois pour commencer, j'espère que ce sera suffisant car niveau prix c'est pas donné
Theme & content : Copyright © 2008 - 2010 Jean-Baptiste Jung. Graphic art by GreenBubbles.org.ua, all right reserved.
13 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.
Trackbacks: