WordPress Child Themes Explained

WordPress Child Theme Explained Cover

If you’ve spent some time working with WordPress, you might have already heard of a certain concept: Child themes. Perhaps even parent themes? But what do these words actually mean? In this article, the concept and usage of child themes is explained, including when you should and should not to use them. And after that, I’ll show you even how to create your own child theme, either manually or using a plugin. Let’s get started, shall we? ๐Ÿ‘จโ€๐Ÿ‘ง

The problem

Every story has its origin and this one starts with a problem. Imagine you’ve found the perfect theme. ๐Ÿ˜ Perfect header, perfect design, perfect font and the list goes on… yet there’s one small thing that bugs you: the footer. It’s not quite the way you want it. Your solution? You start modifying the theme’s source code to get your desired results. End of story, right?

A surprised Pikachu meme in which a theme updates and erases all modifications.
Should’ve seen that coming… ๐Ÿ˜…

Well, not really… Unfortunately, whenever a theme is updated, any modifications done to it will be lost. So what’s the solution to this problem? One alternative would be to keep track of your modifications and redo them if necessary, but that could quite easily turn into a lot of work. Even more so for themes that are frequently updated.

How about not updating your theme at all? No way, Jose. ๐Ÿ™…โ€โ™‚๏ธ WordPress themes are updated for different reasons: to conform to new WordPress coding standards, to fix bugs, to fix security issues. Avoid updates long enough and you may eventually see your website break, or even worse, be hacked.

The solution

Alright, so redoing your theme changes and avoiding updates aren’t the best solutions. So what is? Child themes of course! Didn’t see that one coming, did ya? ๐Ÿ‘€

So what exactly is a child theme? Well, it is a special kind of theme that inherits all the design elements and features of its parent theme. To be clear, the child theme is not a copy of the parent since it doesn’t actually hold any of the original source code. Yet, any changes you make to the child will be properly applied to its inherited theme without affecting its parent. Details on that will be discussed further down. ๐Ÿ‘‡

All in all, using a child theme kills two birds ๐Ÿฆ‰ with one stone: It allows the parent theme to freely be updated without interfering with your modifications.

When to use a child theme

Now, just because you want to modify your theme doesn’t mean you need a child theme. More often than not, you may be able to modify the theme through the WordPress Theme Customizer and the theme’s settings page or add additional functionality by installing a plugin ๐Ÿ”Œ. All of these options don’t touch the theme files at all.

However, in other cases where you do need to implement more complicated modifications, that is, modifying a theme’s CSS stylesheet, PHP templates or functions.php file, using a child theme is recommended.

Creating a child theme

You can create a child theme in two ways: either manually or with a plugin. Which one you choose is up to you. ๐Ÿ˜ Some might argue you should do it manually since fewer plugins are better and it won’t slow down your site. On the other hand, you will save some time using the plugin to create your child theme.

Meme showing difficult choice between choosing to create a WordPress child theme manually or with a plugin. A man is seen sweating while deciding
The choices we have to make!

Manually

In this example, I will be creating a child theme of the built-in WordPress theme Twenty Nineteen. However, you may choose another theme of your liking and follow along. And make sure to have access to your WordPress files, whether you are developing locally or via an FTP. ๐Ÿ‘จโ€๐Ÿ’ป

First thing on the list is to head to the theme directory following wp-content > themes. Here, you will create the folder of your child theme, which I will name twentynineteen-child. However, you can name the folder any way you’d like.

Code Editor folder structure of WordPress child themes
Child theme folder structure

Inside this folder, create a stylesheet named style.css. This file will contain information that tells WordPress basic information about your theme. In particular, Theme Name and Template are required fields, with the latter being especially important since it indicates your parent theme.

/*
 Theme Name:   Twenty Nineteen Child
 Theme URI:    https://chunkbytes.com
 Description:  Twenty Nineteen Child Theme
 Author:       Dilshan Kelsen
 Author URI:   https://chunkbytes.com
 Template:     twentynineteen
 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:  twentynineteenchild
*/

After you’ve done this, the theme shows up as an option in the WordPress theme dashboard. However, as soon as you activate it and check your website, you’ll notice that it’s completely unstyled. ๐Ÿ˜ฑ That’s because the stylesheet in your child theme is completely empty. To fix this, we need to import the stylesheet from our parent theme using the wp_enqueue_style() function.

In order to do that, first create a functions.php file in your child theme directory and include the following piece of code:

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

Et voilร ! Your child theme is ready for development! ๐Ÿ˜

With a plugin

The plugin I recommend for creating a child theme is called Child Theme Configurator by Lilaea Media. Once you’ve installed it, head over to your admin dashboard and access Tools > Child Themes. Here you will be presented with a menu to create your own child theme! ๐Ÿ‘ถ

Child Theme Configurator Menu
Child Theme Configurator menu

To create a new child theme, select the CREATE a new Child Theme option, followed by a parent theme of your choice. After analysing the parent theme, you will find out whether it’s good to be used as one. Afterwards, you’re presented with additional steps to complete. Almost all of them you can leave at their default. However, if you’d like to, you may rename the theme directory at step 4 and change your theme’s attributes at step 7.

What’s important though is that you make sure to tick the checkbox at step 8 or else your theme will not inherit any of the parent’s menu, widgets and other Customizer Settings. ๐Ÿ˜ฃ

In the end, you get the exact same files as with the manual method. However, the plugin was so kind as to create a screenshot file for our theme image cover.

GIF of a man saying "That's really nice" for the plugin creating an image cover for our WordPress child theme

How theme modifications are applied

So how exactly are modifications of a child theme applied to its inherited parent elements? To understand that, we need to take a look at the 3 following files.

Style.css

When it comes to CSS in your child theme, WordPress first loads any styles you are importing from your parent. What this means is that any code that you add to your child’s style.css sheet will override any of the parents code in case of a conflict. That’s how CSS works, really… ๐Ÿ˜›

Functions.php

Unlike CSS, any code you add to your child’s functions.php file will not override any of your parent’s conflicting code. Rather, it is simply appended onto your parent’s functions.php file. What this essentially means is that you need to make sure that any PHP functions you name in your file are unique. Otherwise you risk breaking your site. ๐Ÿ˜…

A template file

Template files work in a similar fashion to CSS, with the only difference that the entire parent file is overwritten, rather than a small piece of it.

Let’s take a random template file as an example, e.g. front-page.php. Imagine you would like to add another column to this file with some HTML. In order to do that, you would have to create a front-page.php file in your child. And by simply creating an empty template file in your child theme, WordPress will automatically ignore any files from your parent theme with the same name.

Now, in this case, whenever you load your website’s front page ๐Ÿ–ฅ, it will be blank since your child’s front-page.php file is also blank. What you need to do now is copy all the content from your parent’s file into your child’s and then make the appropriate changes in your child’s front-page.php file.


Did you find what you came for? Want me to cover something else? Let me know in the comments below! Share, if you liked this post!

Leave a Comment

Your email address will not be published. Required fields are marked *