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.

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 have been well – but the guys/girls that run the WordPress plugin repository didn’t like the term ‘cloaker’. I guess it implies being shady, which we all know is not the intent or use for this plugin.

At any rate, since you can’t get it from WordPress any more, you can get it here: ilwp-simple-link-cloaker. Installation is a snap, if you remember the old way of installing plugins:

  1. download the plugin zip file to your computer
  2. unzip the file into a directory
  3. upload the entire plugin folder to your wp-content/plugins folder
  4. activate through the Dashboard > Plugins interface

Thank you for all of your support!

Protect Your Email Address From Spammers

So you’ve started a new blog, and now the worst has happened – the spammers have your email address. You know, the one that’s on every post where you’re listed as the author.

You can do what a lot of people do to combat the dreaded email harvester. Give them a throw-away address to chew on, and when the spam gets too bad close that account and start another. Throw-away addresses are the free accounts – Hotmail, Yahoo, GMail.

But that’s a pain.

Why not just make it so the spam bots can’t find your email address in the first place? Fortunately, it’s pretty easily done, using a built-in WordPress function: antispambot(). This function takes the email address enclosed in the parentheses, converts it to HTML entities ( the &#xx characters ) and returns the value.

How do you use it? Again, pretty simple. Somewhere in your templates, if the template author chose to display your email address at all, is a call to the WordPress template tag the_author_email(). This tag, as you might suspect, outputs the post author’s email address. Open your single.php template (the most likely template to display the author’s email address ) in your fav text editor, and search for the tag. Once you’ve found it, you’ll make the substitution. Change the_author_email() to the following:

echo antispambot( get_the_author_email())

Nothing to it, right?

Those of you with sharp eyes will notice we’re using a slightly different function to get the author’s email address – get_the_author_email() vs. the_author_email(). The difference is that the latter actually outputs the email address to the screen, and we don’t want that. We want to pass the email address to the antispambot() function rather than print it to the screen, so we use the get_the_author_email() function which returns the value rather than echoing it. Small but important distinction.