How to create and use WordPress child theme

By September 13, 2016 May 9th, 2019 Knowledge Base

In this tutorial, we will go over how to create and use child themes, and why using them is so important. A special note for Catanis Themes customers only: If you are only looking to perform simple CSS changes to your theme, then you can use the Custom CSS box in Catanis Panel instead of creating a child theme. For more in-depth changes that require editing php files, a child theme must be used.

Why Child Themes?

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. By activating a child theme, you ensure that changes you make to the template files are not overwritten when upgrading the main theme. It’s pure genius!

Child themes solve these problems:
Child themes allow you to make changes and customizing your theme even easier and without affecting the original theme’s code, which makes it easy to update your parent theme without erasing your changes. You create a separate set of files that you can use to customize the theme without affecting the original theme at all. It also makes sure that you will never ruin your original theme as you are never actually modifying the files. You can always turn off your child theme and fall back on the original.

Creating a Child Theme

The first you need read child theme guide ,there you can see that there are only two things required to have a child theme:
1. A new directory in your themes folder with your child theme name.
2. A styles.css file in that new directory with specific header information.

In this example, we will be creating a child theme for our AMMA theme( example ). First things first, we need to create a new folder for your child theme. Naming it something like /wp_amma_child/ is conventional. Within your new theme folder, create a file called style.css and fill in the information as outlined below. The theme Name, URI, Description and Author are totally up to you.

The most important parts of this file are the “Template:” and @import sections, which identifies the parent theme imports the CSS from the original. You must ensure that the path to your parent theme’s css file is correct, and that the “Template:” parameter correctly identifies the name of your parent theme. You need to change “wp_amma” to match the name of your parent theme. If the default stylesheet is not style.css (it almost certainly will be), you will also need to change that to suit as well.

How to create and use wordPress child theme

How to create and use wordPress child theme

 

Activating Your Child Theme

After you have created your child theme folder and style.css file, you can upload and activate your new child theme. Uploading and activating a child theme is no different than a normal theme, simply upload it via the Appearances > Themes page in your WordPress Dashboard and activate it. Before you upload it, you must first ZIP it. Make sure that your parent theme is also uploaded (In the case of our example, the wp_amma theme).

At this stage, you won’t notice any changes to your theme’s design, because you haven’t actually made any. However, any future additions to your child theme’s style.css will have an effect upon your site. And as intended, any future update to your parent theme will not affect your child theme’s style.css file.

Modifying Your Child Theme

Now you can add your custom css code in style.css to change for your theme, at this point all well and good. Because the CSS in the child theme’s style.css file overwrites the original. But what if I want to make changes to my parent theme’s PHP files?”

It’s very simple, if you want to make a change to a specific PHP file in your parent theme, just make a copy of it, and paste that copy into your child theme’s directory. Also you can create new PHP file such as WordPress template and include the relevant information, and you’re good to go.

Note: One thing you must bear in mind is that the directory structure in your child theme should match that of the parent theme’s. So if you decide to edit a PHP file in “/parent_theme/includes/example.php”, you should place it in “/child_theme/includes/example.php”.

Creating a Child Theme with Plugin

If you are having difficulty wrapping your head around the creation of the child theme folder, then this plugin will create one for you with the click of a button! There’s a plugin you can use that will create a child theme from within the WordPress dashboard: http://wordpress.org/extend/plugins/one-click-child-theme/

Wrapping Up

As you can now see, creating a child theme is extremely simple, and you have no excuse not to do so. Enjoy!