WordPress How To Break Content Into Two Columns

Richard Bui — Fri, 01 Jan 2010 15:51:22 +0000

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 ‘

rightcolumn">’ . $content . ‘

’;
}
add_shortcode("rightcolumn", "basic_rightcolumn");

// Top
function basic_topcolumn($atts, $content = null) {
return ‘

topcolumn">’ . $content . ‘

’;
}
add_shortcode("topcolumn", "basic_topcolumn");

// Left
function basic_leftcolumn($atts, $content = null) {
return ‘

leftcolumn">’ . $content . ‘

’;
}
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 ‘

rightcolumn">’ . $content . ‘

’;
}
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:

This should appear in the right column.

The second part of code:

[sourcecode language="PHP"]
// Top
function basic_topcolumn($atts, $content = null) {
return ‘

topcolumn">’ . $content . ‘

’;
}
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 ‘

leftcolumn">’ . $content . ‘

’;
}
add_shortcode("leftcolumn", "basic_leftcolumn");
[/sourcecode]

adds

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

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.

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.

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.

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.

Today’s Links of Interest

Richard Bui — Fri, 05 Sep 2008 00:32:21 +0000

I keep visiting all these cool websites, each with useful techniques or tips and tricks or even just a cool design, and I bookmark them, but I never visit them again. I then look in my bookmarks to look for something specific and find I have a gabillion bookmarks that make no sense to me because they’re all just website names. I remember why I bookmarked the sites when I bookmarked them, but months and sometimes years later, I can’t recall for the life of me why I bookmarked that site.

What works for me is a list with the reason why I bookmarked something, I guess something kinda like what Delicious offers, but I think it’s more useful for me on my own site because I can do more than just add snippets of text. So starting today, I created a new category, Useful Things as a place to stick all the stuff such as links or pics of things I might need later.

3nhanced.com – Photoshop, CSS, JavaScript tips and tricks

A cool website by Jonathan Snook that has a lot of cool tips and tricks for Adobe Photoshop. I originally came here looking for WordPress badges for my website, and found Jonathan’s post on How To Make A Badass WordPress Logo. I was also further enticed by his cool WordPress theme and was specifically drawn in on how he did post thumbnails. It doesn’t look like it’s been updated recently and there isn’t many posts, but it’s still worth bookmarking.

Prelovac.com – WordPress Plugin: Snazzy Archives

Vladimir Prelovac has been on a roll with writing great WordPress plugins, but the one plugin that really caught my eye is his cool fancy Snazzy Archives. It’s one of the few plugins that I can confidently say I would pay for. The concept is wonderful and it is visually stunning. Here’s a live demo. It also have various configurations that you can use.

For those that are interested, Vladimir is also responsible for the Live Blogroll, WP Wall, and Theme Test Drive. He’s also the creator of the Amazing Grace WordPress theme that Donncha is currently using on his site.

Blogohblog.com – 10 WordPress Hacks to Make Your Life Easy

I originally stumbled upon this link from WeblogToolsCollection.com and found it to be a great post. Jai Nischal Verma lists 10 very useful code hacks for WordPress theme developers. The topics covered are:

Displaying Gravatars in comments – specifically the code and CSS necessary to have Gravatars appear in the comments section of your theme
Image Gallery in WordPress – the lines of code with the CSS so that you can take advantage of WordPress 2.5′s new built-in Gallery
Adding a “Subscribe to feed” message after every post – a simple way to remind readers to subscribe to your RSS feed
Displaying Twitter messages on your blog
Displaying Authors’ Bio
Categories drop down
Archives drop down
Adding 125×125 Ads to your sidebar
Displaying most commented (popular) posts – this is a way to display the most commented posts without a plugin, but rather the code is directly integrated into the theme
Adding a Print Button to your posts – people sometimes forget to do this for their themes. Make it easy for people to print out the useful information on your website! Don’t forget to style for print also.

Noupe.com – Most Desired WordPress Hacks: 11 Common Requests and Fixes

This was the first link in the same WeblogToolsCollection.com article above that is also incredible useful for WordPress theme developers. It’s already got 100 Diggs and 90 comments, so it’s a worthwhile bookmark. The eleven topics covered are:

Using Custom Fields to Display Post Thumbnails
Avoiding Duplicate Content – This is important, not only for SEO, but because there are times you need to run two loops such as the case with Featured posts.
Login Box in your sidebar
Creating a menu Showing Certain Categories
Display Categories in a Dropdown box
Most Wanted Posts and Categories hacks
Post Author Related Solutions

I also like Noupe’s WordPress theme also. It’s nicely designed with nice colors.

Rich Bui » CSS