How to Split WordPress Content Into Two or More Columns

By | | PHP

split WordPress contentWordPress is a great CMS, but implementing some features within your theme can require a little lateral thinking. The content for your page or post is usually output by the theme code using a single function call:

the_content(args);

But what if you need to split the content into two or more blocks? That might be necessary if your theme requires multiple columns or sections on the page. WordPress provides a get_the_content() function to return content as a PHP variable, but how do you determine where the divisions occur? There are a few solutions on the web, but most involve either:

  1. Splitting the content at HTML tags such as h2 headings. Unfortunately, that requires the content author to know a little HTML and it’s not very versatile — you couldn’t allow two headings in one column.
  2. Using a WordPress shortcode. That’s more flexible, but it still puts the onus on the content editor to remember and use the right code.

The WordPress <!--more--> tag may offer a better solution. It’s normally used to split a long article into two or more pages, but not all themes use that facility and it only works for WordPress posts by default (not pages). Using the <!--more--> tag offers several advantages:

  • A “more” toolbar button is available in both the visual and HTML editing pane.
  • Divisions can be placed anywhere in the content.
  • It’s easy for non-technical users to understand how the content will be split.

WordPress editing pane showing 'more' button

To split your content, locate your theme folder (wp-content/themes), edit or create a functions.php file and add the following function within a <?php … ?> block:


// split content at the more tag and return an array
function split_content() {
	global $more;
	$more = true;
	$content = preg_split('/<span id="more-\d+"><\/span>/i', get_the_content('more'));
	for($c = 0, $csize = count($content); $c < $csize; $c++) {
		$content[$c] = apply_filters('the_content', $content[$c]);
	}
	return $content;
}

You now need to locate the theme files which call the_content() within the WordPress loop. You should find it in single.php and page.php since these are used to display single posts and pages respectively. It may also be found in index.php, archive.php and search.php, however, these normally show more than one article so be careful how multiple content blocks are handled.

Once you’ve found the relevant code, comment out the_content() and call the split_content() function. It returns the content as an array; each element contains a single content block split at the <!--more--> tag, e.g. $content[0], $content[1], $content[2] … etc. The HTML can then be output as required, e.g.


< ?php
// original content display
// the_content('<p>Read the rest of this page &raquo;</p>');
// split content into array
$content = split_content();
// output first content section in column1
echo '<div id="column1">', array_shift($content), '</div>';
// output remaining content sections in column2
echo '<div id="column2">', implode($content), '</div>';
?>

I hope you find it useful.

Written By:

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

Website
>> More Posts By Craig Buckler

 

{ 16 comments }

DoZ September 28, 2011 at 7:00 am

There’s a very good plugin fro WP columns…
http://wordpress.org/extend/plugins/easy-columns/
Check it out!
;)

guest February 16, 2010 at 10:29 pm

hi, I like that trick, I searched for something similar a long time, but I have a problem with this solution, I can’t get more than $content[0] and $content[1] to work. If I have a 3rd more tag, it just ignores it and $content[2] is returning nothing, any idea what that could be? (woprdress 2.9.2)

sakib February 10, 2010 at 8:27 pm

it’s really interesting and thanks for the share and it will help me a lot to re-design my website.

akshartech February 7, 2010 at 12:16 am

Well, wordpress provides this option from code and from admin theme settings both.

Cheers

Rick February 7, 2010 at 12:07 am

Splitting the content can be done in 2 ways.

1. From the Admin panel Dashboard
2. From the php or html file of the theme that is being used.

Thanks
http://www.psdtowordpress.co.in

1&1 February 6, 2010 at 8:13 am

interesting… but how can I get rid of the obnoxious 1&1 ad?

Craig Buckler February 5, 2010 at 6:43 pm

Thanks for all the tips. Those plugins are very good, although they may hand a little too much power to the content author. That’s fine if they’re technically minded, but could cause problems if they start playing around!

janisto February 5, 2010 at 5:09 pm

I prefer Multiple content blocks plugin.

http://wordpress.org/extend/plugins/multiple-content-blocks/

Jake Goldman February 5, 2010 at 4:39 am

There are even easier ways if you only need 2 blocks. I discussed this in a Smashing Magazine article:

http://www.smashingmagazine.com/2009/11/25/advanced-power-tips-for-wordpress-template-developers/

We also offer a plug-in that does this (as mentioned in the Smashing piece).

http://wordpress.org/extend/plugins/secondary-html-content/

benhuson February 5, 2010 at 4:16 am

I like to use the <!–nextpage–> tag instead of the ‘more’ tag because as th3dark mentioned above the ‘more’ tag is usually used to show only a part of the content of a post or page.

If you install the TinyMCE Advanced plugin you can add the “Split Page” icon to your editor (which looks very like the More Tag button) to easily insert these breaks. You’re unlikely to want to split a page into separate pages and have multiple content areas in the same template so this works quite well.

Oliver Schlöbe February 5, 2010 at 3:55 am
Ravedesigns February 5, 2010 at 3:39 am

Nice job Craig and I’d love to see more wordpress tutorials here too, but when I had a recent client that wanted to use columns on their site, a quick google search turned up http://wordpress.org/extend/plugins/wp-post-columns/ which did the trick and was super easy to implement.

th3dark February 5, 2010 at 12:30 am

Well, the More tag is mosty used to show only a part of the content on main blog page, index.php or home.php. So maybethe best will be to have another custom tag to use for column splitting, and then maybe the split will be available for 3 or 4 columns.

Rohit Arondekar February 4, 2010 at 11:09 pm

I use 2 columns for the content/articles on my site! But I made a custom back-end for it: http://rohitarondekar.com

Craig Buckler February 4, 2010 at 8:18 pm

Thanks Dan. The main reason I wrote the article was because I had the problem! Most existing themes use a single block of content, but that’s because WordPress only allows you to write a single block of content!

I’ve also used custom fields for small page blocks, but they can be a little clunky for non-technical authors.

WordPress has certainly grown from being a simple blogging system to a fully-blown CMS. I’ve provided it to several clients because it’s so easy to use and understand.

Dan Grossman February 4, 2010 at 8:04 pm

I’ve not seen a theme where you would want to do this, but I’m all for seeing WordPress tips and tutorials on SitePoint. I was just looking at WP’s stats earlier today — 18 million blogs with 9.7 million self-hosted installs. Amazing how fast it’s grown in just the past year.

Comments on this entry are closed.