Create a WordPress Child Theme - Step by Step Instructions

WordPress allows the extension and adaptation of themes with child themes. A child theme is a theme that inherits the functionality and design of the parent theme. It enables the addition of new features or the simple change of the parent theme.

The main advantage is that the adjustments in the child theme can be made without changing the files of the parent theme. This means that your own modifications are not lost when the parent theme is updated. Updates in WordPress usually replace all files in the theme.

The child theme itself can remain very slim because it only contains the code for the modifications themselves. In the following step by step guide I will show you how you can create your own child theme.

1) Create child theme folder

As an example we create a child theme for the standard TwentySixteen theme. The name of the child theme should be Theme Killer .

The first thing you will do is create a new folder on your computer. This should contain all files of the child theme. I recommend adhering to the common WordPress conventions, ie using only lowercase letters and separating words with hyphens.

We are therefore creating a new folder named theme-coder for our child theme.

2) Create the style.css of the child theme

The child theme first needs a style.css file, which you can create in the new folder. Design adjustments to the parent theme can later be made in the file using CSS - for example, changing colors, typography or spacing.

The style.css also contains all the information for your new theme, such as the name, description, version number and author. This information will later be displayed in the WordPress backend. Therefore copy the following text at the beginning of the style.css.

It is important to specify the template parameter. We are telling WordPress that this is a child theme. Please note that the name of the folder of the parent theme is used here. So twentysixteen , not twenty sixteen.

3) Create functions.php of the child theme

In the next step we create another file called functions.php addition to the style.css

WordPress automatically loads this before the functions.php of the parent theme and thus allows the functionality to be overwritten or expanded with your own functions or code snippets. The file remains empty for now, but we will change that in the next step by creating our own function.

4) Load the style.css of the parent theme

WordPress automatically loads the style.css of the active theme. Thus the style.css of the child theme is loaded. WordPress does not load the style.css of the parent theme if it is no longer the active theme.

In most cases, we don't want to develop a completely new stylesheet for our theme, but rather take the original design and just change something. Therefore, the child theme must ensure that the style.css of the parent theme continues to be loaded.

This used to be solved with an @import rule in the style.css of the child theme. However, this approach is no longer up-to-date because it is slower and does not use the standard WordPress functions.

We are therefore creating a new function to integrate the style.css of the parent theme. To do this, copy the following code into the functions.php of your child theme.

We use the standard procedure with wp_enqueue_style for integrating CSS and JS files. With the function get_template_directory_uri we get the path to the folder of the parent theme.

5) Install child theme

The creation of the child theme is now complete. In the last step we install the new theme in WordPress.

One option for installation is uploading to the web server using FTP. The child theme has to be copied into the WordPress theme folder like any other theme.

• Root directory (www)
  • wp-content
    • themes (directory for all installed themes)
      • twentysixteen (folder of our parent theme)
      • theme-coder (our new child theme)

A second possibility is the direct installation in the WordPress backend. To do this, the child theme folder must first be packed into a theme-coder.zip file. The .zip file can then be selected under Design> Themes> Add> Upload theme in the WordPress backend to install the child theme.

Conclusion

The child theme can now be activated and used. PHP code snippets can now easily be inserted into functions.php, which style.css can be used for style changes. Modifications are no longer lost when updating the parent theme.

Update: Series on Child Themes

All the possibilities that you can use with a child theme to adapt your theme are now presented in a small series of articles.