How to maintain wp_enqueue_style dependencies set in parent theme style enqueuing

by

My parent theme’s style.css has a dependency on bootstrap.css, which is also part of the parent theme.

From parent themes functions.php:

wp_enqueue_style('bootstrap', get_template_directory_uri().'/css/bootstrap.min.css);
wp_enqueue_style('style', get_stylesheet_uri(), array('bootstrap'));

When using a child theme the parents style.css gets loaded first, despite it having a dependency on bootstrap.

My child’s style enqueuing function looks like this:

function child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', 'parent-bootstrap');
}

And even when setting a dependency when enqueuing the parent style, it seems to be ignored and the style.css is loaded before bootstrap

function child_enqueue_styles() {
    wp_enqueue_style( 'parent-bootstrap', get_template_directory_uri().'/css/bootstrap.min.css');
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', 'parent-bootstrap');
}

I’m not sure how to deal with this without altering the parent theme

1 Answer
1

I’m sure you missed it but the dependency parameter should be an array and not a string.

So your enqueue function should be:

function child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array('bootstrap'));
}

or:

function child_enqueue_styles() {
    wp_enqueue_style( 'parent-bootstrap', get_template_directory_uri().'/css/bootstrap.min.css');
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array('parent-bootstrap'));
}

Reference: wp_enqueue_style

Leave a Comment