WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I got this code (source)

// 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;

// 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>';

This only gets two columns - how can I get a third div column?


share|improve this question
Please always provide full code. There's no guarantee that the source will live forever. – kaiser Apr 23 '12 at 6:55
Close-voted as off-topic. This is an HTML/PHP question, not a WordPress question. (Note: while asked in the context of WordPress, this question boils down to "how do I take this blob of content and break it into columns?". Since you already know how to retrieve/filter the_content in WordPress, you've eliminated anything WordPress specific in the question. Suggestion: if the content in question uses the <!--nextpage--> tag to split columns, then this question can be made WordPress-specific. – Chip Bennett Apr 23 '12 at 14:38

With the above shown function split_content() it's not possible to build a three column layout. It basically splits the content with the <!-- more -->-Tag into half and then builds two columns (in a pretty complicated way).

Maybe it works with adding multiple <!--more-->-Tags to your post content in the HTML-Editor.

share|improve this answer
up vote 0 down vote accepted

All right found a great solution from: http://digwp.com/2010/03/wordpress-post-content-multiple-columns/


function my_multi_col_v2($content){
// run through a couple of essential tasks to prepare the content
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]&gt;', $content);

// the first "more" is converted to a span with ID
$columns = preg_split('/(<span id="more-\d+"><\/span>)|(<!--more-->)<\/p>/', $content);
$col_count = count($columns);

if($col_count > 1) {
    for($i=0; $i<$col_count; $i++) {
        // check to see if there is a final </p>, if not add it
        if(!preg_match('/<\/p>\s?$/', $columns[$i]) )  {
            $columns[$i] .= '</p>';
        // check to see if there is an appending </p>, if there is, remove
        $columns[$i] = preg_replace('/^\s?<\/p>/', '', $columns[$i]);
        // now add the div wrapper
        $columns[$i] = '<div class="dynamic-col-'.($i+1).'">'.$columns[$i].'</div>';
    $content = join($columns, "\n").'<div class="clear"></div>';
else {
    // this page does not have dynamic columns
    $content = wpautop($content);
// remove any left over empty <p> tags
$content = str_replace('<p></p>', '', $content);
return $content;


replace your the_content() tag with the following code:

$content = get_the_content('',FALSE,''); // arguments remove 'more' text

echo my_multi_col_v2($content);

Add CSS:

div.dynamic-col-1 { float: left; width: 38%; padding-right: 2%;}
div.dynamic-col-2 { float: left; width: 38%;padding-right: 2%;}
div.dynamic-col-3 { float: left; width: 20%;}
div.clear { clear: both; }

add the two <!--more--> tags in your post/page content to create the three columns.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.