Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Jaco Burger
Jaco Burger
20,807 Points
Posted by Jaco Burger
Jaco Burger
20,807 Points

Parent theme CSS getting precedence over Child theme css. wp_enqueue_scripts doesn't seem to do the trick.

Hi guys

So currently my parent theme css is taking precedence over my child theme css. I've read that I have to enqueue them in the child theme's function.php, here is what I did :

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/css/child-style.css',
        array('parent-style')
    );
}

Still, that doesn't seem to be doing anything, am I missing something? Thanks!

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Your code looks good to me. There are a few things that might be happening. Can you load the page and do view source and copy everything between your head tags and paste it here? I want to see the order everything is getting loaded. Thanks!

P.S. Please look at the Markdown Cheatsheet for instructions on how to properly post code to the forum. I fixed your question's code for you.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Jaco Burger is asking why his parent theme's styles are overriding his child theme's styles, despite the fact that he is loading them the recommended way using wp_enqueue_style in his child theme's functions.php file.

Jaco Burger
Jaco Burger
20,807 Points
Jaco Burger
Jaco Burger
20,807 Points 
          <link rel="stylesheet" id="parent-style-css" href="http://localhost/nissan/wp-content/themes/automotive/css/style.css" type="text/css" media="all">
<link rel="stylesheet" id="child-style-css" href="http://localhost/nissan/wp-content/themes/automotive-child/css/child-style.css" type="text/css" media="all">
<link rel="stylesheet" id="style-css" href="http://localhost/nissan/wp-content/themes/automotive/css/style.css" type="text/css" media="all">

Hi Colin. I've investigated, it looks like it's loading the main style sheet two times, once as the defined 'parent-style-css' and once as a default.

So there must be a way to tell WP not to load the default style sheet without me calling it I guess. Thanks

Jaco Burger
Jaco Burger
20,807 Points
Jaco Burger
Jaco Burger
20,807 Points

Man you're a genius! It makes perfect sense really. Mind pasting your answer so that I can make it best answer and close this issue?

Thanks for the help!

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

I moved the comment to answer. Glad you got it working!!! Was it just called style like I guessed?

Jaco Burger
Jaco Burger
20,807 Points
Jaco Burger
Jaco Burger
20,807 Points

Yeah, it was just called 'style'.

1 Answer

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Try going into your parent theme's functions.php and find the function that enqueues the parent stylesheet. Take note of what name they give the stylesheet, which is the first argument in the wp_enqueue_style call, which is a string. Judging by the id on the stylesheet tag, I think it will just simply be 'style'.

Remove your call to enqueue the parent style in your function, and change the name of the dependency in child style enqueue call to the string you found in the parent theme's functions file. So if it really was just called style like I suspect, your function should now look like this:

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/css/child-style.css', array('style'));
}
?>