Once upon a time all that a WordPress Child Theme needed was to use an @import rule to bring in all the styles from the parent theme stylesheet. Evidently, that method still works as I’ve been using a couple of “old” child themes on live sites, until now.
Even so, it would be better to use updated and preferred methods for creating WP child themes. When The Codex says something is no longer best practice, we should pay attention.
Using @import to bring in other files costs us time. Nobody appreciates a slow site so any way that we can speed things up for our visitors is a good thing.
The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.
A child theme requires one file, style.css, declarations in which will override those of the parent theme, but now we need a second file, called functions.php, to enqueue the new stylesheet.
It’s not that confusing, don’t worry. 🙂
How To Create A Child Theme Stylesheet
Create a text file called style.css and keep this stylesheet in a folder named after your child theme.
At the very top of this so-called Child Theme Stylesheet insert the following lines in a multi-line comment. Of course, make sure to change all references to twentyfifteen to that of your theme:
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */
All the lines above are available for describing your child theme, but the only two required lines are Theme Name and Template. Make sure these declarations are inside the multi-line comment.
The beginning of the style.css file is called the stylesheet header.
If you’re interested in making themes available on WordPress.org for others to download and use, you’ll want to make sure your stylesheet header is as complete as possible.
Child theme names are suggested to include the parent theme name plus the word child. Here, the example used ‘Twenty Fifteen Child’ as the Theme Name.
The Description states the assumed, which is that this theme is a child theme for Twenty Fifteen. The description is a good place to provide keywords that further describe the child theme’s appearance or purpose so that those searching for your theme can find it.
Theme URI is the location where one could view or possibly download the theme.
The Author can leave their name and specify an Author URI so that others can contact them.
Template is the directory name of the parent theme. Here, the example uses the Twenty Fifteen Theme as the parent theme, so the Template name is “twentyfifteen“. Check the folder or directory name if you have questions whether to include a space, a hyphen, or neither in the template name.
Version will help everybody keep track of all the wonderful updates you’ll make to your theme. Perhaps you’ll benefit from using GitHub in that case?
Can’t find a reason to modify these two lines regarding licenses:
License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags should be terms that someone might use to find your theme, or perhaps notes to oneself, as to the theme appearance and its functions.
Finally, the Text Domain is a slug-style representation, all lower case with hyphens between words, of the child theme name. Specifying the text domain in this manner will help with language translation of your theme.
Below the stylesheet header you can place as much or as little CSS as you like to make your site look fabulous.
Once your stylesheet is in order you’re halfway done with making a child theme. So far, you should have a directory named for your child theme that contains a style.css file which includes the stylesheet header at the top as outlined above.
How To Enqueue The New Stylesheet
Now we need to create that second file, functions.php, and add it to the child theme directory. Copy the following into a new functions.php being careful that no whitespace precedes the opening PHP tag:
<?php //make sure no whitespace precedes the opening PHP tag
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
The add_action statement first specifies the name of the action that is being hooked, namely ‘wp_enqueue_scripts’, which can be used for queuing up both scripts and styles.
The second parameter of the add_action statement specifies the name of the function that we’re using, which is ‘theme_enqueue_styles’.
This function for queuing up the parent theme stylesheet typically needs just the one line.
The first parameter specifies the name of the stylesheet and the second parameter specifies the path to the stylesheet.
This example works fine when the parent theme has only one CSS file. A third (optional) parameter can be used in wp_enqueue_style() to specify all the CSS files that the child theme is dependent on and they would be named in an array. Read more about wp_enqueue_style() in the Codex.
The child style sheet should be automatically loaded, but if it’s not another callout to wp_enqueue_style() must be added to the functions.php file to specifically include it.
The Main Points: Child themes can be used in WordPress to easily modify an existing theme. We showed how to create a child theme and spelled out the necessary parts of the stylesheet header for describing a child theme. We also touched on why the old way of using @import to queue up the parent stylesheet is no longer the preferred method. Finally, the means of enqueuing the new child styles were specified in the functions.php file of the child theme.
Excellent information regarding child theme elaborative explanations regarding some of functional elements.
Thanks Mohan! Glad to be of help.