A survey suggests that a significant number of people are customizing the websites to their needs, but only a small percentage of them are using a child theme. One of the reasons could be the lack of knowledge about it among the people. The other cause could be the imagined difficulty in creating it.
Let’s first define a child theme on the WordPress platform – it is a theme which gets all its functionality from its parent theme. For example, I have a child theme, and its parent theme is Twenty Seventeen.
There are some distinct benefits of using a child theme; If you do any modification in the parent theme’s CSS or PHP files, you run a risk of bringing down your site. Moreover, when your theme is updated to a new version, you lose all the customization work. Whereas, if you use a child theme, and anything goes wrong, you can always fall back to the main (parent) theme.
You should note that child theme is not available in the WordPress repository for the installation; rather you need to create it with the use of a plugin or without a plugin.
I am going to describe simple procedures to create a child theme — a) by using a plugin, and b) without a plugin.
Procedure to create a child theme using a plugin
Install Child theme configurator plugin
Before moving ahead take a full backup of your website because if anything goes wrong and your site breaks down, you can recover it with the latest backup. Particularly, take note of the customization work you have already done; save it in a notepad file on your computer as you may need it later.
Now, login to the admin page of your website and click the Dashboard button. Then, hover over Plugins button and click Add New option. Type Child theme configurator – as the keyword in the Search plugins box. A page will appear as shown in the image below:
The above image is a snapshot of my site’s admin page, where this plugin is already installed. Hence, it is showing Active instead of install now option.
You need to install and activate this plugin. It is a popular plugin and has a five-star rating with over 100,000 active installs. It will make your job simple and smooth.
You may like to read:
Configure the plugin
In the second step, you will configure the plugin. If you hover over the Tools button on your admin panel, you will find a new option child themes. Click it, and a screen with a heading Child Theme Configurator version 18.104.22.168 will appear.
For a first time user of this plugin, proceed strictly as per the steps mentioned below:
- Select Create a new Child Theme.
- Select a parent theme from the drop down menu. You may have more than one theme installed, although only one is activated. All the installed themes will appear here, and you need to select the one for which you want a child theme.
- Click Analyze button. A message — This theme appears OK to use as a Child theme will appear.
- Enter the name of the new theme directory or leave it to default. Please note, it is not the name of the Child theme.
- Keep the default option of Primary stylesheet (style.css).
- Maintain the default option of Use the WordPress style queue.
- In this option, you can customize the Child Theme Name, Description, Author, For example, for a Twenty Seventeen parent theme, the default child theme name will appear as Twenty Seventeen Child. But you can replace it with any name of your choice. You can keep the default setting for Theme Website whereas for Author you can enter your name or leave it to default. For Author website you can enter your website address. You can keep the default settings for the remaining options.
- Check the box on the right-hand side to copy parent theme menus, widgets and other customizer settings to the child theme.
- Click Create new child theme.
Finally, a new page will appear, and on the top of it, you will see a message — Child theme “your child theme name” has been generated successfully.
You may also like to read:
Activate the child theme
Hover over the Appearance button, and select Theme option. You will see one child theme along with other installed themes. Activate the child theme.
To check the result of this action, visit your site and get a shock. You will notice that many of the sidebar widgets are missing. But, don’t worry – these are available in the widget list. Still, you need to configure them again. Although, it is just a five-minute job.
Finally, your website will appear exactly same as it was before activating the child theme.
How to use the child theme
Customization process involves modification of the CSS or PHP files. If needed, you can start making changes to these files now.
Navigate to Tools> child themes> Child theme configurator.
Then, click the files tab — all PHP files from Parent theme will appear. Select the files you need to modify, and copy to the child theme. Now, you can amend or insert any code at the appropriate place. For example, I have modified the footer.php and header.php files by adding some codes.
When you click Baseline styles tab, you get style.css of the Parent theme.
You can modify baseline (parent) styles using Query/selector tab. You can search a particular selector (e.g., h2), and change the value of any property. On the other hand, if you want to modify a specific value site-wide (for example, the color of the type), you should use the Property/value tab.
Once you have selected a selector (for example, .wrap), all the current properties and values will be displayed. You can change any property value and then click save child values, the modified CSS will be loaded in the child styles.
If you have a raw CSS – I mean, if you have got any CSS code and want to use it, put in the blank box against raw CSS option in the query/selector tab options, and click save. If your code is correct, then the selector and all its properties with values will be displayed in the upper half of the same page.
Now, click save child values and these will get copied in the child styles. To verify, click child styles and check the displayed file contents. You will find your raw CSS codes there.
It is time to visit your site to check the result of the changes made in the CSS file. If not satisfied, you should repeat the above process till you get the desired result.
Many tutorial videos are available on the developer’s site. You should refer them for a better understanding of this plugin’s functioning.
Procedure to Create a Child theme without a plugin
To follow this method you need to know how to access your files on your web server and how to transfer data between a web server and a local client. If you are not sure, you can always refer Learn To Use Filezilla FTP For Data Transfer Over Computer Network.
Create a child theme directory
1. Log in to your cPanel. Click Flie Manager; a window pops up.
2. Select the home directory and check the box against Show Hidden files (dotfiles) and click the Go button.
3. A new tab with a name cPanel File Manager v3 opens. This window lists all the files of your website.
4. Navigate to public_html > wp-content > themes. Create a folder here by the name of twentyseventeen-child.
5. I have used this name to indicate that it is a child theme folder with parent theme being twenty seventeen. You can use any name.
Create a style.css file
1. In this step, you will create a stylesheet for the child theme. On your computer, open a new .txt file in the notepad and enter the following text in it.
/* Theme Name: Twenty Seventeen Child Theme URI: https://hariforyou.com//twenty-seventeen-child Description: Twenty Seventeen Child Theme Author: Hari Mohan Sharma Author URI: https://hariforyou.com/ Template: twentyseventeen Version: 1.0.0 Text Domain: twenty-seventeen-child */
2. All the information entered within the two slashes (i.e., /* and */ ) is read by WordPress.
3. Enter the child theme name you want against Theme Name.
4. In the next line, enter child theme URL against Theme URI.
5. You can write any description for child theme against Description.
6. Write your name, if you want against Author.
7. Enter your website URL against Author URI.
8. You need to write the folder name of your parent theme against Template.
9. In the next line, enter any number against Version.
10. Enter Text Domain in a similar way as written above.
11. Save this txt file as style.css
12. Upload this file to your child theme directory (for example, twentyseventeen-child in my case) on the web server.
Note – Observe caution while naming the file and the template as both are case sensitive. The file name must be exactly same as mentioned above while template name must match your parent theme directory name.
Create functions.php file
1. This step is required to enqueue the child and parent theme stylesheets properly.
2. Create a new .txt file on your computer and name it functions.txt. Open the notepad to add contents.
3. Enter the following code in it:
4. This code will ensure that the child theme stylesheet loads after the parent theme.
5. You should replace twentyseventeen in the above code with your parent theme name as present in the parent theme’s functions.php file.
6. Now, save this file as functions.php and upload to your child theme directory at the web server.
Activate the child theme
Your child theme is ready now. To find it, go to the dashboard of your website. Navigate to Dashboard > Appearance > Themes.
Here, you will see the child theme along with the parent theme. Hover over the child theme and Activate button will appear. Click it to make the child theme active.
Use the child theme
If you want to add some CSS codes to the child theme stylesheet, then navigate to Dashboard > Appearance > Editor. Open style.css file of the child theme, and add the CSS codes you want.
I have explained both the procedures to create a child theme. It is up to you to decide which method to use. Both work properly.
If you face any problem with the plugin, you have the option to use the other method.