How to Create Child Theme in WordPress?

As the name indicates, child theme is the theme inherits the functionalities from the parent theme. This will be showing in WordPress admin dashboard like any other theme under “Appearance > Themes”. In this article we will discuss what scenarios you may need a child theme and how to create child theme in WordPress along with frequently faced issues with child themes.

Why People Modify Core Theme Files?

More than 80% of WordPress users need customizing their parent theme regardless of whether the parent theme is freely downloaded from the WordPress repository or purchased from third party services. Ideally themes are bundled with generic features to satisfy larger user base rather than focusing on specific needs.

Below are some of the common cases where you may need to modify the parent theme’s files:

• To enhance the feature of the parent theme you may need to add functions or specific php codes on any of the core theme’s file like functions.php.
• To enhance the feature of any of the plugins installed on your site, you may need to modify the parent’s theme files.
• Sometimes tweaks are required on theme’s file due to conflict with functionalities like emails, sharing, etc.
• You may need to modify the layouts for your posts or pages. For example, instead of showing the published date on the articles you may want to display the last updated date which needs modification in single.php file of your parent theme.
• Creating custom post types, taxonomies and any additional customizations.
• You may be adding advertisement codes directly on the php templates.

Generally users update the themes file directly to achieve such custom needs. The problem here is whenever your parent them is getting updated you will either lose all custom changes or need to redo the changes on the updated theme. Believe it or not, keeping track of theme modifications will be a painful task and most probably you will forget one or other function when re-updating your parent theme.

Besides users, WordPress theme developers need lot of customizations to the core theme to test and develop new functionalities. Having a child theme helps developers to test and build the new theme quickly.

Why You Need Child Theme?

Since it is unavoidable to customize the parent theme, it makes sense to have a work around of keeping the parent theme as it is and having additional customisations at the same time. WordPress offers this via child theme which inherits all parent theme’s feature along with additional customizations defined inside child theme. In this way you can keep all your customizations in a separate box while not worrying about updating the parent theme.

How to Create Child Theme in WordPress?

Creating a child theme is easy in WordPress so you do not need to get panic or worry about technical stuff. You can do it yourself manually right from WordPress admin dashboard and we will explain the step by step instructions as below.

Creating Local Child Theme Folder

We will explain with an example of “twentysixteen” WordPress theme as a parent theme and we will create a child theme called “twentysixteen-child” for easy to understand purpose. Though you can give any name, prefixing with “-child” will help to understand this is a child theme especially when you have multiuser environment.

The first step is to create a new folder on your PC or Mac and name it as “twentysixteen-child”. Inside the folder, create two plain text files and name it “style.css” and “functions.php”. You can also copy these two files from the parent twentysixteen theme and delete the content to have empty files. The folder structure should look like below on your PC:

Creating style.css File for Child Theme

Creating Stylesheet for Child Theme

The second step is to open style.css file and paste the following code:

/*
Theme Name:   Child Twenty Sixteen
Theme URI:    http://www.yoursite.com/twenty-sixteen-child/
Description:  Twenty Sixteen Child Theme
Author:       Your Name
Author URI:   http://www.yoursite.com
Template:     twentysixteen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-sixteen-child
*/

Replace yoursite.com and the author name with your own details. The “Template” placeholder is important to refer the parent theme’s name, for our example we use “twentysixteen” as a template.

Enqueuing Parent Style to Child Theme

The third and last step is to link parent theme’s style sheet to your child theme. The import method by adding “@import url(“../twentysixteen/style.css”);” to your child theme’s style.css is no longer best and the recommended way is to enqueue the parent style to your child theme’s style. In order to do so add the following code inside functions.php file of the child theme:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'twentysixteen-css', get_template_directory_uri() . '/style.css' );
}
?>

Here the assumption is that the parent theme has only one style.css file which is true for twentysixteen in this example. If your theme has more than one style sheets then ensure all dependencies are enqueued to child theme’s functions.php file.

That’s it!!! You have created a child theme now and the next step is to upload it on your site.

Uploading and Activating Child Theme

Archive the “twentysixteen-child” folder on your PC or Mac to a .zip file as WordPress theme should be in a compressed zip format. The compressed zip file of your child theme should have style.css and functions.php as created above. Now login to your WordPress admin dashboard and navigate to “Appearance > Themes” and upload your child theme file “twentysixteen-child.zip”.  Once uploaded successfully the child theme can be seen under “Appearance > Themes” which you can activate like any other themes.

You may not find any differences on the site since the child theme also uses parent theme’s style and templates.

Modifying Parent’s Style

Here is the important need of child theme as to customize the styles and other templates of parent theme. Any style definitions on the child theme’s style.css file will OVERRIDE the definition on parent theme style.css. For example, the twentysixteen parent theme is having the body background color of #1a1a1a which you can change it to #5a1c1c just by adding the following code inside the twentysixteen-child’s style.css:

body { background-color : #5a1c1c;}

Adding Additional Functions

Similar to styles you can also add additional functions on your child theme’s functions.php instead of modifying parent theme’s file. The difference here is while child theme’s style.css file override the parent’s style, any functions defined in child theme’s functions.php will load IN ADDITION to parent’s function.php file. Basically child themes functions.php file loads before the parent’s functions.php file and helps you to add any additional functions you need.

Modifying or Adding Other Template Files

You can also modify any template files of your parent theme like header.php or single.php. For example, if you want to modify the PHP code inside single.php then add single.php file under your child theme’s directory and modify the code. WordPress will USE CHILD THEME’s TEMPLATE FILE instead of the parent theme’s file. Ensure to have same directory structure for the files to work, if you want to modify the loop.php file which is located under “twentysixteen/template-parts/content.php” then create a similar file structure for child theme like “twentysixteen-child/template-parts/content.php”.

WordPress will first look into the child theme’s directory to use the template files and then use parent themes file if not found. This will be very useful for adding custom post or page templates for your theme. For example, if you want to have a custom template for demo posts then create a template named “single-demo.php” and place it inside the child theme directory. You can modify the “single-demo.php” file and WordPress will use this template (instead of single.php from parent theme) when demo posts are loaded.

General Issues with Child Themes

There are some issues you may face while creating child theme for your site, we recommend not to get panic and try it on the staging site or localhost before deploying it on live site. Here are some of the frequently faced issues while using child theme on WordPress:

• When you activate the child theme some stuff like menus, sidebar widgets and theme options may disappear. You may need to resave or recreate those stuffs for your child theme.
• If you see the white screen of death then the probable reasons could be not using correct quotes. Try to edit the files with simple text editors like Notepad or copy and paste the code from parent template files.