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
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
Share Improve this question asked Feb 23, 2016 at 16:13 nimsrulesnimsrules 2081 gold badge4 silver badges12 bronze badges 1- Please have a look at this comment – Mayeenul Islam Commented Feb 23, 2016 at 16:40
3 Answers
Reset to default 5Your 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.
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()
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');
}