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

Introduction

Child WordPress themes are themes that work with a real (parent) WordPress theme and inherit all of its features, functionality, and style. WordPress child themes are the primary method of theme customization.

The Parent Child theme concept was developed by WordPress core theme to allow users to customize their themes efficiently and safely. As we all know, WordPress themes are updated on a regular basis. When a theme is updated, any custom changes that were previously made are overwritten. Previously, it was not possible to update a WordPress theme without losing these custom changes. Users had two options - either waste their efforts and lose their work, or expose their website to exploit risk due to security vulnerabilities of the outdated theme. Unlike parent themes, child themes allow customizations to remain separate and unaffected by the parent theme update.

When should you use a WordPress child theme?

First of all, it is important to know that not all WordPress themes are developed according to the parent-child theme concept. Parent WordPress themes are often called theme frameworks that contain their own hooks and filters. You need to choose the parent theme carefully and make sure that it is easy to use and works correctly when configured as a child theme.

Secondly, you need to determine the purpose of creating a child theme. There are situations when this is not the most effective solution, depending on what you want to achieve.

If you are using a custom theme designed specifically for you, it is not essential to create a child theme because there is no risk of losing your changes. Don't think of this as a recommendation not to use a child theme, but as a possible option. If you don't want to edit your theme files directly, you can opt for a child theme if your custom theme allows such a configuration. Besides, editing theme files always involves some risk, especially if you are not an experienced developer.

If your goal is to add specific functionality rather than make design-related adjustments, using a plugin or coding a plugin might be a more appropriate approach. In such a scenario, you can retain the functionality if you ever decide to move from the current theme to another. However, if the functionality is implemented in the child theme, it will be lost.

How does a WordPress child theme work?

As mentioned earlier, the child theme inherits the design and functionality of the parent theme, but how does that work exactly?

The child theme contains special instructions that tell WordPress that it is a child theme and which is the actual Parent Theme is. WordPress then uses the code of the parent theme and overwrites only the necessary parts with the code defined in the child theme.

Each child theme must have two necessary files: a stylesheet file (style.css) and a functions file (functions.php). The stylesheet file contains commented-out text that tells WordPress that this is a child theme and what the parent theme is. The function file contains a function that ranks the parent theme's stylesheet file so that the child theme's stylesheet is loaded first. It is also used to add specific functions by inserting the required code into the file.

Depending on what you want to achieve, you may need to create additional files in the child theme, such as template files, template parts, include files, etc.

The biggest challenge when working with child themes is probably learning how to use them. Robust frameworks require some learning time, as each framework has its own hooks and filters.

Before you start with the actual creation of a child theme, we strongly recommend that you work on a development or staging website. Fortunately, here at ORC Webhosting GmbH we offer one-click WordPress staging, so you can easily test everything before you transfer it live to your production website.

Creating a child theme

To create a basic WordPress child theme, you need to create the above two required files (stylesheet and function file) in a new independent folder.

In this tutorial, an example is given using the WordPress default theme Twenty Twenty.

Creating a folder for a child theme

First you need to create a new folder for the child theme files. This folder must be located in the WordPress themes directory (wp-content/themes). It is recommended to name the folder after the parent theme followed by "-child", e.g. "twentytwenty-child".

You can create a new folder with the name specified in cPanel integrated file manager or with your favorite FTP client.

Creating a stylesheet file

After you create the new folder, you need to create a file named style.css in it.

This file contains the CSS rules that control the appearance of your theme. You must include the following header comment, which contains basic information about the theme and tells WordPress that it is a child theme of the defined parent theme.

/*
Theme Name: Twenty Twenty Child
Theme URI: http://meinewebseite.ch
Description: Twenty Twenty Child Theme
Author: John Smith
Author URI: http://meinewebseite.ch
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
*/

If you write the comment to the file style.css please make sure you paste it at the top and replace the details with your topic information.

The main details you should pay attention to are the following:

Topic name - You must give the child topic a unique name.
Template - You must specify the name of the parent theme directory. This line exists only in child themes and will not work properly without it. In our case, the theme directory is "twentytwenty". If you are using a different theme, please make sure you replace this line accordingly. You can check this in wp-content/themes.

The rest of the details can be found in your WordPress admin dashboard > View > Themes > Theme details.

If you change the details as needed, please make sure to save the file.

Create function file

In order for the styles from the parent theme to be included correctly, a new file named functions.php must be created in the directory of the child theme. Otherwise, the child theme will appear unstyled and incorrect.

The ideal method for loading enqueuing stylesheets is for the parent theme to load the stylesheets of both the parent and child themes. However, not all WordPress themes do this. Therefore, you need to check the parent theme's code to find out how it works and find out the handle name that the parent theme uses. The handle is the first parameter of the function wp_enqueue_style().

If the parent design loads the style with a function that starts with get_template starts, the child design only needs to load the child styles via the handle of the parent element in the dependency parameter.

get('Version') // this only works if you have Version in the style header
    );
}

If the parent design loads the style with a function associated with get_stylesheet begins, the child design must load both the parent and child stylesheets. You must ensure that you use the same handle name that the parent design uses for the parent stylesheets.

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
    );
}

If you write the corresponding code into the file functions.php paste, do not forget to save the file.

This completes the creation of the child theme. It only needs to be activated.

Activate child theme

The last step is to activate the child theme. To do this, please log into your WordPress admin dashboard and navigate to Appearance > Themes via the menu on the left.

On the "Themes" page you will find your new child theme among the others WordPress themes. Please move the mouse cursor over it and click the "Activate" button.

Once you have done this, your new child theme will work.

Note that you will not notice any difference in the look and behavior of your website, as we have not made any stylistic or functional adjustments.

You can now start making all the customizations you want without worrying about losing your work when the design is updated.

Congratulations! In this tutorial you have learned how to create WordPress Child Themes and safely apply design and functionality changes to your website. We hope you were able to follow our instructions without any problems and achieve the desired result.