How to create a Child theme in WordPress to enjoy its benefits

At some point in your use of WordPress, you may sometimes need to modify the look, feel, and features of your website template. This may involve modifying the source code of the template itself.

But the modifications you make to the WordPress website template will be lost when you update this template to a new version!

The Child theme helps you overcome this problem easily, because when you create a child theme from a parent theme, you will be able to modify the source codes of the child theme as you wish, and at the same time you can update the parent theme to a newer version at any time. Whenever you want without losing the codes or modifications you made.

In this article, you will learn about the importance of the child theme and the benefits of using it alongside the site’s basic template. You will also learn how to create a child theme from the basic template of your WordPress site in simple steps, activate it on your site, and customize its look and feel however you want.

The importance of using the Child theme on your WordPress site

Here are the most important benefits and features that you get if you create a child theme from the primary theme that is already installed on your site:

Instead of creating a WordPress template from scratch , which is a tiring theme that requires a lot of time, you will be able to create a Child theme in a very simple time, and without the need to put in a lot of effort or possess complex programming skills.
The child template helps you take advantage of all the features, tools, and options provided by the parent template or the primary template used on the site, because the child template calls and uses all the functions, features, and properties that the parent template uses.
You can update your primary website template any time a new update is available, without fear of losing the modifications that were made to the template before the update was made, because you have actually made the updates to the secondary template on your site, and updates to the primary WordPress template will not affect the modifications that you have made.
If you are using a child theme and there is a problem that causes the site to lose its appearance, you can freely delete the child theme entirely, and the design and features of the parent theme will be automatically displayed.
The Child theme helps you gain more skills related to editing WordPress themes.

How does the Child theme work?

Perhaps you once noticed when you were installing a WordPress theme that a template with the same name appeared next to the main template, followed by the word Child theme.

The reason the child template is called this name in the first place is that it inherits the attributes, files, and data of the base template just as the child inherits from its father! Therefore, when we create a child template on a WordPress site and activate it, the site will appear with the same appearance and design as the parent template.

Therefore, the idea of working the child template depends on using all the files and codes that are present in the parent template, which means that the template now exists in two copies instead of one copy, so to speak, and one copy is preserved and far from modification or change, and the other copy is the child template. theme is designed to apply any required modifications to the site without fear of the parent theme collapsing or being damaged.

Note : When you enter the site, WordPress automatically displays the child template if it is already available, and if it is not available, it displays the parent template or the primary template.

Basic components of the Child theme

When you access your WordPress site’s file manager within the Cpanel control panel and browse the Themes/ folder, you will find within it the folders for all the templates installed on your site. When you enter any folder for a template, you will find that it contains a set of files for the template as shown in the following image:

The image above shows the basic components in most WordPress themes (the parent theme), and some templates may include other additional files for further customization.

While the following image shows the basic components of the Child theme so that it is ready to work and activate on the site:

As you can see in the image above, you will not need more than these three files to create a WordPress template for Child theme, and we will explain these files to you in detail within the article. Here is a simple definition:

Functions.php file : It is a software file used to link the parent and child templates, and we talked about it in detail before .
style.css file : This is the formatting file that is used to add codes for modifying the shape, appearance and design of the template (and if you want to the template, it is preferable to put the formats for the Arabic language in a separate formatting file rtl.css)
Screenshot.png file : It is an image file that we add to the child template’s folder so that it appears next to the template name within the WordPress control panel, as the following image shows:

Therefore, the child template contains only a very small number of files, because we are not creating a new template from scratch, but the child template inherits or uses all the files and codes of the primary template (the father), so the father template must also be installed on the site in order for it to work. correctly.

Note : In the following explanation, we will create a child template from the famous Sydney template, and the same explanation can be applied to any WordPress template to create a (child template) from it in the same way.

Steps to create a Child theme

You can create a Child theme for any WordPress template installed on your site through the following steps easily and without having high programming skills, but it is preferable to have a good background in dealing with programming codes for the following languages: HTML – CSS – PHP.

We also advise you to take a backup copy of your site before taking the step of creating a template built from any WordPress template you have.

Create a folder for the child template within the file manager

The first step to creating the Child theme is to create a folder with the name of the template inside your site’s file manager. You can access the site’s file manager by clicking on File Manager from the cPanel hosting control panel:

After entering the file manager, you can go to the Public_html folder, then to the WordPress installation folder for your site, then open the Wp-content folder , and finally open the Themes folder that contains all the folders belonging to the WordPress templates already installed within the site:

As the previous image shows you, when you enter the Themes folder, you will find the option to create a new folder at the top of the page, Folder+ , choose it and name the new folder Child or any other name you want.

Create a style.css file for the child template

The next steps are to create the basic files for the child theme, which are the style.css file and the functions.php file.

After creating the Child folder for the child template, go to it and click on the Create a new file button at the top left of the screen. A pop-up window will open for you, in which type the name of the formatting file (style.css) and then click on the Create new file button.

Then the style.css file will be created inside the Child folder successfully.

Now right-click on the file name and choose Edit, to open the style.css file editing page. Paste the following text into it:

Theme Name: Child

Theme URI: http://example.com

Description: This is a child template of the parent template

Author: WordPress in Arabic

Author URI: http://example.com

Template: sydney

Version: 1.0.0

Once you paste this text into the style.css file and save the file, you will notice that the name of the template appears in the WordPress Dashboard > Appearance > Themes .

Before we look at what the template looks like inside the WordPress control panel, let us first briefly explain to you the previous text consisting of 7 lines as follows:

Theme Name : In this we write the name of the template as we want it to appear within the WordPress control panel. In this example, we gave it the name Child, and you can give it any name you want.
Theme URI : In this line, we write the link to the template’s website if it is available. It is certainly a formatting line and does not affect the work of the template at all.
Description : In this line, write a brief description of the template. This descriptive text appears on the template information page only.
Author : In this line, you can write the name of the template developer. This name also appears on the template information page, and it does not affect the work of the template in any way.
Author URI : You put the link to the template developer’s website.
Template : This is the most important line of all, where we write the name of the parent template or the primary template for which we want to create the child template. You must write the name of the template exactly as it appears in its folder name within the WordPress file manager.
Version : You can write the current version of the template. This is also secondary information and does not affect his work.

So, by explaining the functions of the codes for the style.css file, we can say that the line for writing the name of the template is the most important line, so pay close attention when writing the name of the primary template for which you want to create a child template because this ensures that the child template appears correctly.

So, go to the Themes folder inside the site’s file manager, make sure the name of the template is as it appears in its folder name, and write it as it is and in the same case, because if you write the name in uppercase letters instead of lowercase, the child template will not work for you.

Create a functions.php file for the child template

In the same way you created the style.css file, go into the child theme folder again and create another file called functions.php:

Then open the Edit page of the functions.php file:

Then paste the following code into the file:

<?php

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

function my_theme_enqueue_styles() {

wp_enqueue_style( ‘child-style’, get_stylesheet_uri(),

array( ‘parenthandle’ ),

wp_get_theme()–>get(‘Version’) // this only works if you have Version in the style header

);

}

The code above uses the wp_enqueue_scripts function , which is one of the important WordPress functions known as ( hooks ). It is used here to include the format files and scripts for WordPress templates. The code here performs a complete link between the child template files and the parent template files, and thus the child template completely inherits all Parent template codes, and it appears exactly as the parent template appears when activated on a WordPress site.

After pasting the code into the functions.php file and saving the file. The child template will now be ready to work and run. When you enter the WordPress control panel and open the Templates tab, you will notice that the template appears as follows:

Add an avatar to the child template

As you noticed in the previous image, the child template appeared inside the templates control panel in WordPress, but it does not have an avatar like the parent template or other templates that appear attached to an avatar.

To add an avatar to the template so that it appears properly with templates. Go to the parent template folder (which is the Sydney template in our explanation) inside the file manager, then copy the template’s avatar Screenshot.png

Then paste the image into the Child template folder

After pasting the image into the folder, now go to the Templates tab within the WordPress control panel to find that the Child template now appears with the avatar that you copied and pasted into its folder.

Activate and customize the child template on the WordPress website

You can easily activate the child template on your WordPress site by going to the WordPress control panel again, then going to: Appearance > Templates , then clicking on the activation button next to the name of the child template .

The template will be automatically activated on the site, and you will notice that the site appears in the same look and feel as the parent template, because WordPress calls all the files of the base template and runs them when the child template is activated.

After activating the child template, you can customize its look and appearance as you wish, through the (Customize) button appearing below the template name.

Once you click this button, you will be directed to the template’s customization page, through which you can customize and modify the appearance of the child template, such as changing texts, backgrounds, colors, and all other options that the template provides for you to modify the appearance of the site in general.

Modifying the parent template files through the child template

When you reach this step, you have a basic template on your site (or parent theme) as well as (child theme).

The effective template will be the child, and when we want to modify the template files or code, we will modify within the child template files without modifying the primary template files.

So if we update the basic template later, we will not lose the modifications we made.

Let’s give a practical example to illustrate the idea of modifying template codes without modifying the parent template’s code.

For example , when you want to modify the footer text for the template rights that appears at the bottom of the site and the name of the template and its rights appear within it, as shown in the following image:

In this case, we need to modify the template’s footer.php file, so you must copy the footer.php file from the parent template folder, and paste it inside the child template folder to have an editable copy without directly modifying the original copy.

To do this, go to the template’s parent folder, and copy the footer.php file:

Then go to the Child template folder and paste the file into it, then right-click on it, and choose the Edit command from the menu that appears, as shown in the following image:

The page for editing the file footer.php will open for you, which contains the texts found in the footer or end of the site, which include the name of the template, its data, and its link:

Replace this text with other text that you want to display as alternate text below the template:

Then save the file after completing the modifications to it, and go to the site directly, and you will see the changes you made to the text have appeared in the site’s footer:

You may have noticed by now that the most important benefit of the child theme is the ability to modify any of the files of the parent WordPress theme without modifying the original copy of the file. This is done by creating copies of the original files and modifying them. These modifications will appear on the website and will not be affected if you update the parent template when newer copies of its currently installed version are available on the site.

Conclusion

Many WordPress users face problems related to loss of template data or damage to it due to making incorrect modifications to its source codes, so using the Child theme template is considered one of the security measures for your site that supports maintaining the proper functioning of the template.

Also, as you learned in this article, the process of creating a Child theme template does not require you to have a lot of complex programming skills, but rather it only requires some procedures that you can do easily, such as creating files and pasting some simple codes into them.

If you are interested in developing and programming WordPress themes, this guide to creating a custom template from scratch for WordPress will strongly help you start creating and programming your first template. You can also see the following article that explains how to take advantage of Bootstrap to create a professional WordPress template.