In order to make the overall appearance of the WordPress website unique and eye-catching, many webmasters now create their own custom themes or modify the existing themes based on the individual needs and preferences. However, according to our researches, only 25% of these people use the child theme when doing so.
Now, you may be wondering what it is. In the following, we’d like to tell you how to create child theme in WordPress and why you need it.
Why Need Child Theme?
The WordPress child theme can be regarded as the cloned parent theme. It has all the functionalities of the parent one, and can be modified, changed, and optimized freely. To be honest, having a child theme created is the safest way to customize your WordPress theme. Check the reasons in the following.
- To achieve a better final effect and performance, the original theme designers may update the theme sometimes without notifying their users. In this case, if you only customize the parent theme, then all the changes and efforts will be erased when it is updated. With a child theme, however, you don’t need to worry about this. This is because you will have a separate theme file that will not be affected by anyone else except you.
- After creating a child theme and making it override the parent one, you can do any changes without the possibility to affect the original theme at all. This means you will never ruin the features, highlights, and functions of the original theme, for you actually don’t modify the files.
How to Create It?
In fact, it is not that hard to create a child theme as you imagine. You only need to follow these steps present in below carefully, then things can be done easily. This action requires some certain level of CSS knowledge as you have to add some rules to make changes. You can get the coding information from this CSS tutorial.
Step 1: Create Child Theme Folder
First of all, you need to create a new folder for the child theme. We highly suggest you creating it within the theme directory called wp-content/themes, and naming it with a -child suffix. For instance, if your parent theme is Foxy, then the child theme needs to be called foxy-child. This is the most conventional naming method helping you identify the child theme easily.
Step 2: Create CSS File
Within this folder, you need to create a file with the name of style.css, and place the vital information as the example showed in the following.
We use the WordPress theme of Foxy as an example, so you need to modify the information according to your own theme. Among the theme name, URI, description, author, and template, the last one is pretty important. You have to make sure that the parameter of the template is totally same as the name of your parent theme.
In terms of the @import section, it indicates that the CSS of the parent one has already been imported into the child one, so you need to ensure the path is correct. Generally, it is same as the template with a suffix of /style.css.
Step 3: Upload and Activate Child Theme
Now, you have already created your child theme, so you have to upload and activate it in your WordPress website. To do this, you can log into the WordPress admin panel and then go to Appearance < Themes. Click the Upload button in this screen and upload your child theme immediately. Note that the theme must be uploaded in a ZIP format. You can zip the file with your computer as Windows has default zip functionality.
After uploading it successfully, you simply need to active this theme by clicking the Activate button.
Step 4: Make Change with CSS
In fact, all of the steps introduced in above are used to import the CSS of the original theme and make your child theme override it. Now, it’s time to do some changes as you wish within the style.css file of the child theme created by you, or via the WordPress dashboard < Appearance < Editor < you child theme < Stylesheet. You have to know that you cannot change anything of the original lines of information, but can add some CSS coding below the @import section to achieve your goals. After saving the changed files, the CSS for the child theme overwrites that of the original theme.