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…

Leave a Reply

Privacy & more..

Cookie Consent Policy