Child theme style issue after Hummingbird

After enabling HummingBird, my child theme style sheet started to load after the parent’s theme style, causing CSS overwriting. And I haven’t done any configurations to the Assets Optimization.

  • Adam Czajczyk
    • Support Gorilla

    Hello Lauren

    I hope you’re well today and thank you for your question!

    With the current “structure” the parent style(s) should actually be loaded before child’s style(s). In your child them you got two lines of code:

    wp_enqueue_style($parent_style, get_template_directory_uri() . '/css/theme.css');

    wp_enqueue_style('styles', get_stylesheet_directory_uri() . '/includes/styles/styles.css', array($parent_style, 'et-builder-modules-style'), '1.00');

    The first one uses “get_template_directory_uri()” function which always returns the URI of the root (parent) theme so you know that “parent-style” (/css/theme.css) will always be loaded from the parent theme.

    The second one uses “get_stylesheet_directory_uri()” function which returns URI for a currently active theme so in this case a child theme but there’s also a dependency defined, dependency being a parent style. And any style set as dependency is loaded by the WP core first. It therefore means that first the parent’s /css/theme.css should be loaded and then child’s “/includes/styles/styles.css”.

    I admit though that I’m not yet quite sure why it’s not following that with Asset Optimization disabled. I assume it’s somehow related to how your parent style is built (it seems to “complicate” style loading/dependencies a bit) but I’m not that familiar with its code.

    However, if it’s critical for you to load the child theme style first and only then parent style what you could do would be to change how the styles are enqueued and first remove the dependency from that second line (so the parent them wouldn’t be required to be loaded first) then try to move the parent style enqueue function below the child style enqueue line. You could also instead completely de-register parent styles, copy all of them (or just those necessary in child theme) to the child theme and only enqueue necessary styles from the child them at your desired order.

    If you have any follow up questions or additional information that I should take into account, let me know please and I’ll be happy to assist you further.

    Kind regards,

    Adam

  • Lauren
    • WPMU DEV Initiate

    I tried to remove the dependencies. It didn’t change anything for me, is there another way I could load the files using your CDN, without it switching around my stylesheet to come before the parents’ style sheet?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.