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?
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. 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:
/* 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. */
In the index.php file, we simply put some HTML on the page.
<!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>
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||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.|
||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:
If the user arrives on a search results page:
If the user arrives on a taxonomy page:
If the user arrives on the homepage:
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)
If the user arrives on a single post page:
If the user arrives on a single page page:
If the user arrives on a category page:
If the user arrives on a tag page:
If the user arrives on an author info page:
If the user arrives on a date page:
If the user arrives on an archive page:
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.