How to Split WordPress Content Into Two or More Columns

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.dangrossman.info Dan Grossman

    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.

  • http://www.optimalworks.net/ Craig Buckler

    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.

  • Rohit Arondekar

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

  • th3dark

    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.

  • Ravedesigns

    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.

  • Oliver Schlöbe
  • benhuson

    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.

  • Jake Goldman

    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/

  • janisto

    I prefer Multiple content blocks plugin.

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

  • http://www.optimalworks.net/ Craig Buckler

    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!

  • 1&1

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

  • Rick

    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

  • akshartech

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

    Cheers

  • sakib

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

  • guest

    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)

  • http://www.dozarte.com DoZ

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