WordPress Theme Templates: Main Index and The Loop - dummies

WordPress Theme Templates: Main Index and The Loop

By Lisa Sabin-Wilson

Your WordPress 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 stand-alone 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 what the dance floor is to a nightclub — 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 — the CSS and the site name and tagline, for starters.

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

  • get_template_part( content, get_post_format() );: This function calls in the template content.php first, but if there are other content template files like content-image.php or content-video.php, the function will use one of the other template files, depending on what post format is being used.

  • get_sidebar();: This function calls in the template sidebar.php file.

  • 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, meaning that it retrieves anything contained in the header.php file and displays it. Now the good stuff starts happening. The Loop begins with the while (have_posts()) : bit. Anything between while and endwhile repeats for each post that appears. The number of posts that appears is determined in the Settings section of the WordPress Dashboard.

If your site has posts (and most do, even when you first install it), 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 meets that condition (that is, if it has posts), WordPress proceeds with The Loop and displays your posts; if it does not meet that condition (that is, it does not have posts), WordPress displays nothing.

When The Loop ends (at the endwhile), the index.php (Main Index) template executes the files for the sidebar and footer. Although it’s simple, The Loop is one of the core functions of WordPress.

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.

In your travels as a WordPress user, you may run across plugins or scripts with instructions that say something like this: This must be placed within The Loop. Understanding The Loop arms you with the knowledge you need for tackling and understanding your WordPress themes.

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. The Loop begins with PHP and then makes a request: While there are posts in my blog, display them on this page.

This PHP function tells WordPress to grab the post information from the database and return it to the site. The end of The Loop is like a traffic cop with a big red stop sign telling WordPress to stop the function completely.

You can set the number of posts displayed per page in the Reading Settings page (choose Settings→Reading) on the WordPress Dashboard. The Loop abides by this rule and displays only the number of posts per page that you’ve set.