Loading...

Last time I posted a function to split text content into columns which didn’t really work for lists, images basically anything that wasn’t paragraphs. Not ideal. So below you will find a little function that will break anything it finds in the_content into two columns. Bang!.

/**
 * Columnize the post content
 */
function nmm_add_some_columns($content){
	$doc = new DOMDocument;
	$doc->loadHTML($content);
	foreach($doc->getElementsByTagName('*') as $node) {
		if($node->nodeName != 'html' && $node->nodeName != 'body') {
			$slices[] = $doc->saveHTML($node);
		}
	}
	if(isset($slices) && is_array($slices)) {
		$breakpoint = ceil(count($slices)/2);
		if($breakpoint >= 1) {
			$b=0; 
			$output = '<div class="columns first">'; 
			foreach($slices as $key => $s) { 
				if($b==$breakpoint && $breakpoint >= 1) { 
					$output .= '</div><div class="columns last">'; 
				} 
				$output .= htmlspecialchars_decode($s); $b++; 
			} 
			$output.= '</div>'; 
			$content = $output; 
		} 
	} 
	return $content; 
} 
add_filter( 'the_content', 'nmm_add_some_columns', 999 );

You can use the same css from last time as an example, however you might want to style your lists, images etc within the columns at wider screen widths…

Latest Posts

Portfolio

Contact

Fill in the form below to send us a message. Your details will not be used for promotional purposes or passed on to any third parties.

 

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close