0

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?

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
    );

}
  • Is this the line in the codex article I should have keyed on? If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies. Frankly, because it said 'child theme has more than one', I didn't understand I would have to declare the dependency of the bootstrap which is with the parent theme. Still a bit confused on that, as I only have one stylesheet in the child. – tim.rohrer May 27 '18 at 16:24
  • 1
    The issue is that the parent theme is not declaring the dependencies of its styles, but It should. Honestly, I would contact with the dev and would ask to fix It. The child theme shouldn't be worried about dependencies of parent theme styles. – cybmeta May 27 '18 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.