How can I get this child theme stylesheet to properly load? Or if it is correct, why doesn't my child theme appearance match the parent?

Question

I've read the Codex article on child themes, and numerous StackExchange Q&As, but I've not been able to get this figured out. The impact is that my child theme does not exhibit the same styling as the parent theme, thus making it unusable.

I'm using the theme Nisarg as the parent, and have created the child using nisarg-child while also creating the proper headers in that style.css. There is no styling in this sheet.

If I have the parent active, a single instance of style.css loads:

<link rel="stylesheet" id="nisarg-style-css" href="https://mydomain/wp-content/themes/nisarg/style.css?ver=4.9.6" type="text/css" media="all">

Everything is as it should be.

If I activate the child theme, and use the code below as my function.php, I get three instances of style.css loaded:

<?php

function my_theme_enqueue_styles() {

    $parent_style = 'nisarg';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'nisarg-child-style', 
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

And the three instances:

<link rel="stylesheet" id="nisarg-css" href="https://mydomain/wp-content/themes/nisarg/style.css?ver=4.9.6" type="text/css" media="all">
<link rel="stylesheet" id="nisarg-child-style-css" href="https://mydomain/wp-content/themes/nisarg-child/style.css?ver=1.0.0" type="text/css" media="all">
<link rel="stylesheet" id="nisarg-style-css" href="https://mydomain/wp-content/themes/nisarg-child/style.css?ver=4.9.6" type="text/css" media="all">

If this is correct, my appearances are not.

Because the parent theme also has wp_enqueue_style( 'nisarg-style', get_stylesheet_uri() ); in its functions.php, I also tried the approach from this question. This does result in a single copy of each parent and child style sheets being loaded, but my theme still doesn't display correctly:

<link rel="stylesheet" id="nisarg-css" href="https://mydomain/wp-content/themes/nisarg/style.css?ver=4.9.6" type="text/css" media="all">
<link rel="stylesheet" id="nisarg-style-css" href="https://mydomain/wp-content/themes/nisarg-child/style.css?ver=4.9.6" type="text/css" media="all">

If this loading appears correct, what am I missing? What is causing the two themes to have differences in their appearance? And how do I fix it?

Answer 1

I think you need to declare the bootstrap dependency when you enqueue the parent stylesheet (bootstrap.css is enqueued by the parent theme).

The parent theme doesn't declare the dependency but enqueues style.css after bootstrap.css, so it "just" works. But when you change the order of the enqueue, the dependencies are broken. Use the third parameter of wp_eneuque_style() to declare dependencies and WordPress will take care of the order, not matter the order in the code.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

    wp_enqueue_style(
        'nisarg', // Handler/key
        get_parent_theme_file_uri( 'style.css' ), // URL
        ['bootstrap'] // Dependencies (bootstrap is enqueued by parent them)
    );

    wp_enqueue_style(
        'nisarg-child-style',  // Handler/key
        get_stylesheet_uri(), // URL
        ['nisarg'], // Dependencies
        wp_get_theme()->get('Version') // version
    );

}