WordPress Theme Templates: Overview of Main Index and The Loop

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

Your theme is required to have only two files. The first is style.css the other is a Main Index file, known in WordPress as index.php. The index.php file is the first file WordPress tries to load when someone visits your site. Extremely flexible, index.php can be used as a standalone file or can include other templates. The Main Index template drags your posts out of the MySQL database and inserts them into your site. This template is to your website where all the action happens.

The first template tag in the Main Index template calls in the Header template, meaning that it pulls the information from the Header template into the Main Index template, as follows:

<?php get_header(); ?>

Your theme can work without calling in the Header template, but it'll be missing several essential pieces like the CSS (cascading style sheets) and the site name and tagline.

The Main Index template in the Twenty Ten theme calls in three other files in a similar fashion:

get_template_part( 'loop', 'index' );: This function calls in the template loop.php file.
get_sidebar();: This function calls in the template sidebar.php file. Not covered in this article.
get_footer();: This function calls in the template footer.php file.

The concept of calling in a template file using a function or template tag is exactly what the Main Index template does with the four functions for the Header, Loop, Sidebar, and Footer templates.

Generally, one of the important functions of the Main Index is to contain The Loop. In WordPress, The Loop is a function that WordPress uses to display posts and pages on your site. Any PHP or HTML that you include in The Loop will repeat for each of your posts and pages that it displays. The Loop has a starting point and an ending point; anything placed in between is used to display each post or page, including any HTML, PHP, or CSS tags and codes.

Here's a look at what the WordPress Codex calls "The World's Simplest Index":

<?php
get_header();
if (have_posts()) :
   while (have_posts()) :
    the_post();
    the_content();
   endwhile;
endif;
get_sidebar();
get_footer();
?>

First, the template starts by opening the php tag. Next, the template includes the header, by retrieving ves anything contained in the header.php file and displaying it. The Loop begins with the while (have_posts()) : bit. Anything between the while and the endwhile repeats for each post that displays. The number of posts that displays is determined in the Settings (choose Settings→Reading) section of the WordPress Dashboard.

If your site has posts, WordPress proceeds with The Loop, starting with the piece of code that looks like this:

if (have_posts()) :
   while (have_posts()) :

This code tells WordPress to grab the posts from the MySQL database and display them on your site. Then The Loop closes with this tag:

   endwhile;
endif;

Near the beginning of the Loop template is a template tag that looks like this:

if (have_posts()) :

To read that template tag in plain English, it says: If [this site] has posts. If your site has posts, WordPress proceeds with The Loop and displays your posts; if it does not meet that condition WordPress displays a message that no posts exist. When The Loop ends (at the endwhile), the index.php (Main Index) template goes on to execute the files for the sidebar and footer.

Misplacement of the while or endwhile statement causes The Loop to break. If you’re having trouble with The Loop in an existing template, check your version against the original and see whether the while statements are misplaced.

Many WordPress plugins or scripts have instructions that say something like this: This must be placed within The Loop. They mean this Loop, so pay particular attention when making these changes.

The Loop is no different from any other template tag; it must begin with a function to start PHP, and it must end with a function to stop PHP.