The Ultimate Guide to WordPress Child Themes

In WordPress, the look of your website is dominated by the theme you choose. Which means, the theme reinforces your branding.

With over 2,600 free themes and numerous paid themes, there might not be a need to build a theme from scratch.

But there can be a need to customize it.

Modifying the core files of the theme is erroneous. Unwanted issues could crop up. And if not that, your changes could be lost on theme update.

A more suitable approach would be to probably create a plugin. You can certainly use a plugin to extend your theme. But the conventional way to customize a theme would be, to create a Child Theme.

[space]

What are Child Themes?

As the name itself suggests, child themes are the children or descendants of their parent theme (or the original theme you’re looking to customize). They inherit the functionality and styling of the parent/original theme.

The parent theme acts as a base for the child theme. The changes you need, right from changing the font face, to page layouts have to be added to the child theme.

So, let’s take a look at how we can create a child theme of our own.

[space]

How to Create a Child Theme?

Creating child themes is rather simple. We do not need to code each and every file present in the original theme into the child theme. In fact, WordPress requires only one file- the stylesheet– to recognize a child theme.

However, to make sure the stylesheet gets picked up on page load, we need to create a functions file to enqueue the stylesheet.

To break this down into steps, here’s what you’d have to do:

#1 Create a Skeleton

You need to start by creating a folder in wp-content/themes for your child theme. Let’s name it ‘wisdmlabs-child‘ (assuming of course that wisdmlabs is the parent theme folder).

Then, add two files (as mentioned above)

• style.css: the stylesheet of the child theme
• functions.php: the functions file to enqueue the styles and scripts of the parent and the child themes.

#2 Link the Parent Theme

Next, you need to add a header to your child theme’s stylesheet. So, add the following to style.css of your child theme. The attributes present in the header describe the child theme.

/*
Theme Name: WisdmLabs Child
Theme URI: https://wisdmlabs.com/
Description: The most awesome child theme ever
Author: WisdmLabs
Author URI: https://wisdmlabs.com/
Template: wisdmlabs // ** this attribute links the child theme to the parent theme **
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Now, the parent theme and child theme are not linked by the name of the folder. In fact, the template attribute present in the child theme’s stylesheet header links the two. Template files which are not present in the child theme, are picked up from the parent theme using this attribute.

So, from the above sample header for your child theme’s style.css file, the template attribute is the most important. The other attributes are not mandatory but good to have.

To get started with your child theme, you can just add the name, description and template name into style.css.

Once you save the changes, you’ll have officially created a child theme! It should show up on your theme’s list, in your WordPress admin panel.

But we’re not done yet.

If you activate the child theme as is, you might notice some errors because the files might not have loaded correctly. To ensure the stylesheets are loaded, we need to enqueue them using functions.php. And that’s exactly what we’ll be doing next.

#3 Enqueue the Stylesheets

In functions.php of your child theme, add the below code:

<?php
    // Enqueue child theme stylesheet using wp_enqueue_scripts.
    add_action( 'wp_enqueue_scripts' , 'wdm_child_theme_enqueue_style' );

    /**
     * Enqueue the parent and child theme stylesheets in order.
     */
    function wdm_child_theme_enqueue_style(){
       // enqueue the parent stylesheet before the child theme stylesheet
       wp_enqueue_style( 'wl-parent-style', get_template_directory_uri() . '/style.css');
       wp_enqueue_style( 'wl-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style') );
    }
?>

The wp_enqueue_scripts and wp_enqueue_style hooks are used to enqueue your stylesheets properly. The get_template_directory_uri and get_stylesheet_directory_uri functions are used to fetch the path of the parent theme and current theme (child theme) directory respectively.

The reason why the parent theme stylesheet is enqueued before the child theme is so that the styling provided in the child theme can override the parent theme styling if needed.

Once you’ve done this, your child theme will be complete. But the styling and functionality will be the same as that of the parent theme.

We’ll take a look at overriding parent theme styling and functionality next.

[space]

How to Override Parent Theme Styling in Child Theme

The styling of the parent theme can be overridden by making changes in the stylesheet of the child theme.

For example, let’s consider that the parent theme stylesheet defines a class ‘wl-header‘, that colors the header white.

.wl-header
{
    background-color: #FFFFFF;
}

To change this class in the child theme (to eventually change the header color), you would need to define the same class and change the needed attribute in style.css of your child theme.

.wl-header
{
    background-color: #F7F7F7;
}

Similarly you can change other classes if needed, or append additional styling. You can even define new classes as required.

[space]

How to Override Parent Theme Templates in Child Theme

To change page layouts, like adding a sidebar to your blog page, changing the footer, and so on, you’d need to override template files.

For this, you have to add a file in the child theme directory with the same name as in the parent theme directory. This will override the original theme’s file with the child theme’s file on site load.

So, if you include a header.php file in your child theme directory, then the parent header.php will get overridden by the child’s header.php. You can try this out by copying your parent theme’s template file to your child theme directory and adding a simple line of code.

As an example, I tried overriding the header.php, in my child theme, by adding a simple line of code.

Pretty simple isn’t it?!

You can do similar things and more with other template files present in your original theme directory, or add new page specific templates on your own.

Modifying the styling and the templates are all well, when you need to modify the look of the theme. But to change the functionality of the theme, you’ll have to override a few functions by adding code to functions.php of the child theme.

[space]

How to Override Parent Theme Functionality in Child Theme

Making changes in functions.php is a smart way of modifying the theme’s functionality. Unlike stylesheets, the functions.php file does not override the existing parent theme’s functions.php. Infact, it just adds the additional functionality as defined in the file.

But if a function with the same name as a parent theme function is defined in the child theme, the child function overrides the function in the parent theme (provided of course that appropriate error handling is in place). This is because the child theme’s functions.php is loaded prior to the parent theme’s functions.php. The functions.php file acts as a plugin to a theme and it gets loaded automatically during the initialization process of WordPress.

If the parent theme provides action and filter hooks, you can grab onto them and extend your parent theme’s functionality. For more on action and filter hooks, you can take a look at this article.

[space]

Folks, I’m sure this article has helped you create your first child theme, and spearhead your website to a creative and stand-out interface. A great article to follow-up would be: Overriding Parent Theme Shortcode in WordPress Child Theme.