How to Display Your Post/Page Content in Two Columns

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.

Comments

  1. says

    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

    • Steve says

      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.

  2. David says

    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

    • Steve says

      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.

    • Steve says

      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.

  3. says

    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?

  4. Bryan says

    I am using the Thesis theme and I copy/pasted the code into the custom_functions php but it doesnt seem to work. Any things I should change in the code for use within the Thesis theme?

    Cheers,

  5. wyndham wales says

    Worked great in Thesis 1.8.5, but I’d like to have less space between the lines. Can you please show how to do that? TIA for your help.

    • Steve says

      Do you mean less space between the COLUMNS or actually between the lines of text? Space between lines of text is controlled by CSS in the Thesis stylesheet. In your custom.css file, you’d add something like:
      .format_text p { line-height: 1.25em; }
      and adjust the ‘1.25’ figure according to taste.

    • Keith says

      Hello. I can’t get this to work in Thesis. I put the code in custom_functions.php but no changes in the column.

      Thanks,
      Keith

      • Steve says

        Did you use the column shortcodes in the post body?

        This site is running on Thesis, and as you can see from the main post, the code works just fine.

        Make sure you aren’t misspelling the shortcode names in your post. That’s the most common error I see when troubleshooting malfunctioning shortcodes.

Leave a Reply