0

I already have a child theme and a new style.css for it, but CSS changes in my child theme's style.css don't do anything because the parent theme's different CSS stylesheets come from a "CSS" folder. I was just told to 'enque a new style,'-- does this mean write a new @import rule?

What do I need to add to my child theme's style.css to make my CSS changes actually work?

I have tried including @import url("../parenttheme/style.css"); and @import url("..parenttheme/parentthemeCSSfolder/style.css"); -- neither worked.

UPDATE: After reading a bunch of threads and going through the codex more slowly, my functions.php now look like:

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'css parent', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style( 'css min', get_template_directory_uri() . '/css/style.min.css' );
    wp_enqueue_style( 'css blue', get_template_directory_uri() . '/css/style-blue.css' );
    wp_enqueue_style( 'css blue min', get_template_directory_uri() . '/css/style-blue.min.css' );
    wp_enqueue_style( 'css green', get_template_directory_uri() . '/css/style-green.css' );
    wp_enqueue_style( 'css green min', get_template_directory_uri() . '/css/style-green.min.css' );
    wp_enqueue_style( 'css orange', get_template_directory_uri() . '/css/style-orange.css' );
    wp_enqueue_style( 'css orange min', get_template_directory_uri() . '/css/style-orange.min.css' );
    wp_enqueue_style( 'css violet', get_template_directory_uri() . '/css/style-violet.css' );
    wp_enqueue_style( 'css violet min', get_template_directory_uri() . '/css/style-violet.min.css' );
    wp_enqueue_style( 'css yellow', get_template_directory_uri() . '/css/style-yellow.css' );
    wp_enqueue_style( 'css yellow min', get_template_directory_uri() . '/css/style-yellow.min.css' );
 wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' )
    );
}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

I still have not found a solution. The CSS changes I'm making in my child's style.css are overwritten (inspect element shows that they are applied but the parent theme's stylesheet is applied afterward). What am I doing wrong?

1 Answer 1

0

I was just told to 'enque a new style,'-- does this mean write a new @import rule?

No, it doesn't. And in fact that is the worst way to include new stylesheets as it causes page load delays. What you want to do is something like this (straight from the Codex):

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Of course, your path-- this part, get_template_directory_uri() . '/style.css'-- may need to be different because it will need to match the location of the parent theme stylesheet(s)-- though the main stylesheet should be in the root of the theme's directory right where that example points. You will need to enqueue each of the theme stylesheets in that way.

All of this, of course, assumes that the theme does not have its own stylesheet loader (which is bad form but happens a lot) and operates as a well behaved WordPress theme should.

6
  • I poked around a bit more and figured out how to enque additional stylesheets thanks to similar thread on SE -- but I've still not clearly found how to enque stylesheets located in a parent theme's css directory :/ Jan 4, 2016 at 1:01
  • Figured out: <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'css parent', get_template_directory_uri() . 'css/style.css' ); wp_enqueue_style( 'css min', get_template_directory_uri() . 'css/style.min.css' ); wp_enqueue_style( 'css blue', get_template_directory_uri() . 'css/style-blue.css' ); wp_enqueue_style( 'css blue min', get_template_directory_uri() . 'css/style-blue.min.css' ); ... } for every parent stylesheet, no cigar Jan 4, 2016 at 1:11
  • Are the stylesheet loading? If they do, the problem is with your selectors not with enqueueing the stylesheets.
    – s_ha_dum
    Jan 4, 2016 at 5:55
  • It does seem that the stylesheets are now loading as they are being overwritten. Do you see anything inherently wrong with my selectors now? Also: Another person advised I removed spaces and replace with dashes, so that has been done (does not resolve my confusion) @s_ha_dum Jan 4, 2016 at 6:43
  • I tried renaming the enqueue styles again...still nothing. Do you have a hunch as to what is wrong with the selectors? Thanks! Jan 13, 2016 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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