Du musst dich anmelden um Beiträge und Themen zu erstellen. Einloggen · Registrieren

Display Three Columns of Posts

Displaying content in multiple columns is a much sought-after WordPress technique. There are some good tutorials around explaining various ways of doing the job, but this one is perhaps the easiest.

To display your posts in three columns, begin by segmenting your post with some HTMLcomments:

Lorem ipsum blah blah. This content appears before the three columns.


This content will appear in the first column.


This content will appear in the second column.


This content will appear in the third column.

The next step is to create columns based on the markup comments. Open your theme file and include the following code within the loop:

<?php // multiple columns

$page_columns = explode("<--column-->", $post->post_content);

echo $page_columns[0]; // before columns

echo '<div class="first column">'.$page_columns[1].'</div>'; // first column

echo '<div class="second column">'.$page_columns[2].'</div>'; // second column

echo '<div class="third column">'.$page_columns[3].'</div>'; // third column


That’s essentially all there is to it. To get the columns to actually look like columns, add something similar to the following in your CSS file:

/* column structure */
.column {
	margin-right: 10px;
	float: left;
	width: 33%;
/* column styles */
column.first, column.second, column.third {}

The cool thing about this method is that you have full control over the layout of each particular post. Each column may contain as much or as little content as desired, and adding or removing columns is straightforward. Even better is that you can easily remove the column functionality and display your content in a single column by simply removing the custom code from the loop. The post markup consists of HTML comments, so they will be ignored if not acted upon from within the loop.

Source: Enhanced version of krimsly’s technique (via the WP Codex)