1

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

2

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.

  • This worked after I commented out the enqueue of woo.css in the parent theme's functions.php. I'll accept this answer. Thanks! – Nimsrules Feb 23 '16 at 18:32
4

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()

  • 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. – Nimsrules Feb 23 '16 at 17:53
  • Setting the priority worked for me. I had to set it higher than 10 for it to "overtake" the parent theme's enqueue. – Gavin Mar 22 '18 at 15:07
1

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');
}

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.