Themes & Template Hierarchy

45-60 minIntermediate

A WordPress Theme controls the visual presentation of your site. Understanding the Template Hierarchy (how WordPress chooses which template file to use) is essential for custom development. Child themes let you customize safely without losing changes when the parent theme updates.

Prerequisites

Access to theme files via FTP or Theme Editor
Basic PHP and HTML knowledge
Understanding of WordPress file structure

Step-by-Step Guide

Understand Theme Essentials

A theme is a collection of files that produce the graphical interface

Minimum required files: style.css (with theme header) and index.php

style.css: Contains theme metadata (name, author) plus CSS styling

index.php: Fallback template used if no more specific template exists

functions.php: Theme-specific PHP functions, hooks, and enqueues

Master the Template Hierarchy

WordPress uses a decision tree to choose which template file to load

It tries the most specific file first, falling back to more general files

Single Post: single-{post-type}-{slug}.php → single-{post-type}.php → single.php → index.php

Pages: page-{slug}.php → page-{id}.php → page.php → index.php

Category: category-{slug}.php → category-{id}.php → category.php → archive.php → index.php

Home: front-page.php (static) OR home.php (blog posts) → index.php

Memorize this pattern: WordPress tries specific first, then falls back to general

Create a Child Theme

A child theme inherits from a parent theme but allows safe customizations

Create a new folder in wp-content/themes/ named like: parentname-child

Create style.css with the required header (Template: must match parent folder name)

Create functions.php to enqueue both parent and child styles

Activate the child theme in Appearance > Themes

Example

/* style.css - Child Theme Header */
/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
Description: Child theme for Twenty Twenty-Four
Author: Your Name
Version: 1.0
*/

/* Your custom CSS goes below */

Enqueue Parent Styles Correctly

Add this to your child theme functions.php

This ensures parent styles load before child styles

Child styles automatically override matching parent selectors

Example

<?php
// functions.php - Child Theme Setup
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_theme_enqueue_styles() {
    // Load parent theme stylesheet
    wp_enqueue_style( 
        'parent-style', 
        get_template_directory_uri() . '/style.css' 
    );
    
    // Child style.css loads automatically after
}

get_template_directory_uri() = parent theme, get_stylesheet_directory_uri() = child theme

Override Template Files Safely

To customize a parent template, copy it to your child theme

WordPress will automatically use the child theme version

Example: Copy twentytwentyfour/single.php to twentytwentyfour-child/single.php

Edit only the child theme copy

Parent updates will not overwrite your customizations

Only copy files you need to modify - inherit everything else

Verification Checklist

Understand minimum theme requirements (style.css, index.php)
Can explain the template hierarchy for posts, pages, and archives
Child theme is set up with correct style.css header
Parent styles are properly enqueued in child functions.php
Can override parent templates by copying to child theme

Pro Tips

Use the Template Hierarchy diagram on developer.wordpress.org as a reference
Install the "What The File" plugin to see which template is being used
Child themes are THE single most important best practice for custom work
Template parts (get_template_part) let you reuse code across templates
Block themes use HTML templates instead of PHP - different hierarchy rules apply