Give priority to child theme stylesheet

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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.

Method 2

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

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply