Theme development・Framing with templates

The template hierarchy — each URL gets its own file in charge

The top is front-page.php, a post is single.php, a list is archive.php — let's learn the "template hierarchy," WordPress's rule for choosing a file in charge for each page, only as much as a company site needs.

Right now the Shimaenagado theme displays every page with a single index.php. But in the finished form, we need different looks for the top, About, announcement list, and article detail. That’s where WordPress themes’ biggest rule comes in — the template hierarchy. It’s a correspondence table saying “for this URL, this file is in charge.”

How it works: WordPress searches by file name

Each time a page is opened, WordPress searches the theme folder in a fixed order of priority. It searches like this: “if a specialist handler exists, use them; if not, a more general handler; if no one at all, index.php.”

For example, for the detail page of a post (an announcement article):

Is there single.php? → if so, adopt it
    ↓ if not
singular.php? → if so, adopt it
    ↓ if not
index.php (the last line of defense)

When we earlier said “index.php is the last line of defense,” it was because it’s the endpoint of this way of searching.

The table of handlers used on a company site

The full template hierarchy is quite large, but the ones you’ll use first in practice are just these. Let’s memorize them by matching them to the finished Shimaenagado.

PageFirst-choice file in charge
Top pagefront-page.php
Static page (About)page.php
Post list (announcement list)home.php
Post detail (announcement article)single.php
Category-specific listcategory.php
Search resultssearch.php
Not-found page404.php
Last line of defenseindex.php

There are more specialized handlers too

The hierarchy has the property that “a more specific name takes priority.” For example:

  • page-company.php — a handler only for the static page whose slug is company (takes priority over page.php)
  • single-shohin.php — a handler only for the detail of post type shohin (we’ll use this later in the custom post type chapter)
  • archive-shohin.php — a handler only for the list of post type shohin

“A big net (index.php) → a net by kind (single.php) → a net that names it specifically (single-shohin.php)” — gradually finer nets take priority. Once you grasp this feeling, you don’t need to memorize the whole hierarchy table.

Summary of this lesson

  1. The template hierarchy = WordPress’s rule for searching for a file in charge for each kind of page. If no specialist handler exists, a more general handler → finally index.php
  2. On a company site, the ones you’ll use first are the six front-page / page / home / single / category / 404, plus index
  3. “A more specific name takes priority” — you can also make specifically-named handlers like single-shohin.php

Try it: name the file in charge

A warm-up before moving your hands. In the finished Shimaenagado, when you open the following pages, answer which is the first-choice file in charge.

  1. The top page (/)
  2. About (a static page)
  3. The detail of the announcement article “Summer New Sundries Fair”
  4. The article list for the “Events” category

(Answers: front-page.php / page.php / single.php / category.php)

If you got them all right, from the next lesson we’ll finally start mass-producing templates. First up is the header and footer common to every page.

FAQ

What's the difference between front-page.php and home.php?
front-page.php is only for the site's top page, and home.php is only for the post list (such as an announcement list). On a company site where the admin screen's 'Settings' → 'Reading' selects a static page as the top page, these two become separate pages with separate files.
Do I have to make all the files in the template hierarchy?
No. A page with no file in charge is displayed instead by a more general handler (ultimately index.php), so making just the files for the pages you need is enough.
Where can I check the whole hierarchy diagram?
The official WordPress Theme Handbook has a complete flowchart of the correspondence table. Search for 'wordpress template hierarchy' and you'll find it.