How To Create And Customize A WordPress Child Theme?

Various Ways on how you can customize WordPress theme

Making some tweaks or customizing a theme that can match your requirement can be sometimes tricky and in worst cases can be hazardous to your website. It is because, when you added or make some changes to a third-party theme and try to update it, your all previous changes or tweaks will get lost. And the website will look exactly like when it was newly installed. Which you won’t like to happen.

Hence, there are some ways by which you can customize or make some changes to your WordPress themes without losing anything. These methods are:

1. Customizing theme using WordPress Plugins
2. Making changes or Editing themes directly
3. By creating a WordPress Child theme

Customizing theme using WordPress Plugins

Since we are familiar with the amazing flexibility and lot of customization options provided by WordPress. There is no doubt you can also customize or add some functionality to a website theme by installing some plugins. This option is quite handy and does not require a lot of effort.

It is most suitable if you are looking for customization in functions rather than designing or change in appearance. Whatever plugin you are using, make sure it does not need to be complex or using heavy resources. If you are wondering to add some lines of code to the functions.php file of your theme, you should use a WordPress plugin to do the same.

It is because, it may look easy to add a one-line code to the function.php file, but it has nothing to do with your theme’s look or appearance. It will only change the functionality of your website. And if in future, if you change the theme or update it, you won’t lose any functionality that you had added earlier with the help of a plugin. This is why it is better to install a plugin rather than simply adding codes.

If in any case, you won’t able to find your plugin that can fulfill your requirement. The best thing you can do is to create a new plugin for your website.

Installing a plugin to increase the functionality of a website is all depends on individual to individual and their requirements. Some users would prefer to customize the appearance or aesthetic of a website rather than functionality.

Direct Editing your theme files

This method of customizing a theme file is best suitable only for the websites that are running on custom WordPress themes, not from third-party or Free WordPress plugins. Custom WordPress themes are specially designed considering all the requirements and inputs given by the website admin. Hence, you have all the power to edit, remove, add features or redesign the website completely without any risk of losing the changes that you have made in the next update.

But one thing you must be aware of is the fact that you cannot be 100% riskfree from the conflicts of Direct theme files editing. If you do not have enough knowledge about WordPress theme files and How to code them, it is still highly recommended that you should create a WordPress child theme instead.

It is always better to play the safer side rather than inviting any issues. Even then, You want to edit theme files directly, you must keep a Backup file of your Orignal theme as a safety measure. And Always try to run a test on a staging platform before making it live.

By creating a WordPress Child Theme

This is the most safest and highly recommended method for anyone who is looking for customizing their WordPress theme. Whether it is customizing functionality or the looks. Check out these situations on which you will be required to use a child theme:

1. If your website is running on a third party theme and it requires regular updates.
2. If you do not want to make any changes in the main file that can be risk to website damage.
3. If you are looking for customize the whole aesthetic of website rather than just functionality.

Hence, Using a WordPress Child theme can save you from any risk or damage while customizing your website. And in this article, we are providing you all the details about how you can create and implement them. Let us Get started with the basic definition of the WordPress Child theme.

What is exactly WordPress child theme?

A wordPress Child theme is like any other theme that works sequential with the parent theme and takes over all the information( All the theme files) from it. It is one of the best and safest practices that every developer uses to make customization or changes in a WordPress theme file and helps to retain all the changes whenever the theme gets updated.

All about WordPress Child theme and Why you need them?

The term Child theme only comes into the existence when a parent theme is available. It is to be better understood when someone has created a WordPress child theme from it. Hence, a parent theme is just like a normal theme file that you can find in your WordPress directory. Or any theme file that you find in a WordPress directory and have all set of files in them, then it is a Parent theme.

Now you must have been confused between the Parent theme and the WordPress Child theme. Well, there is not much any difference when we talk about their WordPress back-end processes. All the functions would be the same as the parent theme whether the activation process or the execution.

The only difference that makes these two indifferent from one another is their dependency. A parent theme executes whole independently, whereas a WordPress child theme’s execution is solely dependent on its parent theme. Without it, it won’t be active and working.

Hence, this is the reason why a WordPress child theme cannot run independently, rather you add customizations or copy the files from the parent theme. Inherits and works on all the basic files and features from the parent theme in addition to all the customizations or modifications you have made into it. This includes, change in website layouts, website features and functions, etc.

Some Pros and Cons of using WordPress Child theme

When you should consider to have a WordPress Child theme?

So far, you might have concluded that you create a WordPress child theme, whenever you want some customizations or modifications to your website. But to your surprise, it is not that necessary.

It solely depends on how many customizations you want on your website. If it is minor tweaks such as fonts or color change. Then, certain WordPress plugins might help you out with the same. If you are looking to change the color of your Parent theme, then the CSS plugin can help you out with it.

But, when you want to make some big changes to your website, such as layout change, change in templates, or adding certain major functions and features, then you need to use a WordPress child theme.

Learn How to create a basic WordPress child theme

So far now, you have learned what is a WordPress child theme and what are its pros and cons. Now it is time to learn how can you create a simple WordPress child theme first. Just follow our comprehensive step-by-step process. For your reference, we will go to use Twenty-twenty one, the latest WordPress default theme.

Step 1. First you need to create a folder in wp-content/themes 

Before proceeding further, one thing you must keep in mind is that a WordPress child theme requires mainly three things, its new folder, style sheet and a function.php file. Hence, the first step is to create a new folder in wp-content/themes.

All the themes must be located at wp-content/theme folder and you must create a new folder with a unique name into it. For your convenience, we highly recommend you to name your WordPress child theme folder name, same as the parent theme name but with adding “child” with it. For example, we are using Twenty Twenty-one WordPress theme, hence we will name the new folder as twentytwentyone-child.

However, you are not bound to use only the name of your parent theme, You can use any name you want but it should be unique and does not include any space, or it can generate some errors.

Step 2. Create a StyleSheet (Style.css file)

Once you have created a folder, now you will require to have a stylesheet. It mainly consists of all the codes that decide the overall design of a website. However, there are plenty of style sheets that can be available but here, we are considering only one.

To create a stylesheet all you need to create a text file and name it style.css. That’s it! You are done, but to make it work, you need to write “style sheet header” just at the beginning of the file.

The above information allows WordPress to properly handles WordPress child themes and each term has its own meaning mentioned below:

• Theme name. The distinctive name of the theme that will show up in the WordPress back end.
• Theme URI. All the documentation and codes will be found at this location. It must be present so that the theme can be accepted into the WordPress directory.
• Description.The description of your theme helps users to understand what the theme is capable of.
• Author. In simple terms, its your name or the user’s name who uses this particular Theme.
• Author URI. Authour’s website.
• Template. This is critical and without it your WordPress child theme won’t work. It is the folder where your parent theme is stored. And you must use the folder name rather than theme name.
• Version. This shows the Version number of your WordPress child theme. Usually it starts with version 1.0.
• License. Shows the License of your child theme and are under General Public License. The License must be the same as of your Parent Theme license.
• License URI. This is the location, where your theme’s license is explained in detailes with all terms and conditions.
• Tags. These Tags will help other users to find our your theme in WordPress directory. Therefore, if you are using some tags, then make sure they are relevant to the theme.
• Text domain. Text domain let theme to be easily translated in different languages that can be easily understanbale internationally.

But for your knowledge, the above all this information is generally doesn’t required. But the only two main information i.e your theme name and template is only required for a WordPress child theme.

And the rest of the information is only important if you are creating a new theme and publishing it. Hence, for a WordPress child theme, all you need to provide the following information as shown below:

Step 3. Create a Function.php file

The last and final step is to create a Function.php file, that we have already discussed with your before. From the name itself, you can easily understand what Function.php file is. It allows you to modify or add new functions and features to a WordPress website. Even you can add or create your own functions and add them.

In other words, a function.php file consists of all the codes that basically decide how a website should look and function. And Creating a function.php file is also easy just like you have created a style.css file. All you need to do is to create a text file and paste the following code into it.

Another thing you must note while creating a function.php file is that twenty twenty-one theme uses get_template_directory( ) to load its stylesheet. And for this, you need to enqueue the child theme’s stylesheet using the wp_enqueue_scripts action.

Upon completing all the above steps, the next thing you need to do is to save your files and Activate your child theme.

Note: You does not require to create a function.php file if you do not want to use PHP to customize your theme. You can also do without it. Style sheets with other files can be sufficient for you. The only reason to mention this is to make you aware that how much this important file is.

Step 4. Activating the Child Theme in order to make it working

Now, the Final and the last step after creating a folder, style sheet, and function.php file is to activate your child theme to make it work. For this, you need to go to your WordPress Dashboard, Appearance > Theme in the WordPress back end, and look for twenty twenty-one child themes. Select the Child Theme and click on the Details option to reveal the contents of the Style sheet header.

Now, select the “Activate” button, that let you activate the theme and your website be look like something as shown in the picture below:

The above image may look like something went wrong, but it is not. The main reason why your website would appear as shown in the picture is due to the unavailability of any style files. And in the absence of style files, your website would appear only in textual format.

From this, you can understand that having a style sheet and a folder is sufficient to create a child theme. And if things are working great for you, it means you have almost successfully created it. But by adding styling you can make it a lot better.

How can you Customize/modify your WordPress child theme?

To make changes in your website’s styling or the way it looks, each WordPress theme has a style.css file in its main directory. Which is only responsible for the appearance of your website. All the CSS goes here only in the main stylesheet. But in some cases, there can be only the theme’s header information is present and these type of themes generally have their CSS files present in a different directory.

But to make customizations into these files, you must have a basic knowledge of CSS. Major Browsers like Google Chrome and firefox have inbuilt inspect element tools that let you see the CSS and HTML of any Web page. For example, if you want to see or inspect elements for a webpage, just right-click on anywhere on the webpage and select the “inspect element” option if you are using Google chrome.

The result will be something like as shown in the picture below:

The browser of your computer will get split into two parts, at the bottom of the browser you can clearly see the HTML and CSS of that particular website.

And When you move your mouse to a different location of your website, the element gets highlighted at the bottom of the webpage.

That shows, how the CSSS ruled out that particular element in the webpage. You can also make certain changes from there itself, we are changing the background colour of the body to #d53d10.

You can easily see how the colour of the background body of the website changes to Orange in color. and if you find this beautiful or want to make it permanent on your website, just copy this CSS rule and paste it into your WordPress child theme’s style.css file. Save the changes and you are done.

If you want to make other changes to the website, Repeat the above process and paste the CSS rule accordingly on your style.css file.

Customizing by editing Template files

Do you know every available WordPress theme has its different Layouts? Similarly, for our WordPress theme twenty twenty-one, we have a header, Navigation menu, Content area, Footer, widget area, and social sharing buttons.

Each WordPress theme has a different layout. Let’s look at the layout of the Twenty Thirteen theme. You have a header, navigation menus, content loop, footer widget area, secondary widget area, and footer. And each of these sections is being managed by their respective files that are present in the Twenty Twenty-one folders which are called templates.

Generally, these template files are named as per the area that they are used for. Such as, if a template file is used for the Header section or navigational Menu, the template file will be named header.php. However, certain areas such body of the webpage where content is present can be of multiple types of content templates present.

Hence, to modify a template file, the first thing you need to do is to choose the template file that you will be going to customize and copy it completely into your child’s theme.

Customzing by Adding new functions to the WordPress child theme

You may have seen many articles on the internet and on certain Youtube videos that you just copy a code from any third party website and paste it directly to your theme’s function.php file to add some functions or features to the website.

But doing this, adding codes directly to the parent theme function files may get disappear, whenever you try to update your WordPress theme. This is the only main reason, why we highly recommend you to use a WordPress child theme and add all your customizations to it.

Hence, to avoid such mishappen, you need to create a new function.php file in your WordPress child theme’s folder and name it as functons.php

How to Troubelshoot the errors if any?

If you are doing it for the first time, or just a beginner, it is highly anticipated that you may encounter some problems during creating a WordPress Child theme file. However, the most common error that you might encounter is a syntax error. It generally happens if you missed some elements in the code. Which can be easily eliminated by carefully looking out the codes.

And if still, you are facing certain issues, you can simply delete the child theme and create a new one. After all, you are not making any changes in the parent theme and if you have done any mistake or forget to mention anything in the Child theme you can simply delete it and start again without affecting the parent theme file.

Summary

As Far now, you have gone through almost every main point of a WordPress Child theme and learnt how can it be useful and when, why and how you can create it. No doubt, Creating a child theme is one of the best and precautionary measures one should always follow while customizing their theme without directly adding your code snippets into the parent theme.

Whether you have to change the styling, layout or functionality of your website, simply create a Child theme first and add your modifications to it rather than to the parent file. I hope, you will follow the above valuable points about the WordPress Child theme and will implement it on your website to take the advantage of it. Without losing any data or customizations you have already made in your next theme update.

If you really find this post helpful to understand all concepts of the WordPress Child theme and help you out to create a child theme for your website. Or if you like to add more valuable points to it, please do let us know in the comments section below.

Frequently asked Questions