Beginners Guide to the WordPress Loop

There are many articles and tutorials on the web that cover the WordPress loop, the aim of this tutorial is to introduce the loop to complete beginners.

Why the Loop?

WordPress started life as a blogging platform, and blogs have a particular structure.

They have a main blogging page that contains the latest posts in chronological order (i.e based on date).

The purpose of the loop is to display these posts.

Where is the Loop?

The loop is part of your template files which are located under your wp-content/themes/theme-name folder.

The screen shot below shows the contents of the 2012 theme folder, and I’ve circled two template files index.php and page.php, but there are others.

2012-theme-folder-templates

How the templates are used/chosen is not important for understanding the loop.

But if you want to change the loop you will need to understand the templates and template hierarchy so that you change the correct template.

Understanding the Loop

To understand the loop you need to understand how WordPress displays pages and posts.

Here are the steps WordPress uses to decide what posts or pages to display on a page –

  1. When a visitor first clicks on or types a URL for a page that is part of your blog, WordPress starts by running a few core files.
  2. Starting with the index.php file ( in the root folder ) other files like the wp-config.php, wp-settings.php, etc. are loaded.
  3. WordPress runs the wp() function (in wp-includes/functions.php), This tells WordPress to:
    1. Parse the URL into a query specification using WP->parse_request()
    2. Convert the query specification into a MySQL database query, and run the database query to get the list of posts,then save the posts in the $wp_query object to be used in the WordPress Loop.
    3. Set up some variables for the WordPress Loop.
  4. WordPress figures out which template file to use according to the Template Hierarchy, and runs that file ( usually the index.php in your template folder),
  5. Generally, the template runs the WordPress Loop to print blog posts, or a static page.

Note: Above taken from the WordPress codex:

It isn’t important to understand all of the files that get loaded and what each file does at this stage.

It is important to realise that the process starts with a database query.

The database query is constructed from the url of the page being requested.

That is if a visitor requests the page:

http://www.mywebsite.com/beginners-guide-wordpress/

then the database query uses the page name beginners-guide-wordpress . to create a query and display the web page beginners-guide-wordpress from the database.

and if a visitor request the page:

http://www.mywebsite.com/wordpress101/

then the database query uses the page name – wordpress101 to display the web page wordpress101

The results of the query is a list of posts, if the page is the main blog page, or a single post/page if it is a request for an individual page or post.

The list of posts or single post is stored in a query object and the loop loops through this list, and extracts the page contents:

Here is the basic code for a standard loop :

<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
//
} // end while
} // end if
?>

The loop is simply:

  1. Do we have any posts? – if have_posts()
  2. If we do then get the current post – the_post()
  3. Move to next post until we have no more posts to display— while loop

You should also note that the loop doesn’t contain the database query, as the database query is done before the loop.

The code snippet shown above doesn’t display the post or any information about it, but the function call, the_post(), makes the post details available.

So here is an extended snippet when we do something with the post.

<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();

the_title();
the_content();

<?php }
}
?>

The call to the_title() will display the page/post title and the call to the_content() will display the actual content.

Usually you will see HTML code embedded in it for formatting so,for example, the title would be:

<h2><?php the_title(); ?></h2>

Real Loops

To finish we are going to look at a real loop taken from an older 2.0 version of WordPress.

I chose an older WordPress version because the loop is easier to understand as it includes the HTML that formats the post.

In newer versions this is hidden ( I’ll show you at the end).

wordpress-loop-example

The loop you should recognize highlighted in blue. You can see how the php code is interlaced with HTML code to give the post layout.

I’ve highlighted, in yellow, the code that gets the title, date, author, content, and comments.

These are the main elements you see on posts in almost all templates.

Here is a newer version of the loop taken from a modern template (2012 theme)

wordpress-template-example2

This is much more compact but hides what it does. I will cover this in a later post.

Summary

The job of the WordPress loop is to display a list of posts and is found in the page and posts templates.

The loop concept is used even if there is only one post to display.

Questions and Comments

If you have questions or would like to comment then please use the comments form below.

References:

Related Tutorials:

Save