Child themes in WordPress

One of the first things we do is defining the visual aspect of our website. We need to make it attractive and appealing to our visitors. It's the way of communication between us and them. In WordPress, themes take on this task, implementing the visual aspect and many of the required functionalities.

A child theme in WordPress is no more than a collection of files, designed to work as a whole and these determine the visual aspect, as well as the functionalities of our website. If the first thing we do is choosing a theme for our website, the next step is to create a child theme for it. Why do we need to do this?

The answer is simple, no matter which theme one uses, the time will come where we need to make an adjustment or a modification on the design, or even extend the functionalities included by default. If we modify the original files, we run the risk of losing our mods when the theme gets an update.

And we need to keep our theme up to date. Updates not only bring new and improved functionalities, but these also fix errors and security flaws. If we don't keep our software updated, we unnecessarily increase the odds to lose our content, or have our website be compromised by hackers.

We can define a child theme as a group of independent files, which alters the functionalities of the parent theme. A child theme allows us to make any necessary changes while keeping our theme updated. Logically we need to check on any modifications to ensure they are updated along with new versions of our theme, in order to prevent losing our work.

Many commercial themes include child themes and they recommend to start working with them. When this is not the case however, creating one is a simple task anybody can achieve.

Much like most things in WordPress, we have more than one plugin to do this. A search on the repository or in Google will yield us various options. However, we'll now take a look take a look at how to create them manually

To do this we need to create a folder in /wp-content/themes, with any name we want, and inside that folder we create to files:

This file needs to start with the following text:

/*    
Theme Name:   Child Theme    
Theme URI:    http://example.com/child-theme/    
Version:      1    
Description:  Description of the child theme.     
Author:       Nombre del autor    
Author URI:   http://example.com 
License:      GNU General Public License v2 or later 
License URI:  http://www.gnu.org/licenses/gpl-2.0.html 
Tags:         light, dark, responsive-layout  
Template:     parent-theme
Text Domain:  child-theme
*/
/* Beyond this line the customization of the child theme begins */

Change these lines as we need to:  
Theme Name: Name our theme.
Template: Write the name of the folder containing the parent theme, for instance, if we're developing a child theme for Twenty Seventeen, the name of its folder would be twentyseventeen.
Text Domain: Necessary to add translations on our child theme.

The rest of the lines are optional, but it's recommended to add them as well.

The child theme's style.css file replaces the parent theme's style.css file. Because of this we need to load its content. The recommended method for this is to load the styles using functions.php

The code to load the styles would look like this:

<?php

function enqueue_child_styles() {
$style_p   = 'parent-style';
$uri_parent  = get_template_directory_uri();
$style_c   = 'child-style';
$uri_child   = get_stylesheet_directory_uri();
wp_enqueue_style( $style_p, $uri_parent . '/style.css' );
wp_enqueue_style( $style_h, . '/style.css',
array($style_p),wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_styles');

This piece of code uses wp_enqueue_scripts to load the styles defined through our enqueue_child_styles function.

Inside our function we define the following variables:
$style_p: Parent ID, we'll look for it inside the parent functions.php. It's likely located in wp_enqueue_scripts
$style_h: Child ID, we can write anything here
$uri_parent: Locates the parent files, we use the predefined function in WordPress for this.
$uri_child: Locates the child files, we also use the predefined function in WordPress for this.

Contrary to styles.css, the functions.php file doesn't overwrite the parent theme, it instead loads before the parent. Since we're writing our own code, with no limitations, we are able to add new functionalites as well as modifying currently existing ones.

If we upload both files to our installation, we'll have our theme available inside the WordPress control panel.

I want to point out one small thing, if we'd like to use an image for our child theme, we need to upload it in png or jpg format. The name of the folder has to be screenshot.png or screenshot.jpg, respectively. The resolution I use is 800x600. If we access the details of the theme, we'll be shown the information we've included in our style.css file.

Now we simply activate our child theme and from that moment onwards, we''l make our own modifications, knowing that we can install updates to the parent theme without losing our work.

We'll use style.css to modify the parent theme's style and to add our own. If we gloss over functions.php, we'll notice that we first load the parent's styles, this way our modifications will be run with preference.

The functions.php is our best friend here. For instance, there'll be times when adding a few lines of code can save us from installing a whole plugin. This is often the recommended solution.

In the case of making complicated modifications, we can structure them according to what we need and, instead of running a massive functions.php, we can use the tools in PHP to manage our code.

An important functionlaity is the one which allows us to modify the parent theme's files. For example, if we want to modify the header (header.php), the footer (footer.php) or the page template (page.php), we'll simply copy them to our child theme's folder and make any changes we desire.

We can actually do this with any parent file, by simply copying the file to the same location in our child theme, creating the necessary intermediate folders and then working on the copy. If a modified copy exists, WordPress will always try to use it instead of the original file

We can also create new files to add additional templates and formats, which will be specific to our theme. To do so, we'll be guide by the WordPress hierarchy. We'll take a look at this in more details soon.

A side effect is that it has a small impact in our website's loading times, since additional browsing through the child theme requires a bit of time.

Child themes' biggest perk is that it saves us from having to create a new theme from scratch. We can use any free or commercial theme which offers most of the functionalities we're looking for and then making the few modifications we want.

Another thing is that updating the parent theme won't put our work at risk. This way we can benefit from having a stable platform which has been thoroughly tested and is less susceptible to errors and security breaches.

Besides, if the parent theme includes widgets and plugins, these will be available in our child theme straight away. What this means is that not only the design is transferred over, but also all its functionalities.

As we've stated before, child themes have a small negative impact in the performance of our website. Should this impact be actually relevamt, we might need to consider switching our parent theme or even develop our own proper theme.​

Implementing a child theme requires knowing how the parent theme works. Some frameworks can prove complicated, or they might even include some functionalities we won't make use of. It takes some time to familiarize ourselves with them, which is why it's very important to make the correct choice.

Finally, our child theme is completely set apart from WordPress, meaning that if we've made any changes to the parent theme, we'll need to repeat the process in the child theme. For this reason, we have to create the child theme before customizing the parent theme.

If it's too late and yet we're lucky enough that the parent theme allows to export and import its settings, we'll do the process following its docummentation. Otherwise, we'll rely on plugins such as:

• WordPress Customizer - allows importing and exporting the customizer settings
• Child Themify and Orbisius Child Theme Creator - allow creating child themes and importing the parent theme's configuration.

As we can see, we have no excuses to not use child themes in our WordPress.