Scroll to top
USA
651 N Broad St, Suite 206,
MiddleTown, New Castle,
Delaware - 19709
Canada
635 Ashprior Avenue,
Mississauga, Ontario,
Canada - L5R3N6
India
34, Shiwanshu Bunglows
Vadodara, Gujarat - 390007

How to create a child theme in WordPress: A Step-by-Step Guide (2020)

79 / 100

WordPress is a platform that allows you to customize and change every aspect of your site. There are countless themes in the WordPress store and even more options available by independent third-party developers. 

If you have a basic knowledge of HTML, PHP, and CSS, you can customize your site theme manually and implement your vision and changes, and a Child Theme is the correct asset for such a change. 

You can look for a plugin that provides you with the features you need, but it’s unlikely that you will find one that perfectly fits your requirements. And what do you do if you want to change a specific part of your website’s theme without revamping the entire look of the site?

That is why the best practice to customize your site is by making a child theme.

What is a Child Theme?

While you can choose to directly edit the theme of your website, the biggest disadvantage is that whenever you update your theme, all your edits will be erased. WordPress has a feature called child themes to deal with this problem and give users complete freedom over customization.

A child theme is a theme that inherits its properties from a pre-existing parent theme. Changes made to the child theme are reflected on your website but are not erased when you update the parent theme. A child theme cannot be a standalone piece of code; it works in tandem with a parent theme and has its properties and functions.

Step-by-step Guide to Create a WordPress Child Theme

A child theme allows users to make countless edits to the style, functions, and layout of the theme running on your website by adding additional pieces of code to the child theme. While the finished product may not resemble the parent theme, no child theme can exist without a parent.

Advantages of Using a Child Theme

  • You can pick a parent theme that suits your requirements and build on that to get the perfect result.
  • Having a child theme gives you the liberty to perform unlimited customizations and experiments.
  • A child theme ensures hassle-free updates. Your changes aren’t lost after updating the core parent theme.
  • If you don’t like the customizations you have made and want to revert to the original, you can simply disable the child theme.

How To Create a Child Theme in WordPress

A child theme needs three components- a separate folder, a style sheet or CSS file, and a functions.php file. Let us examine the steps to create a child theme in detail.

Three Components of A Child Class named Adrenaline

Step 1: Create A Folder

A child theme, like all other WordPress themes, is located in the wp-content/themes folder of your installed WordPress software. Navigate to this folder and create a new folder naming it in the following syntax for convenience – – . 

For example, if the name of your theme is “adrenaline,” name the child theme folder “adrenaline-child.” This allows you to easily access and differentiate between the parent and the child themes.

Step 2: Create a StyleSheet

A stylesheet determines the design of the website according to the code it contains. To create a child theme, simply create a text file and name it style.css. Every stylesheet needs to have a few lines of code known as the stylesheet header in the beginning. This is information that helps WordPress identify the theme. 

The following example from WordPress Codex gives you the layout of the style.css file header. Notice that the entire header is put inside comments. This part of the code offers no functionality or design to the theme but allows WordPress to identify the file.

/*
Theme URI: https://example.com/twenty-fifteen-child/
description: >-
Twenty Fifteen Child Theme
Author: John Doe
Author URL: https://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URL: https://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

In the code, the default WordPress theme “twentyfifteen” has been used as the parent theme, and a child theme for the same has been created. Let us examine the different parts of the code.

  1. Theme Name: This is the name that you will give to your custom theme. When activating the theme from the backend of your website, you’ll have to select this one.
  1. Theme URL: This is the location of the page where WordPress can find the code or the demonstration page of the theme. 
  2. Description: This section is used to describe the purpose of the theme and shows up under Theme Details on WordPress. It is an optional section.
  1. Author: It is the name of the person creating the theme.
  1. Author URL: You will put the address of your website here.
  1. Template: This is the most important part of the code and is a compulsory field. The folder which contains the parent theme needs to be named here. Be sure to use the folder name and not the theme name. This field is case-sensitive, and without it, your theme won’t be accepted as a parent theme.
  1. Version: This is an optional field to display the version number of your child theme. You can use it to keep track of the updates you make to the child theme. Usually, people put 1.0 when creating a child theme.
  1. License: This is the license for your child theme. You can use the same license as that of the parent theme.
  1. License URL: This is the link that contains information about the theme’s license. One again, you can stick with the information from your parent theme.

If you’re just starting or are looking to try out some changes to your themes, you may find this file to be a bit overwhelming. Unless you plan to publish the child theme you are making; the only necessary parts are the Theme Name and the Template.

Step 3: Create A functions.php File

The functions.php file is used to add design, style, and functionality to your WordPress child theme. Without a functions.php file, your website will look like this- 

No CSS and theme in Website

This file can contain native WordPress functions as well as functions you create on our own. It is responsible for making the fundamental changes to the look and feel of your website. Similar to the style.css file, you need to create a text file and name it functions.php. After adding the opening PHP tag, you can make changes to your site. 

//* Code goes here

To inherit the stylesheets of the parent theme you can use the wp_enqueue_style() WordPress function using the following syntax:-

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri().'https://wpuber.b-cdn.net/style.css' );
}

From this point onward, you can add your custom functions to the functions.php file and make changes to the child theme. 

Step 4: Activating the Child Theme

To activate the child theme, go to the backend of your website and click on Appearance => Themes. In the list that appears, you will find the name of your child theme, and you can click on it and use the Activate button to activate your child theme. 

WordPress won’t automatically stop using functions from your parent theme after the child theme is activated unless you put specific functions to override the parent theme in the functions.php file. If you haven’t made any customizations before activating your child theme, your website will look the same, but it will technically be running on the child theme after it is activated.

Using a Plugin to Create a Child Theme

If you are not confident in configuring a child theme for your website yourself, you can also use several free WordPress plugins. Such plugins include One-Click Child Theme and Child Theme Configurator

img 5f40a15985be6

 

These plugins reduce the hassle of creating folders and style.css files manually. One can simply install the plugin and open it from the WordPress dashboard. After filling in the required fields such as the Theme Name, Template, and Author, the plugin automatically creates a child theme.

This can be activated in the list under the Appearance => Themes menu and can be customized as per your choice. 

In The End…

A Child Theme is the best way to make changes to the appearance and functionality of your site. It allows you to save the edits you make and are not affected by updating the parent theme. You can customize various segments of your website, and the possibilities are limitless. 

A child theme also allows you to experiment with code and ensures that your website isn’t affected if you make a mistake. 

Follow the steps given above to create a child theme for your website and customize away. We, at WP Uber, would love to hear about your experiences and would love to help you with the challenges you faced while creating a child theme. 

Don’t forget to follow WP Uber for more informative articles about WordPress and share this article.

Author avatar
Tim Michaels
I am into WordPress and web development for the last 10 years. I use my experience to help people just starting with WordPress. Follow my blog at WP Uber for everything related to WordPress.
We use cookies to give you the best experience.
Do NOT follow this link or you will be banned from the site!