Two column magazine style posts in Wordpress
Apr19th
2008
••
EDIT: There is now a working example of this.
There are a lot of “magazine” styled themes for Wordpress out there. Some are truly beautiful in their layout execution. Currently I am developing a site that has this sort of 1-2-4-3 grid layout. The front page is mostly static with a few queries running pulling in content and this is easy enough. The issue came own to the interior post pages. Being this is a layout where the main content is divided into two columns I needed a way to dynamically do this so I would not have to edit the filters file to turn off styling and then hardcode all the HTML tags into the post.
First issue was to count the number of paragraphs in the output. Since Wordpress doesn’t actually store <p> tags in the database there was no sly way to query like you can posts or categories. The effect had to be done upon the rendered output. So the first thing I needed to do was count the number of paragraphs in any given post.
$content = apply_filters('the_content', $post->post_content);
$beth = explode('<p>', $content);
$i = 0;
foreach ($beth as $erica){
$i++;
$q = $i - 1;
if ($i == 0) {
echo $q.$erica;
}
}$z = round($q/2);
echo "<br /><b>".$q."</b>";
echo "<br /><b>".$z."</b>";
Don’t mind the variable names (shout out to the 155!). The last two lines echoing are just so I could see the numbers and to make sure I was doing the math correctly. These are commented out in the final code.
What I’m doing is counting the total number of paragraphs ($i) and then taking half it rounded up to get a whole number ($z = round($q/2);). Doing this makes the math on the output script make sense. Originally being able to see it during testing just helps me dubug the code.
Now that we have that let’s put it to work for us.
$i = 0;
echo "<div id='left'>";
foreach ($beth as $erica){
$i++;
$q = $i - 1;
if ($i != 1) {
//echo "<p>".$q.$erica;
echo "<p>".$erica;
}
if ($i == $z 1 ){
echo "</div><div id='right'>";
}
}
echo "</div>"
?>
</div>
For this layout my pages have two divs. One id#left floated left and one id#right floated right. So first thing we do is start $i back at 0. Now even if I have one paragraph I want it floated left so I echo echo "<div id='left'>"; opening this div. Now we say foreach ($beth as $erica){ telling the function to repeat this for every <p> in the post.
$i++;
$q = $i - 1;
if ($i != 1) {
echo "<p>".$erica;
}
Now my math was bad on this as the count would always strart on 1 resulting in an empty <p>. So here’s what I did. Start counting and adding 1 to the count ($i++;). So since $i was always empty I made $q and told it to be $i - 1 so basically back to 1 again. I know I know. So now we echo out the paragraphs. This will result in a one column output. Next is where the magic happens.
if ($i == $z+1 ){
echo "</div><div id='right'>";
}
So if $i is equal to half the count rounded plus 1 then insert a closing tag for the left div and open the right div. Magic really. Smoke and mirrors, probaly. Now all we have to do is close it all out.
echo "</div>" ?> </div>
So the only down side is this. If there is only one paragraph in the post it will result in an empty div tag floating to the right. I don’t forsee this as an issue since I am going to be making larger posts than that. So for better or for worse here is the final code.
<div class="entry">
<?php
$content = apply_filters('the_content', $post->post_content);
$beth = explode('<p>', $content);
$i = 0;
foreach ($beth as $erica){
$i++;
$q = $i - 1;
if ($i == 0) {
echo $q.$erica;
}
}
$z = round($q/2);
//echo "<br /><b>".$q."</b>";
//echo "<br /><b>".$z."</b>";
$i = 0;
echo "<div id='left'>";
foreach ($beth as $erica){
$i++;
$q = $i - 1;
if ($i != 1) {
//echo "<p>".$q.$erica;
echo "<p>".$erica;
}
if ($i == $z+1 ){
echo "</div><div id='right'>";
}
}
echo "</div>"
?>
</div>
Just in case this doesn’t parse correctly for copying, you can download the .txt file here.
* I am currently working on a live demo. I will update this as it becomes available.
Tags: Wordpress
Posted in: Wordpress
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
*hint: If you liked this post you can always show some link love.
2008
••
do you have a live demo yet? i’m trying to achieve this same thing, to make my posts look like newspaper articles, that split the_content into two columns dynamically. i think this is what i’m looking for, but would love to see a demo. good stuff. glad i found it…i’ll try it out now…
2008
••
ok. got it working no prob. i’m a cut and paste master, but can’t write code myself. how would you recommend modifying this to get a 3-column post? thanks agian.
Chris.
2008
••
Hi Chris,
There is now a demo page running. I’m glad you got it working for you. Making a three column shouldn’t be to difficult. It’s all math. I’ll see if sometime soon here I can get an example working.
-Alan
2008
••
Thanks for the code, although I think you’ve put one too many ’s in at the end
2008
••
Actually I apologise, you didn’t, it’s 2:20am here and I’m a bit sleepy =)
(the above post was meant to say div tags)
2008
••
Hi. I like the Idea and desperately trying to put it in my new website. Pasted the code into single.php, however the results remained the same. What am I doing wrong?
2008
••
Sorry for the earlier post. Had goofed up somewhere. Thanks a lot for this. Will credit and link back to your page.
2009
••
This makes a lot more sense now that you have the live demo. cool stuff
2009
••
Anything you put before the tags in your post will not render, using this technique. Interesting example, but doesn’t seem practical.
2009
••
Nice script but how can I use this to include a large image on top. For example, if I want to place an image that is 100px wide. Then underneath have two columns of text that are each 50px wide. (just an example). I tried that and as I suspected it simply added the image into the left column.
Is it possible to have an item before the columns even start? Like images, YouTube embedded video, things like that.
Any advice would be appreciated.
Thanks again for the code.
2009
••
Hi, great code … but I am trying to debug it for wordpress 2.8; works perfectly in 2.7; but something changed (of course) in wordpress 2.8 … it doesn’t pick up the paragraphs so it must be in explode() function or eventually the content? I am not really sure … if you have any idea that would be great. Thanks.
2009
••
Nico,
I just installed WP2.8 locally and tested the code and it appears everything is fine. Can you post a link to what you are working on?
If I can see the rendered code, maybe I can figure out where it is choking up.
2009
••
you said it’s simple math before, but i wouldn’t know where to begin in trying to get a 3 column post. my div is 970px and i want to run articles 3 columns deep. this is great. thanks,
Chris.
2009
••
Hey Chris,
See if this works for you. Fairly straight forward as it’s based of the 2 column example.
-Alan
2009
••
Been looking for something like this for some time, added the code to the theme I’m working on and everything works perfectly except for one thing, H1, H2, H3 etc tags is not rendered in the final output. Columns is showing up but headline tags I have inside the posts are excluded. Is there any way to fix this? Thanks!
2009
••
Those loops are unnecessary! You can achieve the same thing with something like this:
$content = apply_filters( 'the_content', $post->post_content );
// Multi-column
if ( strlen( $content ) > 500 ) {
$halfentry = strpos( $content, '</p>', strlen( $content ) / 2 ) + 4;
echo '<div class="column">' . substr( $content, 0, $halfentry ) . '</div>',
'<div class="column">' . substr( $content, $halfentry ) . '</div>',
'<div class="clear"></div>';
}
// Single column
else echo $content;
2009
••
@Henrik,
I like the conditional you used. Being able to make it apply only if there is enough content to justify multiple columns is a nice touch.
Proving once again, there is more than one way to skin a cat.
cheers
2009
••
@Henrik,
hi, quickie about your way of splitting a post content, I’m experiencing weird FF behaviour, when I replace the_content with your code, presentation breaks only if I declare float: in css.
when there are no styles declared, both divs are beneath each other, obviously no columns then, when I do
.LF { float: left }
.RT { float: right }
both DIVs go like if outside of their parent DIV, no colors, no borders, I can see that parent div changes size and does not contain both columns any longer,
any thoughts?
cheers
2009
••
@lejeczek
Add this line to your css and it will be fine: .clear { clear: both; }
I also tested my code and saw that it is a better idea to replace the <p> instead of </p>
I ended up with making a shortcode [column] that breaks the_content into columns instead. That way I have more control of the end result.
2009
••
Hey,
I’m trying to add more then 1 column to my pages, as I have a few I need to have more then 1 column on, and having the page scroll down for an eternity takes forever to get through.
Is there any easy HTML that can get my WP Pages to have more then 1 column? Thanks!
2009
••
hi
i download this .txt files but still it shows only one colum and how it look like in admin when adding text on 2 colum page?
can you make some test page to show admin and all files what should change?
2009
••
First, kudos for developing this. Now that I’ve said that, I can whine about details ^_^
Two things. One: just where do I put this code? Under all the text in the post’s html?
Two: In word, you can make part of a page in columns and part not. I would like to be able to do this. Specifically, I wan to be able to write an intro that looks normal, a header to the next part in the page that is centered normally, and then have the list of options underneath said header in columns. Am I simply exceeding the bounds of reason here? Or would that happen if I just placed that code right and added one or two simple qualifiers? Time appreciated either way - don’t let the fact that I’m not satisfied dim that.
2009
••
Er - sorry, sweating to answer is unnecessary. There would seem to be a slew of well regarded plug-ins for the purpose. I apologize for not doing my own proper share of homework before bugging you.
2010
••
Thanks for this post. I was able to get my blog working with two columns; however, I cannot seem to get the trick to work when using two columns.
Any thoughts..if I could have two columns with the ability to divide my posts into seperate pages as well,…that would really be something.
2010
••
…I was trying to say I cannot get the Next Page tags to work…but it removed the tag I had in the post..sorry about that.
2010
••
@adam,
Since the hack relies on exploding “the_content”, I’m not sure how to go about paginating content with the ‘next page / previous page’ links. This was written almost two years ago and honestly, I haven’t looked at it since then. There might be a plug-in by now that might achieve what your desire by now though.