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…