Columns are a common technique in most modern WordPress themes. They help liven up a typical blog layout by deviating from the hackneyed long vertical scrolling page. In this article, I have put together a couple techniques to add a column layout in your WordPress template. The technique you use depends on what orientation you want the posts to be chronologically listed.

Floated Columns

This technique is commonly used on portfolio pages to display work in a grid. Each post appears chronologically side by side from left to right. CSS floats play a major role in this layout. To clear floats, a PHP counter adds classes to the first item in a row. The below image illustrates the chronological order of elements in the columns:

To accomplish this layout, we must first generate the correct markup in your template. This following code block would take the place of the default WordPress “Loop”:

<?php 
	// Custom loop that adds a clearing class to the first item in each row
	$args = array('numberposts' => -1, 'order' => 'ASC' ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project
	$allposts = get_posts($args);
	$numCol = 4; // Set number of columns

	// Start Counter
	$counter = 0;
	foreach ($allposts as $post) { 
		$content = '<div class="columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
		$content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a></h3>';
		$content .= $post->post_content;
		$content .= '</div>';
		echo $content; 
		$counter ++;
	} 
?>

<style type="text/css">
	/* Added styles here for the demo, but ideally you would put this in a stylesheet.*/
	.columns-4 {
		float:left;
		width:22%;
		margin-left:4%;
	}
	.first {
		clear:both;
		margin-left:0;
	}
</style>

First we fetch all the posts using the get_posts() function and store that array as $allposts. Then in the foreach loop, each post is wrapped in a container div with dynamic styles. The first dynamic style is .columns-4 which receives the value 4 from the $numCol variable. Next, a shorthand conditional statement uses modulus to see if the remainder of $counter / $numCol equals 0 (i.e. items number 0, 4, 8, 12, etc.). If so, it adds the class .first. Adding this class is important because it allows you to clear the float of the first item and prevents any strange issues where taller elements break the float flow of items below it.

Making these styles dynamic makes the code more flexible in case you want to update the number of columns down the road. Then one would only need to update the variable $numCol and class .columns-X .

Newspaper Style Columns

This technique is used to evenly distribute posts in multiple newspaper style columns. This differs from the previous method because each post appears chronologically from top to bottom in each column (opposed to being read from left to right). To accomplish this, array_chunk() is used to separate all of the posts into equal chunks a.k.a columns. The below image illustrates the chronological order of elements in the columns:

Below is an example that would create 4 containers with the class .columns-4 and evenly distribute the posts in to each. Again, this code block would take the place of the default WordPress “Loop”:

<?php 
	// Custom loop that equally distributes posts in columns
	$args = array('numberposts' => -1, 'order' => 'ASC' ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project
	$allposts = get_posts($args);
	$numPost = count($allposts); // Calculate the total number of items
	$numCol = 4; // Set number of columns
	$numPerCol = ceil($numPost / $numCol);// Total number of results divided by number of columns
	$postgroup = array_chunk($allposts, $numPerCol);

	// Start Counter
	$counter = 0;
	foreach ($postgroup as $posts) { 
			echo '<div class="columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
			foreach($posts as $post) // equivalent to while(have_posts())
			{       
					$content = '<div class="col-post">';
					$content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a></h3>';
					$content .= $post->post_content;
					$content .= '</div>';
					echo $content; 
			}
			echo '</div>';
			$counter ++;
	} 
?>
<style type="text/css">
	/* Added styles here for the demo, but ideally you would put this in a stylesheet.*/
	.columns-4 {
			float:left;
			width:22%;
			margin-left:4%;
	}
	.col-post {
			margin-bottom:20px;
	}
	.first {
			clear:both;
			margin-left:0;
	}
</style>

First, the get_posts() function is used to get all posts and add them to the $allposts array. Then to calculate how many posts should be in each of the four columns, you divide the total number of posts in $allposts by the number of columns. Using ceil() that value is rounded up to give us the $numPerCol. This ensures that if there are an uneven number of items to split between columns, that the last column will have fewer than the previous two. The final variable $postgroup, takes the original array of posts and breaks it into chunks of size $numPerCol using array_chunk(); Lastly you loop through the arrays using nested foreach loops to output the columns and post content.

It is important to note, that both of these techniques are not limited to only WordPress. They would work in any PHP code where you need to place content into columns. Just replace the $allposts variables with another array and update your $content output.