Split columns into three+ divs?

by

The question:

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?

Cheers!

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

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.

Method 2

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

functions.php:

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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment