How to Effectively Create a WordPress Child Theme
If you are a newbie in WordPress or in the development phase, you probably already know the basics about WordPress Child Theme. Needless to say, child theme possesses the DNA of the Parent theme. For instance, if you want to do the modifications and make a few changes in your Current WordPress Theme, then it is highly recommended to create a WordPress Child Theme. In this tutorial, we will learn how to Create a WordPress Child Theme without any hassle.
Why Child Theme?
Based on a recent WordPress survey, 85% of users customize their WordPress theme, regardless of its elegance, but only 35% use a Child Theme for these changes. Why do so few people use Child Themes in general? This could be due to a lack of understanding, the perceived difficulty in creating one, or perhaps just boredom.
The reasons for using Child Theme:
- If you use a child theme and make changes, those changes are permanent, even when you update the parent theme. However, if you directly modify the parent theme, all changes will reset to the default after an update. Using a child theme prevents this issue.
- Child themes speed up development.
- They’re a great way to learn about theme development.
- Your original theme remains unaffected even if you experiment with code in your child theme.
- You can easily track and revert changes made in the child theme to the original at any time.
How To Create a WordPress Child Theme?
To demonstrate, we will be creating a child theme for a default WordPress TwentySeventeen Theme. Follow the below steps precisely in order to get started:
- The very first thing you need to do is Create a New Folder and rename it to something like TwentySeventeen-Child. This will be inside your /Themes folder.
- Inside your new folder, create a new file
style.css
.
/*
Theme Name: Twenty Seventeen Child Theme
Theme URI: http://wordpress.org
Description: Child theme for TwentySeventeen
Author: Prabin
Author URI: http://prabinparajuli.com.np
Template: twentyseventeen
*/
@import url("../twentyseventeen/style.css");
- Fill the information required as outlined below in your style.css. You can name the Theme Name, Theme URI, Description, and Author as your choice. Entirely up to you.
We’ve made a Child Theme for the TwentySeventeen theme, and it’s important to focus on the Template and @import url when creating one. In the code above, you can see we included these lines, which specify the parent template (TwentySeventeen) and the parent theme.
Keep in mind that when creating a Child Theme for a different theme, you need to change the template name (the theme folder name) correctly. It’s crucial to be precise with the case – for example, if the parent theme’s folder name is “twentyseventeen” with a lowercase “t” you cannot use “TwentySeventeen” with an uppercase “T” in your Template section. The same rule applies to @import url.
Activating Twenty Seventeen Child Theme
If you followed the steps carefully, congratulations! You’ve successfully created a Child Theme. Log in to your Dashboard and navigate to Appearances → Themes. You’ll find your new child theme listed there. Activate it, and when you view your website, it should look the same as your previous parent theme.
Now, try adding some styles to your style.css file and check out your website again. You’ll notice the magic!
If you encounter any issues creating a Child Theme, leave a comment below. If you found this tutorial helpful, don’t forget to hit the Share button.
Enjoy your Child Theme experience!