I have an article sitting in the back of my head that deals with multiple WordPress Loops on a single page like I have used on the home page of this blog and one other blog. I decided, though, to first address a much simpler topic … the WordPress Loop inside of a Loop.

The first time I used a loop inside of a loop was here on this blog. You will notice at the top of most of the category pages, static pages, and individual post pages on this blog is a row of graphics that represent the last 10 articles posted on this site. Since this theme originally came with Timthumb, I thought doing this would be a unique and powerful way to promote the most recent posts on this blog. ( I have another article coming up on how to do this )

My first attempt at this failed miserably because I simply tried to insert the standard WP QUERY loop into the code for these pages. It took me a good couple of hours of research to figure out why this didn’t work. Basically, these pages are running the WP QUERY loop already. The query loop begins BEFORE the page is loaded and that was why I wasn’t seeing the “query” call at the top of these pages. ( Remember … I am somewhat of a beginner when it comes to WordPress )

What I needed to do was to build a second query loop to parse the posts database for the thumbnails at the top of the page. I needed to use this new loop INSIDE of the original loop that had already been set to pull the original database information for the page … for example, on a category page WordPress would already be querying the database to find the posts within that specific category. This second query that I planned to build needed to exist on the page without fully ending the original query or else my page would not display the content it was originally intended to display.

Enter … WordPress Loop Inside A Loop …

First, our original query loop on the page will use the ” have_posts() ” and ” the_post() ” calls that are the basic WordPress Query calls. We need to keep those alive and well so that they will pull our originally intended information into the page. So our new query can actually start in the middle of this query simply by using a different name structure. The easiest way to see this is to show you some code …

Original Single Post (single.php) page code through the “have posts” call:

<?php get_header(); ?>
<div id=”content-wrap”>
<div id=”content-area”>
<div id=”post-wrap”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>”>
<div id=”post-meta2″>
— Original Code To Display The Post —

…. Blah, blah, blah to the end of the page ….

Note that the ” query_posts() ” call does not appear on the page but it has still been called and the ” have_posts()) : while (have_posts()) : the_post() ” that appear down the page will parse and eventually display the original page information.

Now, to accomplish what I wanted … a thumbnail display of the last 10 posts at the top of the page … I was going to have to parse the database a second time to get the required information. Again, using single.php as an example … I accomplished this by adding the following code …

<?php get_header(); ?>
<div id=”content-wrap”>
<div id=”content-area”>
<?php $my_query = new WP_Query(); ?><?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

… A bunch of code to display the thumbnails …
( code for graphic display of recent posts will be in an upcoming article )

<?php endwhile; ?>
<div id=”post-wrap”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>”>
<div id=”post-meta2″>
— Original Code To Display The Post —

…. Blah, blah, blah to the end of the page ….


Simply by giving the “inside” or “second” loop query a unique name … ” $my_query ” in the above example … you can use it without actually ending the original, core loop. This is especially useful on pages where the original WordPress loop query starts before the page is loaded such as single post pages, static pages, and archive pages. Just make sure to END your “inside” query with your “endwhile” statement.

More info can be found on the WordPress site.

Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments and thoughts ALWAYS welcome !


Chris

• Go ahead and STALK ME – electronically of course – Subscribe Here

Related Posts:

• * Modifying The Posts Per Page Query In WordPress


• * How To Display WordPress SubCategories: Descendant Function


• * Clean Up Your WordPress Blog Step 1 – Tags and Categories


• * Creating Multiple Header Files In WordPress


• * How To Create Mini Photo Albums on WordPress Post Pages

---

Technology and Programming categories:

• CSS and PHP
• Design Techniques
• Images and Graphics
• The Internet
• WordPress Plugins
• WordPress Templates & Design

>>> See All Technology Articles <<<

---

Related Tags:

Blogging • coding • PHP • Web Site Design • WordPress • WordPress Templates