WordPress Child Themes – Mastering Advanced WordPress Development Series

WordPress Hooks and Filters – Mastering Advanced WordPress Development Series
WordPress Child Themes – Mastering Advanced WordPress Development Series

Learn how to create a custom WordPress theme using a child theme. This step-by-step guide explains what child themes are, why they're useful, and how to create one effectively.

You found a theme that’s almost perfect. The layout works, the features are there, but a few things bug you: a color here, some spacing there, maybe a template that needs to behave differently. So you crack open the theme files and start editing.

Then an update lands, overwrites everything, and your changes are gone.

A child theme is how you avoid that trap. It inherits everything from a parent theme, then lets you layer your own changes on top without touching the original. When the parent updates, your work survives. This piece in the Mastering Advanced WordPress Development series walks through building one from scratch.

Part 1: What are WordPress child themes?

A child theme is a theme that borrows its guts from another theme, the parent. You activate the child, but it leans on the parent for most of its templates and functions.

The point is safety. You customize design and behavior without editing parent files directly, so a parent update can’t wipe your work. You also skip building from zero, since everything the parent already does keeps working. You’re only writing the parts you want to change.

Part 2: Creating a WordPress child theme

Four steps. None of them are long.

Step 1: Create a new folder in your “themes” directory

Make a new folder in your themes directory, usually at "/wp-content/themes/". Name it something clear, like the parent’s slug with -child on the end.

Inside it, create a file called "style.css". That file tells WordPress your child theme exists and which parent it belongs to.


Step 2: Add the necessary code to your “style.css” file

At the top of "style.css", add a header comment. Here’s the minimum:

PHP
<?php
/*
Theme Name: My Child Theme
Template: parent-theme-folder-name
*/

Swap “My Child Theme” for your theme’s name. The Template line is the one that matters most: set it to the exact folder name of the parent theme. That link is what makes this a child theme instead of a broken standalone one. Get it wrong and WordPress can’t find the parent.


Step 3: Load the parent theme’s styles

Here’s the step older tutorials get wrong, so read carefully. WordPress loads your child’s style.css automatically, but it does not load the parent’s. If you stop at Step 2, your site shows up unstyled.

You’ll see old guides tell you to pull in the parent stylesheet with an @import line inside style.css. Don’t. The WordPress Theme Handbook flags @import as the outdated approach because it slows down how stylesheets load. The current method is to enqueue both stylesheets from a functions.php file in your child theme:

PHP
<?php
add_action( ‘wp_enqueue_scripts’, ‘my_child_enqueue_styles’ );
function my_child_enqueue_styles() {
	wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
	wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( ‘parent-style’ ) );
}

get_template_directory_uri() points at the parent, get_stylesheet_directory_uri() points at your child. Listing 'parent-style' as a dependency makes the parent load first, so your rules win.

One thing worth knowing: functions.php in a child theme is additive. It runs alongside the parent’s, loading just before it, rather than replacing it. That’s the opposite of every other template file, where the child’s copy overrides the parent’s. Which brings us to the next step.


Step 4: Override templates by copying them (optional)

Want to change a specific template, like the header? Copy that file from the parent into your child folder, keeping the same name, then edit the copy. WordPress uses the child’s version instead of the parent’s, and the original stays untouched.

Only copy what you’re actually changing. Files you don’t override keep coming from the parent, which is the whole point.


Step 5: Activate your new child theme

In the dashboard, go to "Appearance" > "Themes". Your child theme shows up next to the parent. Hit “Activate” and you’re running it.

Wrapping up

That’s the whole shape of it: a folder, a style.css with the right Template header, a functions.php that enqueues both stylesheets, and copies of any templates you want to change. Small footprint, and your customizations ride out every parent update.

Next time you’re tempted to edit a theme file directly, don’t. Spin up a child theme and change it there instead.

1 thought on “WordPress Child Themes – Mastering Advanced WordPress Development Series”

Leave a Comment

Your email address will not be published. Required fields are marked *


Scroll to Top