How to Split WordPress Content Into Two or More Columns

Posted: February 9, 2010 in PHP
Tags: , ,

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.
More Tags

More Tags

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:

1 // split content at the more tag and return an array
2 function split_content() {
3
4 global $more;
5 $more = true;
6 $content = preg_split(‘/<span id=”more-\d+”><\/span>/i’, get_the_content(‘more’));
7 for($c = 0, $csize = count($content); $c < $csize; $c++) {
8 $content[$c] = apply_filters(‘the_content’, $content[$c]);
9 }
10 return $content;
11
12 }

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.

1 < ?php
2 // original content display
3 // the_content(‘<p>Read the rest of this page &raquo;</p>’);
4
5 // split content into array
6 $content = split_content();
7
8 // output first content sections in column1
9 echo ‘<div id=”column1″>’, $content[0], ‘</div>’;
10
11 // output remaining content sections in column2
12 echo ‘<div id=”column2″>’, implode(array_shift($content)), ‘</div>’;
13 ?>
Advertisements
Comments
  1. Lara says:

    Hi there — great article. However, it seems that while my first column is outputting the correct content, my second column is somehow making its content dissapear. THat is, text after the more split never appears on the page. Any ideas?

  2. Newdigital says:

    Hi, Thanks for your article it helped me a lot on achieving CMS ability for my website, but i could not use it to make more than 2 columns, therefor i added some extra code, now i can have as many columns as i want. here is a link to my article
    How to Split WordPress Content Into Three or More Columns

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s