SponsoredHosinger Special Offer

WP WordPress Theme Development

Build classic and block WordPress themes from scratch: the template hierarchy, The Loop, the_title() and the_content(), template parts, menus, the Customizer, child themes and theme.json.

Child Themes

WordPress Theme Development Lesson 27 of 30 ~3 min read

Overview

A child theme is a small theme that inherits everything from a parent theme and overrides only what you change, so you can customise a theme without your edits being wiped out the next time the parent is updated.

Why not edit the parent directly?

When the parent theme receives an update — a security fix, a new WordPress feature — WordPress replaces its whole folder. Every line you changed is gone. A child theme keeps your changes in a separate folder that updates never touch.

Creating a child theme

Create wp-content/themes/gdc-starter-child/style.css:

/*
Theme Name:  GDC Starter Child
Template:    gdc-starter
Version:     1.0.0
Text Domain: gdc-starter-child
*/

/* Your overrides go below. */
.site-title {
    letter-spacing: -0.02em;
}

Template: is the line that makes it a child theme. Its value is the parent's folder name, not its display name.

Loading both stylesheets

Create gdc-starter-child/functions.php. Load the parent stylesheet first, then the child's, declaring the parent as a dependency so the order is guaranteed:

<?php
function gdc_starter_child_styles() {
    $parent = wp_get_theme( 'gdc-starter' );

    wp_enqueue_style(
        'gdc-starter-parent',
        get_template_directory_uri() . '/style.css',
        array(),
        $parent->get( 'Version' )
    );

    wp_enqueue_style(
        'gdc-starter-child',
        get_stylesheet_uri(),
        array( 'gdc-starter-parent' ),
        wp_get_theme()->get( 'Version' )
    );
}
add_action( 'wp_enqueue_scripts', 'gdc_starter_child_styles' );
Tip: Check the parent first: many parent themes already enqueue their stylesheet with get_template_directory_uri(). In that case, loading it again in the child creates a duplicate — enqueue only the child stylesheet.

Template vs stylesheet functions

This is where those two function families finally matter:

FunctionWith a child theme active, points to
get_template_directory() / _uri()The parent theme
get_stylesheet_directory() / _uri()The child theme
get_stylesheet_uri()The child's style.css

Overriding templates

Copy any template file from the parent into the child — say single.php — and edit the copy. WordPress checks the child folder first. Files you do not copy keep coming from the parent.

Template parts work the same way. Copy just template-parts/content-card.php to change the post cards and nothing else. This is why lesson 15 recommended building with template parts: they give child themes small, precise override points.

functions.php is different

The child's functions.php does not replace the parent's. Both load — the child's first. That is why the parent wraps functions in if ( ! function_exists() ): the child can define gdc_starter_posted_on() first, and the parent then skips its own version.

<?php
// gdc-starter-child/functions.php
// Defined before the parent loads, so the parent's version is skipped.
function gdc_starter_posted_on() {
    printf(
        '<span class="posted-on">%s</span>',
        esc_html( get_the_date() )
    );
}

For behaviour added with hooks, remove the parent's callback instead. The parent's functions are defined by the time after_setup_theme runs:

<?php
function gdc_starter_child_adjustments() {
    remove_action( 'wp_enqueue_scripts', 'gdc_starter_conditional_assets' );
}
add_action( 'after_setup_theme', 'gdc_starter_child_adjustments' );

Practice

  • Create gdc-starter-child with the two files above and activate it. The site should look identical.
  • Override template-parts/content.php in the child and change one detail.
  • Replace gdc_starter_posted_on() from the child, then update the parent's version number and confirm your change survives.
Create a free account to save which lessons you've finished. Save my progress