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.