Kermode

/ˈkɜːrmoʊd/
The Spirit Bear

Written by Gray Gilmore

I make websites for a living. I love CSS and building simple and modular stylesheets. Somewhere along the way I also turned into a Ruby developer. Life comes at you fast I guess. You can read my resume to learn about my journey so far.

You can find me as @graygilmore on several platforms:

Good ol' fashion email works, too: hello@kermode.co

You can subscribe to this blog via RSS: XML, JSON

Understanding WordPress' Index, Home and Front Page Templates

I love WordPress, it’s a fantastic solution for so many different projects. Having said that, there are times that you can really tell that it used to be a blogging platform. Some of its naming conventions (referring to all content as a post, for example) add a little confusion that should really be fixed.

When you are developing a theme from scratch for the first time, some of the template files that you need to create can be a little confusing. There are some that make sense, page.php is for your pages, easy! But there are two that I constantly see get mixed up and one that seems to be neglected:

It’s so important that you full understand the WordPress Template Hierarchy when building out your theme. A proper understanding of what WordPress is going to use when you load a page will help loads in your development stage.

So let’s talk a little bit about what each of these files are really used for.

index.php

This is not used for your site’s home page. Unlike the standard ‘index.html’ that we see when we build static sites, index.php has a completely different meaning to WordPress. I like to describe it thusly:

index.php is the catch all for WordPress. If a page gets hit and that proper template doesn’t exist, WP will fall back to index.php

You can think of it as a backup, or WordPress’ last ditch effort into displaying some content. Because of this, your index.php template should be generic and simple.

home.php vs front-page.php

At one point or another, this apparently seemed like a good idea to the WordPress team. It’s far too late to change it now, but having both a home.php and a front-page.php is… confusing.

WordPress has a great feature under Settings > Reading where you can set what your ‘Home Page’ is and what your ‘Blog Page’ is (this doesn’t have to be your ‘blog’ but anywhere you are using posts, example: news section). This is super handy and I utilize it on nearly every project.

Summary

Okay, so let’s see if we’ve cleared things up!

The index.php template is used as the fall back for all pages on your website. Using this for anything other than a fall back will lead to future complications.

The home.php template is used as your ‘Home Page’ by default, unless you have set a static page as your ‘Front Page’ in Settings > Reading. It can also be used as your ‘Blog Home’ if your blog (the area where the majority of your posts reside) is not your home page.

The front-page.php template is used as your ‘Home Page or ‘Front Page’ when you set a static page in the Settings > Reading area.

Hopefully this leaves your head with a few more hairs on it!