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:
- index.php (misused)
- home.php (misused)
- front-page.php (forgotten)
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.
- home.php
- This can be used as your ‘Home Page’, but only if you haven’t set a ‘front page’ in the settings mentioned above. If you have set a front page, this template will be used for the page you designate to be the ‘Blog’ home, in that same setting area.
- front-page.php
- This is used only when you set a static page as your home page in Settings > Reading. I prefer always setting a static page as your home page. It doesn’t mean you can’t have dynamic content, it just means you get to use front-page.php!
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!