Three column posts in Wordpress

Jun29th
2009
••

Here is a working example of this.

Following up on my two column post hack for Wordpress, here is a method to doing it for three columns. There isn’t really too much different except a few small shanges in the CSS and PHP. Biggest change is using PHPs ceil() instead of round().

Take a look at the whole code first:

<?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 = $q/3;
$i = 0;
echo "<div class='left l1'>\n";
foreach ($beth as $erica){
$i++;
$q = $i - 1;
if ($i != 1) {
// un-comment the next line
//echo "<p>".$erica;
//erase or comment out the next line
echo "<p>".$q.") ".$erica;
}
if ($i == ceil($z+1)){
echo "</div>\n\n<div class='left l2'>\n";
}
if ($i == ceil($z+$z+1) ){
echo "</div>\n\n<div class='left l3'>\n";
}
}
echo "</div>\n\n"
?>

Just in case can download the .txt file here.

This will divide the number of paragraphs by 3 and then columnize them accordingly. The odd paragraphs will start to fall in the first column, then the second then the third. So for example if you have five paragraphs they will order like so:

1 | 3 | 5
2 | 4 |

If you have 7 they will stack like so:

1 | 4 | 6
2 | 5 | 7
3 |

Just something to keep in mind when typing up your copy. Pay attention to the following in the code. I echoed out my $q variable so I could check where my paragraphs were stacking. You need to erase the “counting line” and uncomment the normal, non counting line.

if ($i != 1) {
// un-comment the next line
//echo "<p>".$erica;
//erase or comment out the next line
echo "<p>".$q.") ".$erica;
}

That’s all there is to it. Hope this helps.