blog posts

Child theme

What is a child theme in WordPress? And How to work with it!

Full Child Theme Review in WordPress

Child Theme WordPress Themes may seem a bit vague at first, but once you learn the tips, you will realize their beauty, and they will be very enjoyable.

What is a Child Theme?

Child Theme is a WordPress theme that downloads files and features from another main template.

The most basic Child Theme in the WordPress folder contains a style.css file. One of the questions that are probably on your mind right now is why should we use a Child Theme even though there are so many Parent Themes?

The answer is very simple. Most Parent Themes are updated from time to time. So if you have a master template and want to customize its code and styles, you will miss all these changes the next time the template is updated. In such cases, Child Themes will help you. This sentence allows you to customize your Parent Theme without the risk of losing changes during the update. Of course, if you do not care if hackers attack your website, you can disable the update.

We mentioned earlier that Child Themes take their functionality from the original format. But how does this happen? Think of Child Themes as a subset template, as they mimic the properties of their Parent Theme. It’s like making a copy of the original template without having to copy anything! Sounds like magic, right?

The secret is only one line of code found in style.css. In the following, we will create a Child Theme and introduce some basic concepts to reveal the line we talked about and better understand Child Themes.

To create a Child Theme, you need to create a folder in your WordPress template and name it as you wish. Create a style.css with this code:

/ *

Theme Name: The name of your child theme (e.g., Total Child Theme)        

Theme URI: http://www.example.com (Your child theme’s URL)

Description: A brief description of your child theme

Author: Your name goes here

Template: Your parent theme directory name (e.g., Total, twenty fourteen, etc.)

Version: 1.0.0

* /

Then save this style.css in your Child Theme folder. Now go back to the sixth line of the code above.

This line tells your Child Theme from which Parent Theme to get the template functions and files. This simple line connects your Child Theme to the main template and acts as a communication bridge through which the Child Theme, template files, and Parent Theme capabilities are received. This means that you must install Parent Theme on your WordPress platform.

So without this line, you will not have a Child Theme. All you need is a folder and a regular style.css file.

In short, when you activate your Child Theme, the Template line inherits your main template. Also, if you update your Parent Theme once, all the changes you made to Child Theme will not be lost.

Benefits of using Child Theme

There are many benefits to using Child Theme, and we recommend that everyone set up and enable it to customize their website template. Here are some key benefits of using Child Theme.

– Secure updates

Child WordPress Themes only take functions, code, and styles from the main template, allowing you to customize your website without manipulating the Parent Theme. So whenever developers update your original template, you can safely update your website without losing any changes.

– Child Themes are easily expandable

Child WordPress Themes give you a lot of flexibility. This way, you can create a new template that is not part of the original template but uses its functions, styles, and other features. There are also many frameworks for developing these templates.

– Child Themes are safe

Every human being is a developer, and we all know that human beings are fallible. Everyone makes mistakes, and mistakes are forgotten. For example, if you forget to code a section using a Parent Theme, the output will have problems. But this is a little different in Child Themes. This means that if you forget the code, WordPress will automatically download an alternative to the original template. Of course, this is only if the code is in the original format.

Disadvantages of using Child Theme

While Child Themes are great and highly recommended, they also have their drawbacks to consider.

– Learning curve

Child Themes are used to extend or customize the main template. So if you are not a developer, you can not do much with them, and you have to learn to code. To do this, you need time to learn the functionality of the main templates and WordPress with a little bit of coding in general so that you can make the most of the full potential of Child Themes.

– Changes to the original template

If you build your website around the main template, you may have to change a few things like menus, widgets, or template features when you change your Child Theme. Some templates store settings in the database based on the template name, so when you change your Child Theme, you may seem to have lost all the Parent-Theme settings, but do not worry because they are secure in the database. In this case, you need to go back to your Parent Theme to copy the settings and transfer them. Most templates provide a user panel in the dashboard so you can copy its settings before changing them in Child Theme and using the Import / Export option. Easily move.

Additionally, when using Child Themes to provide additional functionality to your site, if you change the Parent-Theme, you may have to move some functions to a new Child Theme, rename your current Child Theme, or from a plugin. Get help.

How to create a Child Theme in WordPress?

First, enter your WordPress panel, then open the … / wp-content / themes directory and create a folder with the desired name in it to save the style.css file there.

Note: You can either access the themes directory through File Manager in your cPanel, or you can use a client such as FileZilla if FTP is enabled.

Next, open your text editor (for example, Notepad ++ ) and create a style.css file with the following information:

/ *

Theme Name: The name of your child theme (e.g., Total Child Theme)

Theme URI: http://www.example.com (Your child theme’s URL)

Description: A brief description of your child theme

Author: Your name goes here

Template: Your parent theme directory name (e.g., Total, twenty fourteen, etc.)

Version: 1.0.0

* /

This is the same code we used before.

Upload the style.css file to the Child Theme folder. At this point, your style.css file is empty (except for the top lines, which have no style), so do not expect the created template to look anything like Parent Theme. But then you can enter your main template style.css by creating a new file called functions.php in the Child Theme folder and adding the following PHP code:

function total_child_enqueue_parent_theme_style () {

        

        // Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)

        $ theme = wp_get_theme ( ‘Total’ );

        $ version = $ theme-> get ( ‘Version’ );

        

        // Load the stylesheet

        wp_enqueue_style ( ‘parent-style’, get_template_directory_uri (). ‘/ style.css’, array (), $ version );

        

}

add_action ( ‘wp_enqueue_scripts’, ‘total_child_enqueue_parent_theme_style’ );

Be sure to change the Total section and enter the name of your original template. This code allows Child Theme to dynamically update the version number added to style.css to the original template, so when the Parent-Theme is updated, it changes your browser and CDN if changes are made to its style.css file. Put the stylesheet in the cache and avoid possible problems while viewing the page.

Customize Child Theme

Now we come to the part where we talk about the middle ground. We usually create the Child Theme to customize the main template. All you have to do is add your styles to the style.css file. The same styles in the original template are then automatically deleted.

To edit template files, copy them to Child Theme and then apply the changes there. But not all files can be copied and modified in Child Theme; you can only copy template files. So if the template has specific files for include, inc, functions, or other folders that hold custom classes and functions, you may not be able to copy and modify them. To do this, you must use filters or action hooks to change the default Parent Theme functions.

You can also add custom template files to your Child Theme for added functionality.

Also, use the functions.php file to add custom functions and use Parent Theme or WordPress filters. Remember to never add new functions to the functions.php file in your Parent Theme!

WordPress first loads the template files and styles into your Child Theme, and if something is missing, put the relevant files in the original format.

Conclusion

Child Themes are very powerful for customization and scalability. In addition, they provide a good background for anyone looking to learn WordPress template development. Creating them is simple and fun and gives you many options to change your WordPress site in any way you like.