How to Create a Child Theme and the Importance of Using One
This post may contain affiliate links. Please read my full Disclosure for more info.
When I first started this website, I didn’t know what a child theme was or why I should even have one. I had so many questions like what purpose does a child theme serve and how will it change the appearance of my WordPress website?
It wasn’t until I learned about child themes that I actually installed one on my WordPress website.
In this post, I am going to tell you exactly why a child theme is essential and how installing one can help you better design your website. I’m also going to teach you how to install a child theme on any WordPress website.
What is a child theme?
A child theme is a theme that inherits the functionality of the main theme, called the parent theme. Child themes are the recommended way of customizing or altering the parent theme. This is because the changes made to the child theme will not be lost when the parent theme is updated.
When a parent theme is updated, it will override any changes you make to the parent theme. On the other hand, your child theme will not be updated along with your parent theme so any changes made to the child theme will remain intact.
By customizing the code within the child theme instead of the code within the parent theme, the parent theme can be safely updated without you having to worry about losing all of the custom styling done to your website.
How to create a child theme
We are going to be creating a child theme for the divi theme. To start off, you must first create a folder. You can title this folder Divi Child Theme. Within this folder, you are going to create a file called style.css. Within this file, you are going to fill out the information shown below.
File Name: style.css
Theme Name: Divi Child Theme
Description: A child theme to help you customize and/or modify the Divi parent
theme by Elegant Themes.
/*Theme customization starts below the line
The text within the /* and */ are comments and what you write within it is totally up to you. You can even choose not to include comments. The most important line is the line that starts with @import. This is the only line you need to include in your file. This is the line that imports the style.css sheet from your parent theme into your child theme. The url is case sensitive, so make sure that the path to your parent theme is correct. Since the folder to my parent theme is “Divi,” I used Divi with a capital D within the url import line.
After you have done this, you must zip the file and upload it to WordPress by going to Appearance > themes page in your dashboard. After you have uploaded the file, you can activate it.
The way child themes work is that any code added to the child theme’s style.css file will override the original style.css code. This is due to the fact that the child theme’s CSS is added after the original style.css code.
How to edit php files within the child theme
Now that we have our child theme created, How do we edit other files? What if we want to edit php files?
To edit functions.php, you would need to create another file within your child themes folder called functions.php. The php code should be entered between the opening and closing tags. The tags look something like this:
//Enter your php code here
If we want to edit any other php files (other than functions.php), we can simply copy and paste the original php file into our child theme and then make all of the necessary edits. It is also very important to make sure that you keep the structure the same as the parent theme when you copy the files over. Otherwise, the changes you make to your child theme may not work. Let me start by giving you an example using the Divi theme. If you are using the Divi theme, navigation.php, no-results.php, social_icons.php, and widgets.php are all located with the includes folder. It is very important to copy this entire folder into your child theme.
Copying and pasting php files from your parent theme into your child theme can be done using an FTP client, such as Filezilla Client, which I discussed in my last article found here.
The easy way to create child themes
If you are still having difficulty creating child themes despite following the instructions listed above, there’s good news. There is a plugin that can help you create one with the click of a button. This plugin is called One-Click Child Theme, which you can download here.
I probably should have just started this tutorial with the hassle-free way of creating a child theme instead of boring you with code. Nevertheless, we are here and the creation of your child theme is just a click away. Get the plugin here.
There is your answer on how to create a child theme. The child theme created in the above tutorial was for the Divi theme, but it can be created for any WordPress theme with the instructions above. You may not need a child theme if you are not planning on making too many changes to your WordPress website. You may also not need it if you are not planning on editing any of your php files. If all you really want to change is your style.css file, you can download a custom CSS plugin, such as the Simple Custom CSS plugin.
If you are using the Divi theme, you can add custom CSS to your website by going to Divi > Theme Options page in your dashboard and then scrolling all the way down (under the general tab) to custom CSS. Please note that the code under Divi > Theme Options is global, which means that it will affect your entire site, unless otherwise specified. You can also customize the CSS for a specific page or section using the Divi Builder plugin. The Divi builder plugin has custom CSS functionality that can be used to add CSS to any page or section. The Divi builder plugin comes with the Lifetime Access membership for Elegant Themes. For a limited time, Elegant Themes is offering a 10% discount for their yearly and lifetime membership.
I hope this article taught you about the importance of using a child theme and how to create one. I also hope that this article helped you determine whether or not your website needs one.