WordPress Theme Development Basics: Required Files & Template Hierarchy

If you're new to WordPress theme development, it's important to understand a few basic concepts before you begin. In this post, we cover some WordPress theme development basics including required files and template hierarchy. WordPress Theme Basics: What is a WordPress Theme? [pullquote]A WordPress theme is simply a single file that references other blocks of content (pulled by PHP from the database) and places it inside an HTML structure.

Avatar photo
SolidWP Editorial Team

Published:Jul 14, 2017

Reading Time:6 min.

If you’re new to WordPress theme development, it’s important to understand a few basic concepts before you begin. In this post, we cover some WordPress theme development basics including required files and template hierarchy. wordpress theme development basics

WordPress Theme Basics: What is a WordPress Theme?

[pullquote]A WordPress theme is simply a single file that references other blocks of content (pulled by PHP from the database) and places it inside an HTML structure.[/pullquote] WordPress itself has no display structure, which is why you need a WordPress theme to display content. At a basic level, the following web development languages are used in the way a WordPress theme renders content on a website:
  • HTML – Provides the structure or frame for your website
  • CSS – Provides the style or customization of the frame/structure
  • PHP – The scripting language WordPress uses to communicate with the database and pass information
  • jQuery – Provides activity for the rendered page

The Two Files Required To Make a WordPress Theme

  • style.css – First, a WordPress theme needs a style.css file that serves two purposes:
    • To provide the meta-data to communicate to WordPress that this is a theme.
    • To style the HTML that exists on the other required file.
  • index.php – This file serves as the default or fall-back file (due to hierarchy; more on that in a bit) that serves up all the content for web browsers to render.

What Goes In the Two Required Files?

In the style.css file, we create some ‘comments’ or ‘meta-data’ to communicate with WordPress about our theme. At the very top of the style.csswe put the theme information: [code]/* Theme Name: New Theme Theme URI: http://newtheme.com Description: A description about the theme Author: Author Name Author URI: http://www.author.com Version: 1.0 Tags: responsive, black, white, columns, custom menu, etc. */[/code] In the index.php file, we simply put some HTML on the page. [code] <!DOCTYPE html> <html> <head> <title>My website</title> </head> <body> <h2>Content Title</h2> <p>I just built my very first WordPress theme from scratch!</p> </body> </html> [/code] That’s it. We don’t actually need any PHP yet. PHP will be used to pull content out of the database and place it into the correct HTML locations.

What Additional Files Could a WordPress Theme Have?

WordPress themes are made up of template files. These are PHP files that contain a mixture of HTML, Template Tags, and PHP code.
File / Template Purpose
style.css The main stylesheet. This must be included with your theme, and it must contain the information header for your theme. index.php
index.php The main template. If your theme provides its own templates, index.php must be present.
comments.php The comments template.
home.php The home page template, which is the front page by default. If you use a static front page this is the template for the page with the latest posts.
single.php The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.
single-.php The single post template used when a single post from a custom post type is queried. For example, single-books.php would be used for displaying single posts from the custom post type books. index.php is used if the query template for the custom post type is not present.
page.php The single page template. Used when a single page is queried. For this and all other query templates, index.php is used if the query template is not present.
category.php The category template. Used when a category is queried.
tag.php The tag template. Used when a tag is queried.
taxonomy.php The term template. Used when a term in a custom taxonomy is queried.
author.php The author template. Used when an author is queried.
archive.php The archive template. Used when a category, author or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.
search.php The search results template. Used when a search is performed.
attachment.php Attachment template. Used when viewing a single attachment such as a Media Library file.
404.php The 404 Not Found template. Used when WordPress cannot find a post or page that matches the query.

WordPress Template Hierarchy

Just about everything in WordPress has a parent or a child.
  • WordPress themes can have parent themes and child themes.
  • CSS has a hierarchy that flows through the entire website
  • Templates have a hierarchy, that once mattered can open up tons of opportunities for development.
The hierarchy of CSS can be a little convoluted, but here is the quick summary of the hierarchy of WordPress CSS files. It’s not always this simple, but this gives you an idea of what’s going on. 
WordPress CSS (this mainly deals with backend Admin areas)
-- Plugin CSS files
-- -- Parent Theme CSS files
-- -- -- Child Theme CSS files
-- -- -- -- Themes that support a final custom CSS Box

WordPress Template Hierarchy Basics

There is an order to how WordPress looks for a certain file before it displays the “template” and content. The flexibility of this hierarchy gives incredible power to WordPress theme developers. You can also read about Template Hierarchy in the WordPress Codex. The following is a look at WordPress template hierarchy and to what depth WordPress will look for a file/template. If the user arrives on a 404 page:
  • 404.php
  • index.php
If the user arrives on a search results page:
  • search.php
  • index.php
If the user arrives on a taxonomy page:
  • taxonomy-{taxonomyNAME}-{term}.php
  • taxonomy-{taxonomyNAME}.php
  • taxonomy.php
  • archive.php
  • index.php
If the user arrives on the homepage:
  • home.php
  • index.php
If the user arrives on the frontpage:
  • front-page.php (used for both latest posts or a static page in the Front page settings area of the Settings > Reading)
  • If no front-page.php it reverts to a regular homepage setting
If the user arrives on an attachment page:
  • mime.php (image.php / video.php / application.php)
  • type.php
  • mime_type.php
  • attachment.php
  • single.php
  • index.php
If the user arrives on a single post page:
  • single-{post-type}.php
  • single.php
  • index.php
If the user arrives on a single page page:
  • custom_template.php
  • page-{slug}.php
  • page-{id}.php
  • page.php
  • index.php
If the user arrives on a category page:
  • category-{slug}.php
  • category-{id}.php
  • category.php
  • page.php
  • index.php
If the user arrives on a tag page:
  • tag-{slug}.php
  • tag-{id}.php
  • tag.php
  • archive.php
  • index.php
If the user arrives on an author info page:
  • author-{author-nicename}.php
  • author-{author-id}.php
  • author.php
  • archive.php
  • index.php
If the user arrives on a date page:
  • date.php
  • archive.php
  • index.php
If the user arrives on an archive page:
  • archive.php
  • index.php

More on WordPress Theme Development

WordPress.org offers an a great, in-depth resource in their Theme Development Handbook. The WordPress Developer Course also covers WordPress theme development in more detail, including WordPress hooks an filters, working with the WordPress loop and more.

Author:

Avatar photoSolidWP Editorial Team

Each week, the team at SolidWP team publishes new WordPress tutorials and resources, including the Weekly WordPress Vulnerability Report. Since 2008, SolidWP has been dedicated to helping you build, maintain, and secure WordPress sites for yourself or for clients. Looking for iThemes?

Browse all of SolidWP's articles

Did you like this article? Spread the word:

Author:

Avatar photoSolidWP Editorial Team

Each week, the team at SolidWP team publishes new WordPress tutorials and resources, including the Weekly WordPress Vulnerability Report. Since 2008, SolidWP has been dedicated to helping you build, maintain, and secure WordPress sites for yourself or for clients. Looking for iThemes?

Browse all of SolidWP's articles