If you want to learn how to create a child theme, you’re in the right place.
I learned about child theme after losing ALL the modification I made to my theme.
In this post, you’ll learn what is a child theme and why you need to use a child theme.
Next, I’ll show you the complete steps you need to create your own child theme.
The best part?
You can apply these methods to any theme.
Let’s get started…
[ez-toc]
What Is A Parent And Child Theme?
A parent theme is a fully functional theme that includes all the required files and assets for the theme for work properly.
On the other hand, a child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.
Child themes are the recommended way of modifying an existing theme.
Why Should You Use a Child Theme?
Child themes are often used when you want to make changes or modification to the theme you’re using. The greatest advantage of creating a child theme is you could update your parent theme safely and keep modifications on your child theme intact.
Keeping your theme updated helps to ensure your site is secured.
Often time you’re forced not to update your theme as you made changes directly and you’ll lose it the moment you updated the theme.
How to Create a Child Theme
Before you get started, don’t forget to backup your website.
Create a Child Theme Folder
The first step is to create a new folder in your WordPress themes directory.
There’re a couple ways to access your website directory. You could access your website via FTP or SFTP. Your WordPress installation is normally located in public_html folder.
Once you’re in the server, go to /wp-content/themes/ and create a new folder.
You could name the folder any name you want. The best practice is to use the same name as the parent theme and append -child to the end.
In this article, we’ll use twentyseveenten theme as an example. In this case, you should name the folder twentyseventeen-child.
Create a Stylesheet File: style.css
Next, you’ll need to create a stylesheet file named style.css.
A stylesheet file contains all the CSS rules that responsible on how your website looks like.
By creating a style.css file in the child theme, you could modify the style for your child theme.
Your child theme’s stylesheet must contain the required header comment tag below right at the start of the file. The main purpose of this header is to tell WordPress the basic info of the theme and to recognize the parent theme.
/*Theme Name: Twenty Seventeen ChildTheme URI: http://example.com/twenty-seventeen-child/Description: Twenty Seventeen Child ThemeAuthor: John DoeAuthor URI: http://example.comTemplate: twentyseventeenVersion: 1.0.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-readyText Domain: twenty-seventeen-child*/
You’ll need to replace some of the text here with the details relevant to your theme.
Some of the required info is:
- Theme Name: the name of the child theme you’re creating
- Template: The directory name of the parent theme. Since we’re using Twenty Seventeen theme as an example, the directory name is twentyseventeen.
The final step is to enqueue the parent stylesheet. Basically, we need to tell WordPress to import the parent stylesheet so your child theme would inherit the all the styling.
Now, you might have seen other tutorial that says you could simply use the @import method to import the parent style.css directly as shown below.
@import url("../twentyseventeen/style.css")This is NOT a best practice. Importing your parent stylesheet this way increase the amount of time it takes to load. In other words, it will slow down your website.
The recommended method is to enqueue the parent theme stylesheet is to add wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s function.php
Enqueue the Child Theme’s Stylesheet
To enqueue the parent stylesheet, you’ll need to first create a functions.php in your child theme directory.
You can copy the following code to enqueue the parent theme stylesheet.
<?phpadd_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );function child_theme_enqueue_styles() {wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}?>Often times, you’ll modify your child theme by adding CSS code to child theme’s style.css. For the child theme to work correctly, you need to enqueue the child theme’s style.css as well.
You need to set the parent-style as a dependency. This will ensure that your theme will first load the parent theme’s style before loading the child theme’s style. You could include the version number as well. It will ensure you could bust the cache for the child theme.
This is how the complete code looks like.
<?phpadd_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );function child_theme_enqueue_styles() {$parent-style = 'parent-style'; // This refers to is 'twentyseventeen-style' for the Twenty Seventeen theme.wp_enqueue_style( $parent-style, get_template_directory_uri() . '/style.css' );wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array( $parent-style ),wp_get_theme()->get('Version'));}Save your functions.php and your child theme is now ready.
How Do You Install A WordPress Child Theme?
To install a child theme, you just need to activate the theme. Login to your WordPress dashboard and go to Appearance > Themes.
You should be able to see your child theme listed. Click on the Activate button and there you go.
Note: If you found that your menu is missing, just go to Appearance > Menus and re-save your menu after activating your child theme.
How Do You Update A Theme In WordPress?
As I’ve mentioned, the biggest benefit of using a child theme is you could update the parent theme as usual without losing any changes made to your child theme.
To update the parent theme, go to Appearance > Themes and click the Update button.
How To Add Custom Javascript To Your Child Theme?
Javascript is a programming language that’s commonly used on the client side to create interactive effects within the browsers. Theme/plugin developers use it to create interactive elements such as sliders, popups, etc.
To add more functionalities to your site, you might want to add custom Javascript to your child theme.
First, create a file named main.js in your child theme folder. You could name it anything you want. This file will contain all the javascript codes you want your child theme to run.
Next, we need to enqueue the script in your functions.php just like what we did for the stylesheet file.
You could add the following code to your functions.php file.
add_action('wp_enqueue_scripts', 'child_theme_enqueue_script');function child_theme_enqueue_script() {wp_enqueue_script( 'child-script', get_stylesheet_directory_uri() . '/main.js', array( 'jquery' ), '1.0', true );}jQuery is a feature-rich Javascript library. The code above ensures that the theme loads jQuery first before loading your Javascript file.
Final Thoughts
While there are a few plugins that could create a child theme automatically. I recommend you to go through the steps above and create your child theme manually.
Creating a child theme is a great way to learn how WordPress works. And by using a child theme, you could ensure your theme is always up to date.
