Month: January 2010

So you want to design a WordPress theme or modify an existing theme to have your Post content to display as two columns much like printed newspapers and magazines? Well here’s an ingenious idea I learned from the Khoi Vinh’s and Allan Cole’s Basic Maths WordPress theme on how to do that. The beauty of this technique is that no JavaScript is required and everything is processed through WordPress and PHP so nothing can get blocked by security settings on a visitor’s browsers. This method also solves the problem with blogs that have non-technical writers who aren’t accustomed to using the HTML tab in the Post Editor or aren’t familiar with HTML markup and it allows writers to just write. So how do we do this:

Directions

You will need a functions.php file in the theme template folder. If it already exists, open it. Otherwise, open you’re favorite HTML editor (I use Emerald Editor for the PC and TextWrangler for the Mac) and save the blank file as functions.php inside the WordPress theme template folder.

Open up the functions.php file and paste the code below anywhere inside the file. Be sure that you don’t accidentally place this function inside another function or you’ll get a blank screen when trying to load your website. If you’re new to the functions.php file, it may take some trial and error to get this right.

[sourcecode language=”PHP”]
// Page Paragraph column short code (http://basicmaths.subtraction.com/demo/)
// Right
function basic_rightcolumn($atts, $content = null) {
return ‘<div class="<span class=">rightcolumn">’ . $content . ‘</div>’;
}
add_shortcode("rightcolumn", "basic_rightcolumn");

// Top
function basic_topcolumn($atts, $content = null) {
return ‘<div class="<span class=">topcolumn">’ . $content . ‘</div>’;
}
add_shortcode("topcolumn", "basic_topcolumn");

// Left
function basic_leftcolumn($atts, $content = null) {
return ‘<div class="<span class=">leftcolumn">’ . $content . ‘</div>’;
}
add_shortcode("leftcolumn", "basic_leftcolumn");
[/sourcecode]

So what does all of this code do exactly? Let’s look at each part of code individually and the how to use it when writing Posts or Pages.

The first part of code:

[sourcecode language=”PHP”]
// Right
function basic_rightcolumn($atts, $content = null) {
return ‘<div class="<span class=">rightcolumn">’ . $content . ‘</div>’;
}
add_shortcode("rightcolumn", "basic_rightcolumn");
[/sourcecode]

sets up a new WordPress Shortcode, [rightcolumn][/rightcolumn], that you can use in your Posts and Pages. So when you write a Post or Page and you enclose some text in the Shortcode, that will cause WordPress to wrap your text in HTML markup. For example, if I was to write:

[rightcolumn]This should appear in the right column.[/rightcolumn]

and then Publish the Post, looking at the source code of the published page, I should see:

<div class="rightcolumn"><p>This should appear in the right column.</p></div>

The second part of code:

[sourcecode language=”PHP”]
// Top
function basic_topcolumn($atts, $content = null) {
return ‘<div class="<span class=">topcolumn">’ . $content . ‘</div>’;
}
add_shortcode("topcolumn", "basic_topcolumn");
[/sourcecode]

sets up another new WordPress Shortcode,[topcolumn][/topcolumn], that maybe necessary depending on how your theme is laid out. The biggest advantage I see with the [topcolumn] is that you can use it right after the [leftcolumn] and [rightcolumn] to fix any CSS float issues.

The final part of code:

[sourcecode language=”PHP”]
// Left
function basic_leftcolumn($atts, $content = null) {
return ‘<div class="<span class=">leftcolumn">’ . $content . ‘</div>’;
}
add_shortcode("leftcolumn", "basic_leftcolumn");
[/sourcecode]

adds <div class="leftcolumn"><p></p></div> to whatever is enclosed in the [leftcolumn][/leftcolumn] Shortcode.

Now you need to style those divs appropriately in order for the two columns to appear. This is what I use in my style sheet, but you mileage may vary:

[sourcecode language=”CSS”]
.entry .leftcolumn, .entry .rightcolumn {width: 50%; }
.entry .leftcolumn {float: left;  }
.entry .rightcolumn {float: right; }
.entry .leftcolumn p {padding-right: 0.5em; }
.entry .rightcolumn p {padding-left: 0.5em; }
.entry .topcolumn {clear: both; }
[/sourcecode]

Now to use this, you start a new Post or you can edit an existing Post, and decide where you want the 2-columns to appear and write:

[leftcolumn]This is the stuff that I'll be putting in my left column.[/leftcolumn]
[rightcolumn]This is the stuff that will go into the right column. Isn't it pretty?[/rightcolumn]
[topcolumn]This will span the entire width and be a normal one-column paragraph.[/topcolumn]

With the Shortcodes, you can put them next to each other or do a hard-return, it doesn’t matter. In actuality, the WordPress Visual Editor will probably move it all to one line. You can also put [rightcolumn] before the [leftcolumn] as the right column will always be right so long as you have the CSS correct.

The only thing you can’t do is something like this:

[leftcolumn]This is the stuff that I'll be putting in my left column.[/leftcolumn]
[topcolumn]This will span the entire width and be a normal one-column paragraph.[/topcolumn]
[rightcolumn]This is the stuff that will go into the right column. Isn't it pretty?[/rightcolumn]

as you’ll have some weird styling errors.

Example

[left-column]It wouldn’t be any good without a sample to show right? So if you copied the code and put it in the functions.php file correctly, then in the WordPress Post Editor, you should be able to use the new Shortcodes to create a two-column post article. Also don’t forget that you need to style the divs in-order for this to work properly.[/left-column] [right-column]If you notice that you still only have one-column, but no errors, check your source code for the chunk of code to see if it the Shortcode is being properly called. If it is, that means you’re missing the style information in the style sheet.[/right-column] [top-column]Here’s a wide column that returns to “normal” and spans the entire width. You don’t necessarily need to use the [topcolumn] Shortcode, but if you notice that your having design float issues, then you need to use the
[topcolumn] Shortcode on the paragraph immediately following the two columns. Make sure you have clear: both; entered into your style sheet under.topcolumn.

I would recommend doing this as good practice anyways; especially if one column is longer than the other column.[/top-column]

Conclusion

There are a number of ways you can accomplish two-column post layouts. There a number of jQuery techniques including this WordPress plugin that accomplishes the task but I’m a big fan of less. The less plugins you have to use, the faster your website will load. Also you want to make it as easy as possible for non-techie writers to be able to implement easily. One of the hardest part is to have the non-techie writer try to use the HTML Editor, see a garble of code, mess around and everything is screwed up. Extreme case, but it happens. With the use of WordPress Shortcodes, they can easily implement the feature from the Visual Editor and focus on writing.

Thank you to the Basic Maths WordPress Theme for the very useful code.

UPDATE (2010-05-17): Here’s a trick by WPRecipes.com on how to automatically output content into two columns using the functions.php for those who are looking for a method that doesn’t require users to remember code.