Posted by Jason Stockton | Posted in Design, HTML, Javascript, Tutorial | Posted on 29-06-2009
Tags: Wordpress
So you know HTML, but not PHP – you’re trying to follow WordPress tutorials, they refer to the infamous “loop”… But where is it, what is it, and how do you find it? I’m going to run through “the loop” what it does and how to find it in your WordPress theme.
What is it?
To learn how to find the loop, it would be good to know what it does, and it’s purpose within a template. Loops are used in virtually all computer programming languages, it’s purpose it to repeat a set of tasks. Basically, you could code the same thing 10 times or use a loop to repeat the action 10 times. In WordPress, loops are used to get each blog article, or piece of information from the database, then read it out in HTML. This is how you see multiple articles presented on your blogs homepage without the code being in the template for each article. “The Loop” will generally only be on the index.php page of your template.
Finding the loop…
Every PHP programmer will program their template differently which means each loop is different. to combat this I’m going to attempt to arm you with the basics of PHP so that you can understand the workings of the code and find “the loop”.
Reading PHP
Lets start with separating the PHP from the HTML. It is important to recognise the difference between PHP and HTML, PHP being what’s known as a “Server-Side Language” and HTML being a “Client-Side Language”. PHP is run on the server, hence the term “Server-Side Language” – All PHP scripts are read by the server before any information is sent to the web browser for the “client” to see. HTML being “Client-Side” is read by the web browser on the clients side – using their computer resources, not the servers. “Server-Side” scripting will always be processed first on the server, then the information will be sent the “Client-Side” so it can present the information to you.
Finding the PHP is fairly easy. All PHP is enclosed between either of the following:
<?php // PHP script here ?><? // PHP script here ?>
Both <? php & <? do the exact same thing, just one is shorter than the other. ?> will signal the end of a set of PHP scripting. So to find “the loop” you need to look within these.
The start of the loop!
The proper term for the most commonly used “loop” in WordPress is a “while loop”. The most commonly used “while” codes will look like this:
while (have_posts()) : the_post();
if (have_posts()) : while (have_posts()) : the_post();
This is the start of “the loop”. It’s effectively telling the server “while there is new posts, do the following”. Not too different to standard English. The “if” on the second code is first asking “if there is a post, then do the while loop”.
It might be an idea to mark this spot for reference, so after the PHP script put a HTML comment like follows:
<?php while (have_posts()) : the_post(); ?>
<!-- Start of the loop -->
The end of the loop!
Now we’ve found the start of “the loop”, we need to find the end. This should always look as follows:
endwhile;
This will end the content that is being “looped”.
Lets mark the end of “the loop” with a HTML comment once more but this time above the PHP script like follows:
<!-- End of the loop -->
<?php endwhile; ?>
Okay so now you have found “the loop” the content within where you have marked is inside the loop, anything outside this script area is “outside the loop”. HTML within this loop will behave as normal HTML however it is just repeated multiple times.
So there we have it – finding “the loop” in a nutshell. “The loop” will generally only be on the home page and there should only be one loop, if you find multiple loops, use your HTML knowledge to find which is the correct loop for what you are trying to do.

Excellent post, this makes understanding the loop very clear now. I was lost when reading WordPress tutorials as to what in and out of the loop meant. Great article! The only question I have is, why can’t it be written in normal english