WordPress Trick: Output Content In Two Columns Separated By Tag [Updated]

Need to split up your WordPress content in two columns without too much of a hassle? How about if you could do that by simply inserting the <!--more--> to indicate where you want the split? Well that’s what you can do using this trick.

Replace the_content(); in your theme with this code. That probably means editing your themes “post loop” (usually in page.php, single.php or postloop.php):

$more = 0;
$content_1 = wpautop(do_shortcode(get_the_content('')));
$more = 1;
$content_2 = wpautop(do_shortcode(get_the_content('',true)));

// check if the more tag is used at all
if ($content_1 == $content_2) {
	echo $content_1;
} else {
	echo '

' . $content_1 . '
' . $content_2 . '
'; }

Paste this in your themes style.css:

#column_one {
	float: left;
	width: 50%;
}
#column_two {
	float: right;
	width: 50%;
}

From now on you can use the “More” tag to switch your content into columns.

[Update]: Fixed problem with paragraphs.

One thought on “WordPress Trick: Output Content In Two Columns Separated By Tag [Updated]”

  1. WordPress Trick: Output Content In Two Columns Separated By < !–more–> Tag: http://noscope.com/?p=5998 #wordpress

Comments are closed.