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?


  • 1
    Please always provide full code. There's no guarantee that the source will live forever.
    – kaiser
    Commented Apr 23, 2012 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. Commented Apr 23, 2012 at 14:38

2 Answers 2


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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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