How to Split WordPress Content Into Two or More Columns

WordPress 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.

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.