How to Create & Customize WordPress Child Theme in 2020?

How to Create & Customize WordPress Child Theme in 2020?

Creating a WordPress child theme is very important for being safe from losing the customization on the theme update.

I use Google Analytics to track the visitor’s data for my website. Once, I checked the analytics but surprised by seeing the straight line for page views touching the ground.

Lost theme customization after update

The notification from Google suggested that the code wasn’t added in the header of the website. But, I had done it.

Then, I realized the code was lost as a result of theme update I recently did.

This was when I decided to create WordPress child theme, and you should too.

A WordPress child theme uses the template of the parent theme, and is created to do any customization without touching the main theme.

WordPress first looks for the necessary files on the child theme and if not found it uses those from parent theme.

WordPress is an open source software built under the GPL. You are free to change/customize any files of a WordPress theme.

It gives the facility to create a child theme that you should take advantage of.

CONSIDER LEARNING: Boost website speed by 190% by setting up AMP

Importance of the WordPress Child Theme

You might already know the importance of a WordPress child theme, that’s why you are here.

It provides us the facility to modify any files of a theme without even touching the main theme. Simply edit a file such as page.php and upload it to the child theme. WordPress uses it and any other missing files will be used from the parent.

You might have at least added Analytics, AdSense, or Search Console code to the header of your website. All these codes will be lost and have to be added again, once you update the theme. That’s why it is important to create a WordPress child theme and use it to add/modify the theme code.

Now, let’s see some of the pros and cons of WordPress child theme.

CONSIDER LEARNING: Complete WordPress Tutorial

Pros and cons of WordPress Child Theme

Like mine, if you haven’t created the Child theme, all changes made to the main theme will be lost upon update. To become safe from this, WordPress child theme is created.

Some of the pros of it are:

  • Keeps your customization safe from losing
  • Any new functions can be added
  • Style of the website can be customized
  • Can modify whichever file you want (for example page.php, comments.php) without disturbing the parent theme
  • Child theme makes it easier to detect any errors
  • Easier to fix any bug or error

WordPress child theme hasn’t any notable cons that may become the reasons for not creating it. However, a little bit of technical skill may be needed, which is why most of the people refuse to create it. But, you don’t have to worry about this, with a good skill of copying and pasting codes, it can be easily created.

Another con might be: sometimes, you may encounter problems like style.css not working/loading. But, I’ve given the solutions of some of the common problems like this at the last of the article.

CONSIDER LEARNING: Things you should know before starting a blog

Some of the questions you probably ask

What can I do after creating WordPress child theme?

Well, you can do everything that can be done with any WordPress theme like modifying it, adding functions, styles or creating a custom page templates, or adding Analytics/AdSense/Search Console codes.

The benefit of using a child theme is you don’t have to worry about losing any customizations you’ve done.

Moreover, you can override any default design of the theme, control any specific part of your website like related-post.php, footer.php, etc.

Do I need coding skills to create WordPress child theme?

Not actually! You don’t need any coding skills just for this. However, if you want a custom design of your website you may need the coding skills.

The basic knowledge of CSS can add fragrance to the flower, as you can give any kind of style to your website. Moreover, the knowledge of PHP and JavaScript along with HTML and CSS helps you create functions and custom templates for webpages.

Will I lost WordPress Customizer setting after activating child theme?

Unfortunately yes! It’s a kind of headache to customize the whole customizer setting again. You have spent hours to set the designs for your website. But, in regards to your hard work, I have discussed a method to restore the customizer setting. So, no need to worry about this as well.

How to Create and Customize WordPress Child Theme?

You don’t have to create all the files needed to create a complete theme, instead, a minimum of two files viz. style.css and functions.php are sufficient for a working child theme. All the other files will be used from the parent theme, unless you modify any and upload them to the child theme.

The two methods of creating a WordPress child theme are discussed here. One needs to install a WordPress plugin while other is manual. The later one is recommended.

Create WordPress Child Theme Using a Plugin

This is the easiest method to create a child theme for a WordPress website.

What you have to do is just install a plugin Child Theme Generator.

Install Child Theme Generator To Create WordPress Child Theme

After activating the plugin, click on create and fill out all the information.

Fill out all the details to create a WordPress child theme

Then check activate child-theme and hit finish.

Check the activate child theme and hit finish

That’s it. You’ve successfully created the WordPress child theme for your website. You can follow the procedure below to customize it.

Creating WordPress Child Theme Manually

This is the recommended method for creating a child theme in WordPress. No coding skills will be required for this method. You just need to copy and paste some code.

Follow the below steps to create a WordPress child theme.

  1. Firstly, you need to have access to file manager or FTP of your web host to upload files on the server. The password and username would be provided by the hosting provider. If you don’t have access to these, contact your hosting provider.
  2. Login to the web host. I’m using file manager to upload files on the server. FTP works the same way.
  3. After login to the file manager, head to public_html/wp-content/themes. Public_html is the folder most hosting provider uses for root directory.
Open the file manager to for WordPress child theme
  1. In the themes folder, create a new folder named twentytwenty-child where twenty twenty is the name of the theme you want to create child theme for. You can set any name for the folder but this is the recommended. And, make sure not to add any spaces.
Create a new folder for WordPress child theme
  1. In the folder, you’ve to upload two files. The first one is style.css and the second one is functions.php. These are the two minimum files needed for a child theme to work.
  2. To create these files open any text editor (ex. Notepad++, Sublimetext, Notepad in Windows, TextEdit in Mac, etc.)
  3. Copy and paste the following code. Note that the template must be the parent theme folder name.
/*
Theme Name: Twenty Twenty
Theme URI: http://yourdomain.com/
Description: Child theme of Twenty Twenty
Author: Your Name
Author URI: http://yourdomain.com
Template: twentytwenty
Version: 1.0
Text Domain: twentytwenty-child
*/
  1. Save it as style.css. Here, we are not importing the CSS from parent theme using @import, instead we’re doing this using a function in function.php file.
  2. Again, copy and paste the following code into a new file. And save it as function.php
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
?>
  1. These files are ready to upload on the server. Go to the file manager and upload these files in the twentytwenty-child folder in wp-content/themes.
Upload files to the child theme
  1. Additionally, you can upload an image named screenshot.png that shows on WordPress. This is not compulsory.
  2. You child theme is now ready to activate. Login to WordPress admin area and go to themes.
  3. Activate the child theme.
Activate the child theme from WordPress
  1. You’re free to customize it the way you want.

How to Customize WordPress Child Theme?

The WordPress Child Theme can be customized similar to the parent theme.

It can be customized from WordPress customizer. However, if you have better understanding of CSS you can style the website the way you like.

Go to the Appearance>Customizer from WordPress admin area and customize whatever you want. CSS can be added in Style.css or Additional CSS in customizer.

Customize the child theme using WordPress Customizer

The customizer setting isn’t lost during theme update.

It is boring to spend time setting the customizer again, so I’ve discussed below the method to restore the setting from parent theme.

The below CSS can be added to the style.css file from WordPress theme editor (Appearance> Theme Editor) for custom style.

Edit the child theme stylesheet from WordPress theme editor

Here you’ve to find the class or id of an element to style that using CSS. To find this, view a webpage, right click on an element and then click inspect.

Inspect the item to find class and id

The class is used with a ‘.’ and id with ‘#’ however, an html tag can also be used for styling without any symbol.

For changing the style of header:

#site-header {
background: lightgreen;
color: white;
}
.primary-menu-wrapper li a{
color: orange;
}
.primary-menu-wrapper li a:hover{
color: blue;
}

For changing fonts of the body:

body {
font-family: arial;
font-size: 18px;
background: #e7f7f7;
color: #444;
}

For Links:

a {color:green;}
a:hover {color:red;}

For buttons and input fields:

input[type=submit] {
color: white;
background-color: blue;
}
input[type=submit]:hover {
color: white;
background-color: skyblue;
}

For Footer:

#site-footer {
	background: lightgreen;
	color: white;
}

This way, you can style your website.

Learn more about customizing a WordPress theme.

Probably, you might have added codes like Analytics in the head of the parent theme. So, it is better to copy the header.php to the child theme to become safe from future loss.

Go to wp-content/themes/twentytwenty and copy the header.php and paste it in the twentytwenty-child folder.

Similarly, if you have made any changes to any files of the parent theme don’t forget to copy them in the child theme folder.

Note that you’ve to give same path to a file, otherwise it might not work. For example, a file twentytwenty/templates/single/page.php should be placed as twentytwenty-child/templates/single/page.php.

You can customize any file from parent theme, just copy, modify and upload it to the child theme folder giving it the same path.

WordPress looks first in the child theme and uses any missing files from its parent theme.

Some Problems and their Solutions

Here are some of the problems and their solutions that might occurred after creating WordPress child theme.

CSS stylesheet is not working

It is also possible that after creating the child theme, the style.css doesn’t load. It’s very disappointing.

This might happen because the style isn’t accepted by the WordPress which is due to the functions are taken as incorrect for your theme. To solve this you have to find the correct function for your theme that can be placed in function.php file.

Suppose you want to create child theme for Astra. Search in Google for ‘child theme for Astra’ and you may found the correct function.php file for the theme.

If this doesn’t work comment below, I will try to find a solution as per the situation.

I changed a file (ex. single.php, page.php) and uploaded it to child theme folder but it’s not working

This is because you haven’t given the same path as the parent theme while uploading the file in the child theme. For example, if a file has path templates/partials/single/page.php, create the folders templates, partials and single inside one another respectively, and upload the modified page.php in partials folder.

How to get Customizer setting back in WordPress child theme?

It is really a stressful situation for you, if you have to customize all the customizer settings again for child theme because all the settings will go to default after activating the child theme.

To get back the setting install and activate a plugin called ‘Customizer Import Export’. Learn more about installing a WordPress plugin.

Install and activate the customizer import export plugin

Then after go to the customizer for the parent theme and you’ll find an Import/Export option with which you can export the setting in a file.

Restore the WordPress Customizer settings

After exporting the setting, open the customizer for child theme and export the data using the same option.

If I change any setting of child theme from customizer, will it be lost upon theme update?

No, it won’t lost. You can customize the child theme from WordPress customizer.

Conclusion

Creating WordPress child theme is very important. Any customizations should only be done in child theme because they will lost on theme update in parent theme.

You’ve seen it is very easy to create a WordPress child theme. Many situations come where we’ve to edit the files of the theme. It is better to create a child theme for this. It will keep your customization safe from losing on theme update.

In this article the two methods are described, out of which I recommend the second one. You don’t need any coding skills for this, just copy and paste the codes.

You may face problems, some of which are tried to solve here. If you encounter any problem, comment below, I will try to solve that.

Lastly, don’t forget to share.

Binod Bhatt

I'm from Baitadi, Nepal, a professional web developer, and a passionate blogger. I have more than three years of blogging experience and have worked for the success of many blogs and business websites. More... Find me: Facebook | Twitter

Leave a Reply