How to Create a Child Theme in WordPress

WordPress themes are no doubt outstanding, but from time to time we all want to make minor tweaks here and there. How about changing the call to action button? Or change the font size? Or perhaps use different colors?

According to a WordPress Theme Survey, about 85% of people choose to customize their themes. Among these only, 35% of people use a child theme to do so.

There are two major reasons for that: lack of understanding and perceived difficulty of creating a child theme!

Allow us to give you a brief about child theme and how you can get the job done easily!

Understanding Child Theme

Child Theme is made to mirror the current theme known as Parent Theme. It can be used to modify any part of the parent theme. A child theme is ideal if you want to make changes to your site yet still preserve the look and functionality. If you directly edit the functions.php or style.css files of your theme, the update will just delete everything.

How to Create Child Theme?

Generating a child theme is actually a piece of cake – opposed to the general perception. All you need is to create a folder – wp-content/themes, and one file – style.css. The theme name, URL, description, and Author are up to you.

/*
Theme Name: ABC Child Theme
Theme URI: https://www.xyz.com/gallery/abc/
Description: ABC Child Theme
Author: XYZ
Author URI: https://www.xyz.com
Template: ABC
Version: 1.0.0
*/

The information above is standard, you should change it according to your requirement. But it is ideal to use a descriptive name such as ‘ABC Parent Theme” or “ABC Child Theme”. To make your child theme valid, you must alter the template, this is required to tell your child theme which parent theme it is linked to.

When specifying the Template information e.g. Template: ABC, the value you enter for ABC, should be the folder name the theme belongs to and not the templates name.  If you fail to do this, you will get a warning the the parent template can’t be found.  For example, the template for this site is called Best Business Pro, but the directory the theme is in is best-business-pro, so our child theme css looks like this:

/*
Theme Name: Best Business Pro - Child
Theme URI: https://webbasix.com/downloads/best-business-pro-child
Author: WEBBASIX
Author URI: https://www.webbasix.com/
Template:  best-business-pro
Description: Child theme of Best Business Pro
Version: 1.0
*/

WordPress would consider your child theme’s style.css file as default. Which results in your theme render no CSS styling. Hence, you will be required to mention the parent theme’s CSS file within your child theme, through this coding:

@import URL("../xyz/style.css");

Once your child theme is active, WordPress will import the CSS from your parent theme. Further, the CSS style confined in your child theme will then be executed by WordPress.

Once this is done, save your new style.css file to your child theme’s folder.

How to Activate Your Child Theme?

Yay! That was easy… right? Now all that is left is activation process.

Navigate to “Appearance > Themes” in your WordPress admin area. You will able to view both your parent and child theme, but only your parent theme would reflect as “active”.

The data you have incorporated in your CSS style in child theme should be visible to you, simply hit “Activate”, and your child theme will go live!

You won’t notice any change in your theme’s design since you haven’t yet made any changes. But all future changes that you make in your child theme will be visible on your site. But any changes you make on your parent theme will not be applied to your child theme.

Have Fun Creating Your Child Theme!

WordPress is an incredible platform through which you can build your website for several purposes. To top it off, WordPress also provides the structure to create plugin framework or theme framework. You can create stable, high-quality theme with incredible ease while also implementing your uniqueness. This means faster development at a lower cost.

Leave a Reply

Your email address will not be published. Required fields are marked *