How to Display Your Post/Page Content in Two Columns

by Steve on March 3, 2011

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.

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.

The columns usually NEVER break where you want. Using shortcodes to define the column content allows us to control what goes where.

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.

{ 10 comments… read them below or add one }

Len April 8, 2011 at 2:46 pm

I don’t understand this. The DIV attributes are assigned to variable $styles, but where are those used? I don’t see them reference anywhere?

Thanks, Len

Reply

Steve April 8, 2011 at 3:29 pm

Good catch, Len. The post editor removed some things. Wish WordPress had a good post editor.

Regardless – I’ve fixed the code block in the post, made a couple of changes.

Reply

Jim April 25, 2011 at 8:38 am

Thanks for this, I am going to change some stuff around and see how it works out.

Reply

ardyonline May 12, 2011 at 4:57 am

I love your tricks! it really helps! thanks so much!!!

Reply

David June 27, 2011 at 2:05 pm

Hi,
This is a neat trick & I’d love to use it but I might have hit a bit of a snag – is it possible to use other shortcodes within these shortcode blocks?
I’ve got a [recent-posts] shortcode to list the latest 5 posts – when I put it within a [leftcol] [/leftcol] (or rightcol!) block it doesn’t display the list of posts, just outputs [recent-posts] on the page.
If I use the [recent-posts] shortcode outside the [leftcol][rightcol] blocks it is displaying the list of posts so I think that shortcode is working ok.

Any ideas?
Cheers,
David

Reply

Steve June 28, 2011 at 7:07 am

Hi David,
It is possible, but you have to add an extra line. In the column where you want the recent posts to appear. Add this line:

do_shortcode();

just after the wp_autop() call, before the line that builds the output.

Reply

David July 4, 2011 at 2:09 am

Thanks, I’ll give that a go.

Nae August 12, 2011 at 12:46 pm

Assuming WordPress novices are reading your site, where should we put this code?

Reply

Steve August 12, 2011 at 1:16 pm

Nae, the code goes in your current theme’s functions.php file, before the final ?> tag. If you’re familiar with editing theme files, it’s pretty easy.

Reply

Tony Payne September 8, 2011 at 3:24 am

Very cool and very simple. There are definitely times when a post looks better arranged into two columns, and this is so easy to achieve using your tutorial.

I assume that if you don’t add the Left/Right Column tags to the post text that it will just spread across the page in a single column as normal?

Reply

Cancel reply

Reply to Nae:

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>