Technote

Themes & plugins Intro

Series Making a theme feel like your brand Part 2 of 8

Building a child theme: one header line and the load order

Two files is all it takes. Get the Template header line or the stylesheet load order wrong, though, and no amount of CSS will change the screen.

A child theme starts as two files: style.css and functions.php. Both are short to begin with, and between them there are exactly two places people go wrong.

The folder and the style.css header

Create a new folder under wp-content/themes/. The convention is the parent folder name with -child appended. Inside it, create style.css with a comment block at the very top.

/*
Theme Name: Acme Child
Template:   acme
Version:    1.0.0
*/

The Template line decides everything here. Its value must be the parent theme’s folder name, not the display name shown in the admin, and the capitalisation has to match exactly. Get it wrong and WordPress cannot find the parent — the theme list shows a missing-parent warning and refuses to activate it.

If you want a thumbnail in the theme list, drop a screenshot.png into the same folder. Its absence changes nothing functionally.

Load order — where most people get stuck

A child theme’s style.css is not loaded automatically. Older tutorials tell you to pull in the parent with @import; do not. An @import forces the browser to finish reading the first file before it even requests the second, which delays the moment anything appears on screen.

Use WordPress’s own style registration in functions.php instead. The part that matters is the third argument: the dependency array.

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'acme-child',
        get_stylesheet_uri(),
        [ 'acme-parent' ],   // the handle the parent registered
        '1.0.0'
    );
}, 20 );

Naming the parent handle as a dependency makes WordPress print the parent stylesheet first and yours after it. That ordering is the premise of the next few parts: when two rules have the same specificity, the later one wins.

The parent’s handle name differs by theme. Search the parent’s functions.php for wp_enqueue_style and the first argument is the name you want. If the parent never registers its own style.css, register it yourself from get_template_directory_uri() first and depend on that.

Four steps to a child theme — the third one sets the ordering

What to check after activating

Activating a child theme means WordPress now treats it as a different theme. Customiser values, menu locations and widget placements set against the parent frequently do not carry across. Nothing has been deleted; the settings simply do not exist yet under the new theme, which is why activating before you have built up a lot of content is far easier.

Straight after activating, check three things: does the site still look identical to the parent (proof the stylesheet loads), are the menus in place, and does an obvious test rule added to the child CSS actually take effect. That last check is the quickest way to verify your load order.

If you would rather hand the tidying over, our process page publishes the procedure, and related articles live in the Themes & plugins archive.

Next part

With a child theme in place, the next question is what goes where. Part three draws the line between the Customiser and CSS — and the criterion is not taste, it is whether the next person can find it.

More on this topic

All technotes

Themes & plugins Practical

Decide the editable regions before you design them

A design the CMS cannot express stays up for negotiation long after it ships. Deciding what editors may change, first, removes the negotiation entirely.

Designers 6 min read

₩270,000 · Join the program