Split columns into three+ divs?

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!

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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 -Tag into half and then builds two columns (in a pretty complicated way).

Maybe it works with adding multiple -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  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

0 0 votes

Article Rating