Using A Child Theme In WordPress Development
There are many reasons you should be using a child theme when working with a premium WordPress theme that you want to alter.
Professional WordPress developers will always use a child theme when customizing an existing theme. Inexperienced developers will make changes directly on a premium theme. This has some negative consequences.
If you’re already confused as to what a child theme is, let me back up and explain.
Brief Explanation of WordPress Themes
You might already be familiar with the concept of WordPress themes. You either buy an existing theme, or have one custom coded for you. The theme controls the layout of the site, and in some cases, a small amount of the functionality.
(Ideally, plugins that are not baked into the theme itself would control 100% of the functionality, but that’s a discussion for another day.)
Your WordPress installation may have themes installed already. Self hosted installations of WordPress come with the latest annual default theme, named after the year of release (e.g. premium theme from a reliable theme shop, and installed and activated it on your site. But you want to make a few changes.
Now what happens next is of the things that separates an inexperienced WordPress developer from an experienced one.
Some folks will start making wholesale changes directly to the active theme. They will add style changes to the CSS, modify template files, and basically change the original premium theme into a Franken-theme.
This leaves the site owner afraid to ever update their theme, for fear the configuration of their website will be lost forever.This is not a place that you want to leave your website, or any public facing site. Updating WordPress themes and plug-ins is an essential part of maintaining security, integration, and functionality.
Luckily there is a solution for this. Using a child theme.
Using A Child Theme
Using a child theme allows you to make changes to the original theme without destroying any part of the original theme. This means you can safely update the base theme without losing any of your layout changes.
When a WordPress theme is used as a base for a child theme, it is referred to as a parent theme. A theme that uses another theme on the server as a foundation for modifications is called a child theme.
When you use a child theme, you must also keep the parent theme installed. A child theme will not function without the parent theme in place.
Setting Up A WordPress Child Theme
To set up a child theme on your WordPress installation, you only need one additional folder with a style.css file inside.
Inside of the child theme style.css, you must include a comment block that declares the name of the child theme, and what theme it is using as a parent theme.
Here is what the comment block would look like for a child theme of a parent theme named Your Theme in the directory(folder) named yourtheme.
/*
Theme Name: Your Theme Child
Theme URI: http://example.com/wp-content/themes/yourtheme-child
Description: Your Theme Child Theme
Author: Your Name
Author URI: http://example.com
Template: yourtheme
Version: 1.0.0
Tags: responsive
*/
Note that the Template line here is looking for the name of the directory the parent theme is in — not the name of the parent theme itself.
If you have FTP or server access to your WordPress site, find your site installation. go into wp-content > themes. Create a new directory there and name it yourtheme–child.
Upload the CSS file you just created into that folder.
Now, you are almost ready, but we still need to tell the child theme to load the style sheet from the parent theme.
In the past, it was acceptable to add an @import statement below the top comment block. That would look like this:
/*
Theme Name: Your Theme Child
Theme URI: http://example.com/wp-content/themes/yourtheme-child
Description: Your Theme Child Theme
Author: Your Name
Author URI: http://example.com
Template: yourtheme
Version: 1.0.0
Tags: responsive
*/
@import url("../yourtheme/style.css");
/* =Theme customization starts here
------------------------------------------------------- */
While @import still works, it is no longer considered a best practice. The preferred method is to enqueue (load) the parent style sheet via the functions.php file in your child theme.
In the same manner that you created and uploaded the style.css file to the child theme folder, you’ll need to create a functions.php file. Here’s what that should look like.
<?php
/**
* Enqueue the parent style sheet
*
*/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
What we are doing here is adding an action hook that loads the parent style sheet when WordPress calls for the necessary scripts and style sheets to load using the built in function wp_enqueue_style().
The example above works for themes with only one main style sheet.
If your parent theme uses multiple style sheets, or they are in weird places, you will have to adjust this code to also load each of those.
Activating Child Themes
In your WordPress admin, you should see your new child theme Under Appearance > Themes. You can activate it, or edit it further from the admin.
Be sure to check the source code of the page to see what is being loaded once you activate the child theme.
Overriding Parent Theme Templates
All a child theme needs is the style sheet to be a usable theme. But you can override any parent theme template file by simply uploading a replacement template file to the child theme directory.
What I like to do is copy the original template files that I want to override from the parent theme. Then I upload these into the child theme directory, make the necessary changes, until everything functions and looks the way I intend it to.
Of course I’m doing all of this on a staging server, not the live version of the site. What do you think I am, a cowboy coder?
Benefits of Using WordPress Child Themes
By using a child theme — instead of making permanent changes to the original parent theme, and being afraid to properly update it, you’re able to keep your site up to date and secure. This means your business site will not crash and burn unexpectedly.
Using a child theme also means you have more flexibility in the development process.
Smart developers and agencies use premium themes to get them 80% of the way to the finish line in applicable cases, then use a child theme to finish out custom WordPress development for each specific client.
If you’re a business owner, the difference between parent and child themes may not be something that you care about. But it’s important that your development team is doing things in a way that is future friendly for your site.
If you’re a WordPress developer, and you’re not using child themes in your customization workflow, now’s a good time to start.
So basically child themes means just loading one more css file and override what you want to override from parent theme. Code duplication.
There can be code duplication involved, but it’s an often used technique, both for speeding up development, and ensuring updates can still happen seamlessly.