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. It is always used when you are looking to tweak or customize an existing WordPress template, but worry that you may lose its custom and built-in style. 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.
- While the child theme is built based on the theme framework, you can easily add a large sum of flexibilities without the need to write a lot of coding lines. Here, you can modify just some parts of the theme but do not need to go through all the theme files.
- With the child theme, you can get the fallback options from the parent theme easily. In this case, if you have deleted some features unintentionally, you can revert them back effortlessly.
When to Use the Child Theme
Actually, not all of you need to create the child theme. This practice simply depends on your real needs. Here, if you confirm that you will add the new functions to the functions.php file or will update the style.css file of your current theme constantly, the creation of the child theme is worth to try. However, if you only want to modify a few elements, the custom CSS plugin is enough to work fine.
Special Note – Here, the child theme works based on the parent theme. However, not all the parent themes are the good choices to try. Especially, it is a mistake to create a child theme of a parent one that fails to offer the enough functionality.
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 presented 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.
In addition, we highly recommend you to start this practice on a local development environment. In this case, you can generate the WordPress staging environment for the testing goals. And also, you can make use of the dummy content to test the theme development.
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.
Here, if you use the Google Chrome or the Firefox to edit your theme, you can use the default built-in inspector to check the CSS and the HTML of each design element for the webpage. In this case, if you want to make a change, you can move your mouse to that location and right click for the Inspect Element button.
Now, you can move to different HTML lines of code and the inspector will highlight the corresponding design parts. Here, you just need to copy and paste the target coding line to your Notepad, make changes on it, and then, paste the code after the @important section. After saving the file, the changes are made properly.