Just another WordPress weblog

Ok, so life has intruded and I haven’t updated things here as often as I’d hoped.

So here’s a little treat: how to display your content in two columns.

Why should you display content in two columns? Narrower text columns can increase readability, especially if you have a wide ( 600px or more ) content column. There is a lot of discussion out there on the advantages of narrow text columns, give Google a shot if you’re interested.

We could create a plugin for this, but for ease of demonstration, we’ll just put it in the theme’s functions.php file. Note: with some themes like Thesis or Genesis, you may need to add this to a ‘custom’ functions file. Consult your documentation.

We will define two shortcode pairs, [leftcol] and [rightcol]. You’ll start the left column content with the [leftcol] shortcode tag, and end it with the [/leftcol] closing tag. Repeat for the right column. Shortcode tags MUST begin on a new line in your editor, or WordPress won’t recognize them as shortcodes. If you see one of the shortcode tags in your displayed post, that’s probably why.

Here is what the two columns above look like in the post editor:

[leftcol]How to do it? We're going to use the WordPress shortcode handler, and a little bit of CSS, instead of modifying a theme template. This way, if you WANT two columns, you can have them, if not, don't. Also, it's still a little problematic to split a body of text automagically using scripting.[/leftcol]
[rightcol] The columns usually NEVER break where you want. Using shortcodes to define the column content allows us to control what goes where.[/rightcol]

Here is the code:

/**********************
*
* shortcode handler for columnization of project posts
* ex: [leftcol]content here...[/leftcol]
*/
function shortcode_columnize_left( $atts, $content = null ) {
 $content = wptexturize( $content );
 $content = wpautop( $content );
 $content = '<div style="width: 45%; margin-right: 5%; float: left; text-align: justify; ">' . $content . '</div>';
 return $content;
}

/* columnize right inserts 'clear' div after content */
function shortcode_columnize_right( $atts, $content = null ) {
 $content = wptexturize( $content );
 $content = wpautop( $content );
 $content = '<div style="width: 45%; float: left; text-align: justify;">' . $content . '</div><div style="clear: both;"></div>';
 return $content;
}
add_shortcode( 'leftcol', 'shortcode_columnize_left' );
add_shortcode( 'rightcol', 'shortcode_columnize_right' );

We define functions to take the content that is between the shortcode tag pairs, run it through the same filters that WordPress uses for post content, wptexturize() and wpautop(), then spit it out within a div with a width of 45%, right margin of 5%, floated to the left, and the same with the right column but without the right margin. We add a div after the right content with a style of “clear: both” so that the rest of the page content clears the floated divs.

Then we tell WordPress to use our functions when it encounters the [leftcol] and [rightcol] shortcode tags within our post.

Voila, finit. That’s all there is to it.

{ 12 comments }