How To Create A Child Theme In WordPress

WordPress is a powerful CMS, used to build over 27% of all websites on the internet. It offers over 3000 free themes and over 8000 premium themes, that are GPL licensed, for developing websites.

While creating a website, you may choose to among brilliant themes. However, you should get familiar with how to create a child theme.

Let me explain why.

All WordPress themes release updates every now and then to fix bugs and add new features. This is good in the sense that your theme is getting more and more secure with fewer bugs and good new features.

However, if you have made any customization to the theme, then you will face issues.

Basically, when updating a theme, all the core files of the theme are replaced with new updated files.

Hence your theme will lose all the customizations that you implemented. Also, there is no way to get them back (unless you kept backup) once updated.

You might think you can simply not update your theme to avoid this problem. But this is not a good practice. Over time more and more bugs will be noticed while becoming backdated and eventually cease to be responsive.

But you don’t have to go through all that. WordPress offers a solution through ‘Child Theme.’

What Is A Child Theme?

A child theme is basically an extension of your main theme where you can implement all your customizations without altering any core files of the theme.

This means that even after you update your main (parent) theme, your customizations will still remain on your child theme.

The way it works is that only the files that you intend to customize, are copied (or created) into your child theme. You can implement your changes there.

When running your site with your child theme activated, the core features of the themes will be loaded from the main (parent) theme files and the customizations will be loaded from the child theme.

Consequently, when you update your theme, it will only change the core files in the parent theme, thus your customizations will still remain unchanged.

Please Note: A child theme can’t work independently. It depends on the core files of the parent theme for most of its functionalities. Any important files missing in the parent theme will mean that the child theme will not work.

But you are free to make any changes in your child theme without worries and it won’t alter the core files in your parent theme.

Why Use A Child Theme?

When applying major changes to your themes, child themes are the safest route possible.

Child themes give you the following advantages:

You can make portable changes in the appearance of your website without disturbing its core functionalities.
For example, if you are planning to add a new template in your site’s appearance, create it through your child theme. This will safeguard the core files.
Any modifications you make won’t be lost when updating your theme. The update will only replace the files in the parent theme’s folder, while safely keeping your customizations in the child theme folder.
Child themes keep the customized files separate from the parent theme folder. Hence there is no chance of altering core files even by mistake.
Saves your time and energy. For instances, in versatile WordPress themes which contain very complex coding, when detecting the codes that you need to edit, it may be very confusing and waste a lot of time.
But with a child theme, you can simply add the codes of your new functionalities in a separate file that is created under the child theme folder. Thus reducing the hassle of code duplication.
A child theme can be used to test and learn the different functions of your theme for your own development. You can apply codes and new functionalities and run your experiments on the child theme. In this way, you can practice and learn customizations, without having to risk altering important codes in the main theme.

Now that you have learned a little about child theme, let’s learn how to create a child theme.

Creating A Child Theme

Child themes can be created in two ways:

Create a Child Theme manually (recommended)
Create a Child Theme using a plugin

1. Create A Child Theme Manually

Creating a child theme only needs two main files to be present. You need to create a ‘style.css’ sheet and a ‘functions.php’ file.

We will use the WordPress default theme, Twenty Seventeen, as our example. In the following part, we will see how to create a child theme for Twenty Seventeen.

Step 1 – Create a Folder in wp-content/themes

In your file section, all the theme information are kept in ‘themes’ folder. You need to create a separate folder here for your child theme.

When creating a child theme, it is better to name the folder adding ‘-child’ as a suffix to their relative parent themes. In this case, I will save it as ‘twentyseventeen-child’.

This makes it easier to keep track of which theme it represents, in case you have multiple themes. However, you can name your folder anything you want.

Step 2 – Create a Style Sheet

You need to create a ‘style.css’ file in your child theme folder. This will contain all the CSS codes to define the decoration and alignment of your theme.

Open a text editor (such as Sublime Text Editor) and save it as ‘style.css’ in the child theme folder you just created.

Now, according to WordPress Codex, you need to input the following information:


/*
Theme Name: (Name you assigned to the child theme)
Theme URI: (URL of your main theme/child theme slug)
Description: (Purpose of the child theme or what it represents)
Author: (Name of the developer of the parent theme)
Author URI:(URL to the website of the theme developer)
Template: (name of the parent theme folder)
Version: (the version of the child theme you created, will change per modifications)
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: (categorize your theme according to attributes of purpose to keep track on your own)
Text Domain: (set a text domain name)
*/

This is how my one will look like,

To run the test version of your child theme successfully, it is mandatory for you to add the ‘Theme Name’ and ‘Template’ in a proper way. Otherwise, your installation will show an error code.

The rest of the details don’t have to be accurate, but its a best practice to keep proper track of your child theme and it’s purpose.

Once this data is in place, save the file and move on to the next step.

Step 3 – Create A ‘functions.php’ File

The ‘functions.php’ file allows you to add new features or templates, modify them or even eliminate an existing one.

In this, you are welcome to create your own PHP or native WordPress functions and make them applicable while having zero effects on the parent theme functionalities.

Again, open a text editor (such as Sublime Text Editor) and save it as ‘functions.php’ in the child theme folder.

Paste the following codes in this file (which will enqueue the parent and child theme style sheets):

<?php

function my_theme_enqueue_styles() {


    $parent_style = 'twentyseventeen-style';


    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'child-style',

        get_stylesheet_directory_uri() . '/style.css',

        array( $parent_style ),

        wp_get_theme()->get('Version')


   );

}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );


?>

Code courtesy: developer.wordpress.org.

**You can set a declaration for $parent_style with any name you want. But make sure it is unique for every enqueue you are adding each time.

Please note that the above codes will work only if your parent theme holds all the CSS codes in one ‘style.css’ file. But if you have multiple CSS files in your parent theme, you need to set their directory, specifically in the get_template_directory section as well. For example, if I have a ‘code.css’ file in the parent theme which I wish to enqueue, and it is in a second folder ‘Coding” in the template directory, then I need to set the code ‘wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/Coding/code.css’ );’.

Although we highly suggest not to have multiple CSS files in your child theme, if you do by any chance, you need to enqueue each of them with your parent theme style sheet.

Step 4 – Activate Your Child Theme

You have come to the final stage of creating a child theme. Now all you need to do is to create a ‘.zip’ file of the existing child theme folder, in my case zip of ‘twentyseventeen-child’.

Then go to your WordPress Dashboard. Under ‘Appearance’ click on ‘Themes’.

Click on ‘Add New Theme’ on the page.

Upload the zip folder that you just created for your child theme folder. Click on ‘Install’ and that’s it! You have successfully uploaded your child theme.

Now you can simply activate your child theme and customize it at your own convenience.

2. Create A Child Theme Using Plugin

The manual process can be a hassle at times. You can also use plugins to create a child theme.

Plugins such as One-Click Child Theme, Childify Me, Child Theme Configurator WordPress Plugins are great plugins to help you create a child theme.

To help you understand the process of creating a child theme using a plugin, we will use “Childify Me” as a reference and show you the process.

Step 1

Go to the Plugins section of your dashboard and click on ‘Add New’.

Step 2

Search for ‘Childify Me’ plugin. Install and activate it.

Step 3

Now go the ‘Appearance’ section from your dashboard. And choose ‘Themes’.

Make sure that the theme you are going to make a child theme of is activated. In this case, we are working with Twenty Seventeen. And it is already activated in our reference dashboard.

Step 4

Click on ‘Customize’ of your active theme to get into the customization panel of your active theme.

Step 5

Click on ‘Childify Me’ and set the name for your child theme. In this case, we suggest to name it according to your parent theme.

Click ‘Create’ and your child theme is successfully created.

Conclusion

We have shown you two ways to create a child theme. But we strongly recommend creating a child theme manually since not all plugins are compatible or accurate.

The instructions given in this article are pretty simple and only convey the root parts of creating a child theme. Child themes make your theme customization easier. Any modification you make to your main theme with the help of a child theme is safe and has zero negative effect on core files of your theme.

Hope this article was useful to you.

How To Create A Child Theme In WordPress – 2 Easy Ways?

What Is A Child Theme?

Why Use A Child Theme?