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 »</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(']]>', ']]>', $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