The next step for anyone who has finished learning the basics of WordPress (WP) would be to know how you can further customise your website. This will be an awesome kick-start for anyone who wants to customise their website.

This article will further discuss the step of creating a child theme in WP.

Why should you have a child theme?

A child theme replicates the functions, features, and options of another theme, which is called the parent theme. It is possible to make changes and customise it, but you cannot make any changes to the parent theme. This is the perfect method to customise your website since you can save a lot of time and effort as the features and functions will be the same and there is no need for you to build anything from scratch. And you have the freedom to update your parent theme. The customizations you make to your child’s theme will not be affected as the update is only for the parent theme.

Things to do before creating a child theme

Creating a child theme simply means that you will have to work with coding, which will require basic knowledge of HTML and CSS so you can figure out the changes that have to be made in order to achieve the final outcome. A few PHP skills would be an added advantage or at least you will have to be knowing how to copy and paste code snippets from the web.

If you need to run yourself through practice, we would also recommend you do it on a dummy site for the theme or by moving a WP site that is already live to a local server and doing the testing there. And now you can choose the perfect matching parent theme that meets the majority of your requirements because the main objective of a child theme is to save time and effort spent on changes and developments.

This article will use one of the default themes from WP of 2021.

Create your first child theme

There are two ways in which you can create a child theme. You can either create the files and folders needed manually or use a plugin if you find it difficult to create the folders manually.

This article discusses both methods. You can simply scroll down to the one you wish to continue with.

First Method: Create a Child Theme with Coding

Second Method: Creating a Child Theme with a Plugin

First Method

As the first step, you need to create a new folder for your child theme on /wp-content/themes/ on your WP. You are free to name this folder under any name as per your convenience, and in this article, we will be naming it as wpbdemo.

Then you have to set up two files for your child theme. Open the text editor, which looks similar to Notepad and insert the code below into the newly opened empty document.

The above code has details about child themes, and you have the freedom to make the necessary changes to meet your requirements. And you can save it as style.css within the folder that you created, and this will be the main stylesheet of your child theme.

Now you have to import the stylesheet from your parent theme, and to do this you need to create a second file. You can do this by inserting the codes below.

Note:This is applicable for Twenty Twenty-One if it is used as the parent theme, and if you use a different parent theme, then you have to use a different code.

And if you find it hard or any obstacle while developing the code into another one, then you can use a plugin instead, as this method will be more time-saving. After this, you can save the file as functions.php in your child theme folder and we can get back to when we start adding the functions to your child theme.

Note:The previous system to import files was using the @import command on style.css, but we recommend the above-suggested method since this will reduce the loading time for the style sheets.

And a basic version of your child theme is ready. You can go to Appearance and select Themes to see your WPB Child Theme. To use the child theme on your site, click on the Activate button. The functions of the child theme will be the same as the parent theme since you have not made any changes.

Scroll down to see how you can customise your child theme.

Second Method

We recommend the Child Theme Configurator plugin for WP. It will help you create and adjust the child theme you want much faster than entering codes.

Install and activate the Child Theme Configurator first. While activating, go to Tools and then Child Themes on your WP dashboard. And you will see a tab named Parent/Child. Go to that and you will have to choose a parent theme from a drop-down menu. As per the article, we will select the Twenty Twenty-One theme. And click on the Analyse button so that the plugin will ensure the parent theme and apply it.

After this, you will have to choose the folder to save the child theme and the place to save the styles, and we will leave it as the default settings.

And the next section will ask you to select the method of accessing the parent theme style sheet, and we will leave this on default settings too.

In section 7, click on the button named ‘Click to Edit Child Theme Attributes’ to fill in the details of the child theme.

As the child theme is created, the menus and widgets of the parent theme will be lost. You can copy the child theme from the parent theme through the Child Theme Configurator. If you want this action to take place, check the box in Section 8.

Then click the button in Section 9 named “Create New Child Theme” and a folder will be created by the plugin for the child themes. You can now add the style.css and functions.php files that will later be used to customise your child theme. Make sure to double-check the theme by clicking on the link close to the top of the screen and ensuring it fits in before activating the theme.

If they are all set and you think it is ready to go. Simply click on the Activate & Publish button and the theme will go live.

How to customise your child’s theme?

It is time to make a difference and customise your child theme as you want. We are going to do this by coding. You need to add the codes to the style.css file where you will need to have a bit of knowledge of CSS.

To ease the process, you can copy the existing code from the parent theme using Chrome or Firefox inspector, which would help you find it, or you can even get it directly from the style.css file of the parent, and then you can modify it as you want.

First Method – How to copy code from the Chrome or Firefox inspector?

The simplest way to do this is by sneaking behind the code of the website using a Chrome or Firefox inspector that helps you look at the HTML and CSS elements behind it. And as you figure this out, you can modify them as you want.

If you need to get the code of a certain element on the webpage, you can simply right-click on the body of the element, right-click, and you will see the option Inspect.

Now your window will split into two and you will see the HTML and CSS of the page at the bottom of the page. It may also depend on the browser settings and sometimes appear on the right side of your screen.

Chrome will highlight the content as you move the cursor above each HTML line, and this will also show the CSS rules that are connected to the highlighted element. Now you can start editing the CSS and, as a start, let us see how the colour would look if we changed it to #fdf8ef.

Now you can see the colour of the background change, but this change will not last permanently. If you want it to be permanent, you have to copy the CSS rule you see and paste it into the style.css file.

Now you can save the changes you made to style.css and have a look at the site. Now you are able to repeat the process and make changes to the theme’s style sheet. Below you can see the complete stylesheet we created for the child theme. Time to try out a few experiments and modify them for your preferences.

Now you can save the changes you made to style.css and have a look at the site. Now you are able to repeat the process and make changes to the theme’s style sheet. Below you can see the complete stylesheet we created for the child theme. Time to try out a few experiments and modify them for your preferences.

Second Method – How to copy code from the Parent Theme’s style.css file?

Here you can get some of the parent theme’s style.css file and paste it into the child theme’s style.css file directly and make the changes. This method is specifically helpful if you are using Twenty Twenty-One as the parent theme since it makes extensive use of CSS variables.

As you select the fitting colour scheme for your WP site, the variables will make it easier to customise your child theme and make the process fast.

You can just copy and paste the code into your child theme’s style.css file and you have to remove the old colour codes and replace them with the new colour codes that you have chosen from your colour palette. And the colours will appear in many places around your child theme, which will not only happen faster but also maintain a good consistency in colour.

Be unique. The red variable does not have to be red.

Apply the same to other variables. Twenty Twenty-One’s style.css will show variables for font families and sizes, headings, line spacing, and others.All you have to do is just copy all to your new style.css file and you can modify them as you want.

How to edit template files?

WordPress themes differ from one another. They have a variety of themes with different structures. And they are split into different sections such as headers, footers, content loops and others

And all of these sections are controlled by different files in the twentytwentyone folder by files called templates. Templates are often named according to the area in which they are used. But areas such as content loops will be handled by multiple files named content templates.

If you are willing to make changes to the template, you should first find the parent theme folder and copy it to the child theme folder. Then you can open the file in a text editor and make the changes you want.

In this article, we copy the footer.php file from the parent theme folder to the child theme folder. Then you have to open this file on a plain text editing Notepad.

To make it clear we will remove the ‘Proudly powered by WordPress’ link from the footer area and replace it with the copyrights notice at that place. You have to delete everything between <divclass=”powered-by”>tags in order to do that.

And paste the codes you find under those tags in the sample attached below.

Now save the file and visit your WP site. You will now see the copyright notice.

How to add new functions to Child Theme on WordPress?

The PHP code is used in the functions.php file in a theme to add or change features on a WP site. This does the job of a plugin for your WP site that is activated with your currently existing theme automatically.

The majority of the tutorial videos you see will guide you to copy-paste code snippets to functions.php, but if you add them to the parent theme, this might be overwritten every time you install a new update to the theme. This is why we suggest using a child theme while adding custom code snippets. This article will add a new widget area to the theme.

This can be done by adding the code snippet to our child theme’s functions.php file.

 

After saving, you can see a new custom widget area if you navigate to the Appearance section and then choose Widgets.

There is a high chance you will make a mistake somewhere if this is the first time you are creating a child theme. Hold tight; do not give up that easily. Everything has a solution.

The most common error you will find on WP is syntax error. You can read the article which speaks about the ways to find and fix syntax errors.