loading parent styles using child theme

Child themes normally want the parent’s CSS loaded so they only need to override certain styles instead of recreating the entire set. Whether the child needs to also load the parent styles or not, assuming we actually do want the parent styles loaded, depends upon how the parent loads their styles to start with.

If the parent is loading its styles and that is not desired, the child can dequeue the parent style. The dequeue call must be done after the parent has enqueued. Do so by hooking in the child callback with a larger priority argument than that used by the parent. You also need the parent style’s handle in order to properly dequeue.

thanks for your reply.

i want the parent styles in addition to the child styles, so dequeue is not needed.

i don’t want the child theme to completely override all the parent styles which is what’s happening now.

i’ve tried it many many different ways. it’s not working for me, and i’d like to know how to get it working, please.

it’s not a caching problem bc i can see in the inspector that the parent styles are not being loaded.

it works on 2017 and GeneratePress themes (parent styles are not overridden and child styles are also loaded) but not when i make a simple theme of my own, using a bare-bones install of index.php, style.css, and screenshot.png.

2015 child styles load but not parent styles, so that’s not working even when i copy/paste code from theme handbook and edit accordingly.

i am following the directions carefully, although obviously i’m doing something wrong.

i’ve tried and tried and tried AND TRIED. i’ve tried every way described in the handbook plus as many variations as i can think of–nothing works.

i don’t want to give up. it’s supposed to work and i’d like to know how, if at all possible. altho i am getting discouraged and frustrated.

thank you for your help and patience, and happy thanksgiving if you celebrate.

with gratitude, L

Follow one of the twenty* model themes for the parent theme. For example, the relevant parts of twentysixteen (other enqueue code not shown):

function twentysixteen_scripts() {
	// Theme stylesheet.
	wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri(), array(), '20190507' );
}
add_action( 'wp_enqueue_scripts', 'twentysixteen_scripts' );

Note that it’s getting its stylesheet URI with get_stylesheet_uri(). The relevant child theme then should do similar to the second example you linked in your OP:

function wpt_enqueue_styles() {

    $parent_style = 'twentysixteen-style'; // This is the proper tag 'twentysixteen-style' for the Twenty Sixteen theme.

     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 ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'wpt_enqueue_styles' );

Note we are referencing the parent theme location by template, but the child by stylesheet. It’s important that the parent’s style is listed as a dependency for the child. This ensures the child loads later and takes precedence over other equivalent style rules.

• This reply was modified 4 years, 3 months ago by bcworkz. Reason: balance strong tags

thank you so much!

i’ll try it again. but that’s the exact code i’m using which doesn’t work for me.

very disappointing, frustrating, and discouraging esp when it’s taken directly from the handbook (and of course slightly edited for my install).

clearly i’m doing something wrong, and i’ve spent hours trying to solve it. but it just won’t work for me.

i’ve spent as long on other problems and have eventually gotten them working.

this one, however, sticks in my craw.

i’m very grateful for your help, please understand. i just wish i could succeed with this example.

i’m going to leave the thread open and get back when i start again from scratch.

gratefully yours, L

Does your template call wp_head(); or at least do_action('wp_head');(just before the closing </head> tag)? Enqueuing will not work without it.

you’re so kind and patient… thank you <3

i finally got loading parent and child style working.

good question about wp_head() and yes that was called before so, not sure what the problem was other than typical user error ??

this example is when parent uses get_stylesheet… function to enqueue.

i’d like to leave the thread open while i practice when parent theme uses get_template… function, if you don’t mind.

then i’ll enqueue both using is_child_theme conditional (a la GeneratePress).

i’ll move forward at that point and stop bugging you ??

thanks again!

i’m feeling much better about my efforts, thankfully.

i got all the examples working on my bare bones installation, including using a filter to turn off child styles enqueued in parent theme (a la GeneratePress).

i’m so appreciative for the WordPress community and folks like you manning the support forums <3

have a lovely evening <3

Glad to hear it’s all working! I can only imagine how frustrating this has been, though I’ve likely been at the same place some time back. It may not help at this point, but the trials you went through here will serve you well in the future. I’m confident you’ve learned more about debugging code than you realize. Happy coding!