Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

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

About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
Blackhole Pro: Trap bad bots in a virtual black hole.

31 responses to “Multiple Loops and Multiple Columns with WordPress, (X)HTML and CSS”

  1. Jeff Starr 2008/11/18 9:00 am

    @Paul Demers: Great to hear, Paul! I look forward to sharing new WordPress articles with you! Welcome aboard! :)

    @davebach: Good point about specifying post numbers that take into account the total overall number of posts. This is a very important point that catches many of us by surprise. Also, thanks for mentioning the chronological 4-column excerpt layout.. I like the idea and will try to fashion a solid tutorial on the subject within the next couple of weeks. Thanks for the idea! :)

  2. I want to make my posts going from left to right instead of going from top to bottom. How can I do this?

  3. Jeff Starr 2009/01/07 6:02 pm

    @Muffin: I think this article may provide some helpful information! ;)

  4. Hi Jeff, thanx for the great tutorial.
    I want to display thumbs in a grid 4×4.
    The first line with 4 thumbnails should be static with the last four posts.
    The other three lines of the grid should go random without having duplicate posts with the first gridline.

    Thxn in advance and sorry about my english :-)

  5. Evangelos 2009/01/09 1:55 am

    Hi Jeff,

    and thnx for the fine tutorial.
    Is there a chance to have random posts in the second loop without having duplicates.
    There is a link of what i am trying to build:

    http://www.koli-bri.net/neuheiten.php
    (The thumbnails) First line stays and other lines give random post from the same category (refresh and check the lower three lines).

  6. roger camara 2009/01/11 6:36 pm

    great code

    when i try to go to next page with

    it displays the same posts as on the main page…

    my loop is in index.php

  7. Thank you very much for posting this tutorial. I found it very useful for a three-column multiple category loop I needed to build. Thanks.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
The Tao of WordPress: Master the art of WordPress.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.