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.

{ 12 comments }

Simple Link Cloaker Plugin Available for Download

Because some days are better than others, I managed to upload the wrong zip file of the link cloaker plugin. That error has been corrected. This is the correct download link for the Simple Link Cloaker plugin. It seems that if I had named the Simple Link Cloaker plugin The Fabulous Redirector instead, all would [...]

Read the full article →

The Case Of the Missing Post

A client came to me with a strange problem. He’d written and published a post, but when he tried to view it on his site he got a 404-Not Found error. Usually, when there is a problem with posts or pages disappearing the culprit is permalink-related. Most of the time, a simple click of the [...]

Read the full article →

You Do Not Have Sufficient Permissions to Access This Page

More than a few people have contacted me after seeing this message. It usually appears after upgrading to WordPress version 3 or above, when accessing a plugin’s Dashboard menu. This article isn’t an exhaustive treatment of this issue, but if you’re a developer you’ll at least walk away with an idea of what needs to [...]

Read the full article →

Fixing the Blank Screen Syndrome on a WordPress Blog

With the advent of WordPress version 3, my most common fixit request has been, “Help! I just see a white screen on my blog!” I’ll share with you what I’ve found to be the most common cause, but first there’re a few things you can do to at least get back up and running again. [...]

Read the full article →

Changing WordPress Auto-Save and Revisions Settings

The WordPress  team did a great and wonderful thing when they included auto-save and revisions for posts/pages. If you’re in a collaborative environment, referring to previous revisions can be a useful tool. And auto-save? If you haven’t had a computer crash in the middle of writing a blog post, you’re probably in the minority On [...]

Read the full article →

WordPress Plugins – Using the Options Table Properly

Note: if you’re not a WordPress plugin developer, this probably won’t interest you. I ran across this again today, hence my rant: I installed a plugin from the WordPress Plugin Repository ( the place that hosts WordPress plugins so you can download them ), THEN looked through the code. This small specialty plugin added 17 [...]

Read the full article →

Free Month Web Hosting from HostGator

I don’t put my stamp of approval on too many things, but I do need to tell you about the hosting that I use and highly recommend – HostGator. I have been on the web for over 10 years now, and seen a lot of hosting companies come and go, and used several. Never have [...]

Read the full article →