Multiple Loops and Multiple Columns with WordPress, (X)HTML and CSS

Published Monday, September 1, 2008 @ 7:49 am • 26 Responses

Recently, I have been getting a lot of requests for multiple-loop configurations in WordPress. It seems that multiple-column, multiple-loop configurations are in high demand these days, especially ones that display posts like this:

• First column, first loop: display posts #1-5
• Second column, second loop: display posts #6-10
• Third column, third loop: display posts #11-15

Using WordPress and a little CSS, this configuration is relatively easy to accomplish. Let’s cut right to the chase..

Step 1: Multiple-Loop, Multiple Column PHP Configuration

The first thing we want to do is replace the standard WordPress loop with the following code:

// FIRST LOOP: display posts 1 thru 5
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=0'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count1 = 0; if ($count1 == "5") { break; } else { ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php $count1++; } ?>
<?php endforeach; ?>


// SECOND LOOP: display posts 6 thru 10
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=5'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count2 = 0; if ($count2 == "5") { break; } else { ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php $count2++; } ?>
<?php endforeach; ?>


// THIRD LOOP: display posts 11 thru 15
<?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=10'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count3 = 0; if ($count3 == "5") { break; } else { ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php $count3++; } ?>
<?php endforeach; ?>

That’s the juice right there. We have three loops, each displaying five posts. The first loop displays the first five posts, the second loop displays the next five posts, and the third loop displays the next five posts. Thus, this multiple-loop configuration displays the most recent 15 posts, each of which being unique.

To change the number of posts displayed for any given loop, you will need to edit three different arguments:

• showposts=5
• numberposts=5&offset=0
• $count1 == "5"

Notice the pattern here: for the first loop, we are showing the first five posts. The number of posts is set by the showposts=5, numberposts=5, and $count1 == "5". The first two arguments are self-explanatory, and the third simply stops the loop when the indicated number of posts has been processed.

Thus, to change the number of posts displayed in the first loop, change the number “5” to the desired number of displayed posts. After that, you need only specify the loop offset parameter, which lets WordPress know how many posts to skip before displaying the specified number of posts. For example, an offset value of “0” is used in the first loop so that no posts are skipped and the first five posts are displayed. Then, because the first loop displays the first five loops, we use an offset value of “5” in the second loop so that the loop skips over the first five posts and displays the next five posts in the sequence. Likewise, an offset value of “10” in the third loop ensures that the first 10 posts displayed in the first two loops are not repeated. Thus, if you wanted to display 10 posts in the first loop, the offset value in the second loop would be “10”.

Step 2: Multiple-Loop, Multiple Column (X)HTML Configuration

Now that we have the PHP in place, we are ready to add the (X)HTML markup required for the final three-column configuration. There are many ways to accomplish this, this is merely one of them:

<div id="column_01">

	<!-- FIRST LOOP -->

</div>

<div id="column_wrap">

	<div id="column_02">

		<!-- SECOND LOOP -->

	</div>
	<div id="column_03">

		<!-- THIRD LOOP -->
	
	</div>

</div>

Here, each of the three loops will be placed into its own div, which then will be styled with a little CSS to transform it into one of the three columns. Note that you may want to change the id names of the divisions to better represent the particular semantics of your document. Now let’s move on to the CSS..

Step 3: Multiple-Loop, Multiple Column CSS Configuration

The final step in the tutorial is to style the markup with CSS. Nothing too fancy, really. Creating the columns is merely a matter of floating the individual divs and applying a width to each of them:

/* three column layout */
div#column_01 {
	float: left;
	clear: none;
	width: 30%;
	}
div#column_wrap {
	float: right;
	clear: none;
	width: 60%;
	}
	div#column_02 {
		float: left;
		clear: none;
		width: 45%;
		}
	div#column_03 {
		float: right;
		clear: none;
		width: 45%;
		}

The trick here is to use width values that will create the correct column widths. The values used in the example produce three columns of approximately equal width. A great way to check how your width values are actually affecting layout is to add the following line of code to each selector:

border: thin solid red;

Adding that declaration to each of the four code blocks will create an outline around each of your divisions, enabling you to see easily the amount of space between each column. I use this trick all the time — it’s a real time-saver. Beyond that, you may specify the width in any units that you wish (e.g., em, px); no need to stick with percentages!

Warp Speed..

There is SO much you can do with WordPress, PHP, (X)HTML, and CSS. The possibilities are virtually endless. The multiple-column configuration presented in this article is a great starting point for creating more elaborate and sophisticated page layouts. Experiment and have fun!!

← Previous post • Next post →

« Thinking About a Redesign and Trying to Get Unstuck • More Redesign Rambling: Columns and Sidebars »