The Main Index Template in WordPress

By Lisa Sabin-Wilson

The Main Index template drags your WordPress blog posts out of the MySQL database and inserts them into your site. This template is to your blog what the dance floor is to a nightclub — where the action happens.

The filename of the Main Index template is index.php. In the default Twenty Fourteen theme, you can find it in the /wp-content/themes/twentyfourteen/ folder.

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 blog name and tagline, for starters. Without the call to the Header template, your blog looks something like this.

image0.jpg

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

  • get_template_part( ‘content’, ‘get_post_format’ ); — This function calls in the template file named content.php as well as prepares the theme to accept special templates for a feature called Post Formats.

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

  • get_footer(); — This function calls in the template file named footer.php.

The Loop

The Loop in this case is a function that WordPress uses to display content on your site such as blog posts and page content. The Loop has a starting point and an ending point; anything placed in between is used to display each post, including any HTML, PHP, or CSS tags and codes.

When you understand the common use of the WordPress Loop, you can begin to push the envelope a bit further and use variations to suit your needs. This common use displays your posts in chronological order, starting with your most recent post and followed by less recent posts, ordered by date.

The basic and most common use of The Loop in WordPress is to pull blog posts from the database and display them on your website. In the default Twenty Fourteen theme, you find the loop in the Main Index template (index.php) and it starts out with these four lines of code:

<?php
if ( have_posts() ) :
// Start the Loop.
while ( have_posts() ) : the_post();

At the bottom of the template, The Loop ends with this line of code:

<?php endif; ?>

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, it 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 the while and the endwhile repeats for each post that displays. The number of posts displayed is determined in the settings section of the WordPress Dashboard.

Misplacement of the while or endwhile statements 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 blog post information from the database and return it to the blog page. The end of The Loop is like a traffic cop with a big red stop sign.

You can set the number of posts displayed per page in the Reading Settings page on the WordPress Dashboard. The Loop displays only the number of posts per page that you’ve set.

The big if

PHP functions in a pretty simple, logical manner, making decisions based on questions and answers. PHP deals with three basic variables:

  • if

  • then

  • else

The basic idea is this: IF this, THEN that, or ELSE this.

If your blog 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:

<?php while (have_posts()) : the_post(); ?>

This code tells WordPress to grab the posts from the MySQL database and display them on your blog page.

Then The Loop closes with this tag:

<?php endwhile; ?>

In some themes, near the beginning of The Loop template you may see a template tag that looks like this:

<?php if ( ! have_posts() ) : ?>

The exclamation point (!) preceding the function: have_posts() means “does not.” So a translation of that template tag into plain English reads: If [this blog] does not have posts.

In the Twenty Fourteen theme, your blog meets that condition, WordPress skips The Loop and displays a message that no posts exist by calling in the content-none.php template part:

<header class="page-header">
<h1 class="page-title"><?php _e( 'Nothing Found', 'twentyfourteen' ); ?></h1>
</header>
<p><?php _e( 'It seems we cannot find what you are looking for. Perhaps searching can help.', 'twentyfourteen' ); ?></p>
<?php get_search_form(); ?>

WordPress displays the title Nothing Found, followed by the statement It seems we cannot find what you are looking for. Perhaps searching can help., which in turn is followed by the template tag to include a search box that lets users search your blog for more information.

Mixed within the template tags and functions, you find basic HTML markup. For example

<div id=””>
<h1>

and

<div class=””>