Latest Tweets404 Fix: Block Nuisance Requests for Non-Existent Files: perishablepress.com/block-nuis…
Perishable Press

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

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!!

Jeff Starr
About the Author Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
Archives
31 responses
  1. Check your second set of code tags… it says “First Loop… Second Loop.. Second Loop…” ;)

  2. Jeff Starr

    Thanks for the catch, Erika — fixed!! :)

  3. Hey congrats on making the 9rules list, it’s great to see your blog in there. Pity though you closed the htaccess for comments, I think it’s a great post, just can’t get this thing to work properly though..Cheers Simon

  4. Jeff Starr

    Hi Simon, thanks for the congrats! I am looking forward to supporting the 9rules network. I am honored to be a part of it. As for the htaccess comments, I can only assume that you are referring to my article, “Stupid htaccess Tricks.” If so, yes, I was getting a ton of “drive-by” support questions that were really draining my time from more critical pursuits. Although there are many other htaccess posts from which to learn, I am also available for hire through my design site, Monzilla Media. In any case, thanks for dropping by — I appreciate the feedback! :)

  5. Haha I thought so that it was getting too intensive there. Yeah in any case keep it up!

  6. Thanks for this article. It’s a good idea to have many loops. I really am interested in knowing how to get different loops based on categories, not offset.

    Any idea?

  7. Thanks Jeff Starr for your great tip. Now I know out how to do it.

  8. Jeff Starr

    Hi Binh, to implement different loops based on categories, you can use the general techniques described in this article along with any number of category parameters. Simply modify your set of query_posts loops with the desired category parameters and full control is yours.

  9. Jeff Starr

    My pleasure, Binh — happy to help! :)

  10. very useful post man, filed it away for when I have the time to work on a new (my first) theme.

  11. Jeff Starr

    Thanks for dropping by, Donace — it’s great to see you again! :)

  12. damir - SEO Tips October 15, 2008 @ 11:36 am

    Man, you are the king! I have been bookmarking many of your posts cause I like to customize my themes and every loop and trick you give, works awesome. I have found some other sites that offer codes and different loops but a lot of them just don’t work. Thank you.

[ Comments are closed for this post ]