What is a Child Theme and how to create one in WordPress

Introduction #

WordPress Child themes are themes that work in conjunction with an actual (parent) WordPress theme and inherit all the functionality, features, and style of it. Child themes are considered the primary method for theme customization purposes.

The parent-child theme concept has been developed by the WordPress core theme to allow users to customize their themes in an efficient and safe way. As we all know, WordPress themes are updated on a regular basis. When a theme is updated, any custom changes previously performed are overwritten. Previously, it was not possible to update a WordPress theme without losing these custom changes. The users had two options – either to waste their efforts and lose their work or put their website at a risk of exploits due to security vulnerabilities of the outdated theme. Unlike parent themes, child themes allow customizations to be kept separately and unaffected by the parent theme update.

When to use a WordPress Child theme? #

First of all, you need to know that not all WordPress themes are developed with consideration of the parent-child theme conception. WordPress parent themes are often referred to as theme frameworks that include their own hooks and filters. You have to carefully choose the parent theme and ensure it will be easy to work with and adequately functioning when configured as a child theme.

As a second, you need to determine the purpose of creating a child theme. There are a few situations when this might not be the most effective solution, depending on what you are planning to achieve.

If you are using a custom theme developed specifically for you, you do not have to necessarily create a child theme, as there is no risk for you to lose your modifications. Do not consider that as a recommendation not to use a child theme, but more like a possible option. If you do not feel comfortable directly editing your theme files, you can totally go for a child theme if your custom theme allows such configuration. Besides, editing the theme files always comes with a slight risk, especially if you are not an experienced developer.

In case, your goal is to add a specific functionality rather than perform design-related customization, using a plugin or codding a plugin could be a more appropriate approach. In such a scenario, you will be able to keep the functionality if you ever decide to switch from the current theme to another one. While, if the functionality is implemented into the child theme, it will be lost.

How does a WordPress Chil Theme work? #

As we previously pointed, the Child theme inherits the design and functionality of the Parent theme, but how exactly that works?

The child theme contains specific instructions that tell WordPress it is a child theme and which the actual parent theme is. Then WordPress uses the code from the parent theme by overriding only the necessary parts of it by the code defined into the child theme.

Each child theme must have two absolutely required files – a stylesheet (style.css) and a functions file (functions.php). The stylesheet file contains a commented text, which represents the instruction that tells WordPress this is a child theme and what the parent theme is. The functions file includes a function that enqueues the stylesheet file from the parent theme, so the stylesheet of the child theme can be loaded first. It is also used to add specific functionality by inserting the necessary code into the file.

Depending on what exactly you want to achieve, you might find yourself in need of creating additional files in the child theme, such as template files, template parts, include files, etc.

The most challenging thing you will face with child themes is probably learning how to work with them. Robust frameworks will require quite some time until you get used to their conception as each of them has unique hooks and filters.

Now, before we step into actually creating a child theme, we would like to strongly advise you to work on a development or staging website.

Creating a Child Theme #

To set up a basic WordPress child theme, you need to create the two required files we have previously mentioned (stylesheet and functions file) within a new independent folder.

In our guide, we will give an example with the default WordPress Twenty Twenty theme.

Creating a Child Theme Folder #

First off, you have to create a new folder for the child theme’s files. It has to be located within your WordPress themes’ directory (wp-content/themes). The recommended practice is to name the folder after the parent theme followed by “-child“, i.e., “twentytwenty-child“.

You can create a new folder through the File Manager tool integrated into cPanel or by using your favorite FTP client.

Creating a Stylesheet File #

Now that the new folder is created, you have to create a file titled style.css under it. If you are not sure how to do that, please refer to the corresponding File Manager or FTP tutorials mentioned in the previous section.

This file will contain the CSS rules that control the look of your theme. You have to insert the following header comment, which consists of basic theme information, and tells WordPress this is a child theme of the defined parent theme.

/*
Theme Name: Twenty Twenty Child
Theme URI: https://phluit.com
Description: Twenty Twenty Child Theme
Author: John Smith
Author URI: https://phluit.com
Template: twentytwenty
Version: 1.4
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

When inserting the comment into the style.css file, please make sure to add it at the very top of it and replace the details with your theme information.

The most important details you should pay close attention to are:

• Theme Name – You have to give a unique name for the child theme.
• Template – You have to specify the name of the parent theme directory. Such a line exists only in child themes, and without it, it will not function properly. In our case, the theme directory is “twentytwenty“. If you are using another theme, please make sure to replace it accordingly. You may double-check that information in wp-content/themes.

The rest of the details you can find in your WordPress Admin Dashboard > Appearance > Themes > Theme Details.

When you replace the details as required, please make sure to save the file.

Creating Functions File #

To correctly enqueue styles from the parent theme, you need to create a new file named functions.php under the child theme directory. Alternatively, the child theme will appear unstyled and broken.

The ideal method of loading enqueuing stylesheets is for the parent theme to load both – the parent’s and the child’s. However, not all WordPress themes do that. Therefore, you need to check the code of the parent theme and verify how it functions and obtain the handle name the parent theme uses. The handle is the first parameter of wp_enqueue_style() string.

In case the parent theme loads the style using a function starting with get_template, the child theme has to load just the child styles, by the parent’s handle in the dependency parameter.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ), 
        wp_get_theme()->get('Version') // this only works if you have Version in the style header
    );
}

In case the parent theme loads the style using a function starting with get_stylesheet, the child theme has to load both parent and child stylesheets. You need to ensure to use the same handle name as the parent theme uses for the parent styles.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // This is 'twentytwenty-style' for the Twenty Twenty theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

When you insert the respective code into the functions.php file, please make sure to save the file.

With this done, the creation of the child theme is completed. All left to be done is to activate it.

Activating Child Theme #

The last part of the process is to activate your child theme. To do so, please log into your WordPress Admin Dashboard and navigate through the left-hand side menu to Appearance > Themes.

Once you land on the “Themes” page, you will be able to locate your new child theme among the rest of your WordPress themes. Please hover over it and click on the “Activate” button.

With this done, you have your new child theme working.

Note that since we have not performed any style or functionality customizations, you will not notice any difference in the appearance and behavior of your website.

Now you are entirely ready to start implementing all the customizations you are after without being concerned your work will be lost once the theme gets an update.

Congratulations! In this tutorial, you have learned how to create WordPress Child Themes and safely apply design and functionality modification to your website. We hope you have managed to easily follow our instructions and achieved the intended result.