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?

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.

  • 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 :/ – PercentSharp Jan 4 '16 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 – PercentSharp Jan 4 '16 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 '16 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 – PercentSharp Jan 4 '16 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! – PercentSharp Jan 13 '16 at 18:06

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.