Technote

Themes & plugins Intro

Series Child theme development in practice Part 2 of 8

Load order: declare a dependency instead of reaching for !important

Most "my CSS does not apply" cases are a child stylesheet loading before the parent. Declaring a dependency guarantees the order and removes the need to force anything.

You write styles in the child theme and the screen does not change. Open the inspector and your rule sits there struck through, overridden by the parent. This is the moment people reach for !important, which covers the symptom rather than the cause. The cause is usually one thing: the child stylesheet loaded before the parent.

Equal specificity means the later rule wins

When two selectors have identical specificity, CSS takes whichever declaration appears later. The parent’s .site-header a and the child’s .site-header a are exactly equal, so the contest is decided purely by load order. Fix the order and you never need to force anything; force it instead and you will fight the same fight on the next rule.

That is the real cost of forcing. One use requires another to override it, and eventually the file is nothing but declarations trying to beat each other. At that point you can no longer read the code and predict what applies.

Same visual result — very different code left behind

The dependency array is what guarantees order

The third argument to wp_enqueue_style() is the list of handles that must come out before this one. Name the parent handle there and WordPress works out the order for you, so it holds regardless of which hook priority you happened to pick.

<?php
add_action( 'wp_enqueue_scripts', function () {
    $dist = '/assets/dist/main.css';

    wp_enqueue_style(
        'mytheme-main',
        get_stylesheet_directory_uri() . $dist,
        [ 'parent-style' ],                                  // the line that guarantees order
        (string) filemtime( get_stylesheet_directory() . $dist )
    );
}, 120 );

You need the parent’s actual handle first. Reading the parent’s enqueue code is the reliable route; in a hurry, dumping wp_styles()->queue lists every handle on the current screen. A handle that does not exist is silently ignored in a dependency array, which buys you no guarantee at all — so check the name rather than assuming it.

Do not mix up the two directory functions

This is the most frequent child theme mistake. get_template_directory_uri() returns the parent path; get_stylesheet_directory_uri() returns the child path. Point at a child file with the parent function and you get a 404, then misread a completely missing stylesheet as a specificity problem.

Enqueue review — get the top four right and ordering problems mostly disappear

Do not skip the version argument either. Using the file modification time means the URL changes exactly when the file does, so browser caches refresh on their own. A hard-coded string produces the “only I see the old page” state after a deploy, because bumping the number by hand is the step everyone forgets.

How to confirm it

Look at the order of the link tags in the page source. If the parent stylesheet sits above the child, you are done. Scripts follow the same rule with one bonus: a declared dependency adjusts not just the order but the position too, so code that depends on jQuery is safe to move to the footer.

How asset weight relates to first render is covered in the Performance archive, and you can see what a site actually downloads with the diagnostic in our free tools.

Next part

With styles applying, markup is next. As screens multiply you start copying the same card or header into a second file, and that copy will drift. The next part is about template parts.

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