My WordPress site uses a theme that is a child of a parent theme. As required, both themes have style.css files. However, as far as I can tell WordPress only provides the mechanism to load the child theme style.css file. How do the parent theme styles get loaded? Is it necessary to manually import the parent theme's style.css file into the child style.css file?
4 Answers
At the top of your child themes style.css add:
@import url("../twentyeleven/style.css");
Obviously replace twentyeleven with your parent themes folder.
2016 - This practice has now been replaced by declaring the 'Template' in your theme stylesheet header:
Template: twentyfifteen
-
OK- what I thought, just wanted to make sure that's the only way.. - thanks– YarinCommented Sep 13, 2011 at 18:58
-
1"using @import: this is no longer best practice." - see codex.wordpress.org/Child_Themes– TaraCommented Mar 19, 2015 at 17:48
-
1So you came back 3 1/2 years to downvote it? In September 2011 it was the expected way to build child themes for WordPress. Commented Mar 24, 2015 at 13:58
-
1@AlexOlder StackExchange isnt just here to help an individual in the moment they post their question. It is for all people over the course of years. It is common and encouraged to keep answers up-to-date, or to add a disclaimer that the answer is no longer relevant. If someone comes to this page expecting to learn the best <insert current year> way to add the parent's CSS (as indeed, I did), your answer would be misleading. meta.stackexchange.com/questions/11705/…– JeffCommented Sep 15, 2016 at 19:15
The process is simple, you can just create a functions.php file in your child theme directory and call the parent theme style:
Put the code!
function child_assets(){
wp_enqueue_style( "parent-style" , get_parent_theme_file_uri( '/style.css' ) );
}
add_action( "wp_enqueue_scripts", "child_assets" );
-
1Yes, that would work too . You don't need the leading / on /style.css though, but it's fine either way.– RupCommented Aug 15, 2021 at 12:01
In functions.php also load parent theme
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles()
{
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
You can call the parent css as a separate file in your theme header.php Something like
<link href="<?php echo get_stylesheet_directory_uri(); ?>/css/css.css" rel="stylesheet">
Depending on various factors it may be better to copy and paste the parent css into your child css file, and thus no need to import it at all. Saves http requests etc.
-
this works & thus answers the question. If you dont like the application you could explain in a comment– JonCommented Aug 11, 2015 at 6:31