6

I've created a child theme and the main style.css works perfectly fine. However, the parent theme has another stylesheet which I want to import and create the same for child theme and use it instead.

Parent theme structure - ./woocommerce/woo.css
Child theme structure - ./woocommerce/woo.css (Manually created)

Now, I enqueued both the stylesheets in the child theme's function.php as below.

function fruitful_load_parent_stylesheets() { wp_enqueue_style( 'layout', get_template_directory_uri() . '/woocommerce/woo.css' ); } add_action( 'wp_enqueue_scripts', 'fruitful_load_parent_stylesheets' ); function fruitful_load_child_stylesheets(){ wp_enqueue_style( 'woo', get_stylesheet_directory_uri() . '/woocommerce/woo.css'); } add_action('wp_enqueue_scripts', 'fruitful_load_child_stylesheets');

Now, if I add a style to the child theme's woo.css, it doesn't work until I !important it.I just don't want to go doing it on every style I add.

is

Improve this question
1
  • Please have a look at this comment Commented Feb 23, 2016 at 16:40

3 Answers 3

Reset to default
5

Your child theme's stylesheet will usually be loaded automatically. If it is not, you will need to enqueue it as well. Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it.

/** * Enqueue theme styles (parent first, child second) * */ function wpse218610_theme_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/woocommerce/woo.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/woocommerce/woo.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'wpse218610_theme_styles' );

Note: take a look in the Theme Developer Handbook for some extra information.

Improve this answer
1
  • This worked after I commented out the enqueue of woo.css in the parent theme's functions.php. I'll accept this answer. Thanks! Commented Feb 23, 2016 at 18:32
9

Perhaps you can try adding a priority value to each add_action to make sure that one executes before the other.

add_action( 'wp_enqueue_scripts', 'fruitful_load_parent_stylesheets', 10 ); add_action('wp_enqueue_scripts', 'fruitful_load_child_stylesheets', 20 );

WordPress Codex add_action()

Improve this answer
3
  • Didn't work. Here's the link to the screenshot of inspect element - i.imgur.com/Mb34NJa.png The third block is from the child theme's woo.css while the first two are from the parent theme's. I don't know why they're being loaded twice. Commented Feb 23, 2016 at 17:53
  • 2
    Setting the priority worked for me. I had to set it higher than 10 for it to "overtake" the parent theme's enqueue. Commented Mar 22, 2018 at 15:07
  • for me too - I can now override settings of my parent theme (purchased template) Commented Mar 25, 2020 at 10:49
3

I got to load child theme later like below. I had to dequeue & deregister parent style, then enqueue parent style & child style. Hope this helps

Parent functions.php has 

add_action('wp_enqueue_scripts', 'load_parent_style', 10); function load_parent_style() { wp_enqueue_style('parent-theme-style'); // parent theme code }

Child functions.php has

add_action('wp_enqueue_scripts', 'load_child_style', 20); function load_child_style() { //register & enqueue parent with new name wp_register_style('parent-style', $url, array($deps)); wp_enqueue_style('parent-style'); // dequeue & deregister parent's theme handle wp_dequeue_style('parent-theme-style'); // from parent theme wp_deregister_style('parent-theme-style'); // register & enqueue child style wp_register_style('child-style', get_stylesheet_uri(), array('parent-style')); wp_enqueue_style('child-style'); }
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.