So…the story goes like this. You have fallen madly in love with your trusted WordPress theme. In fact, you like your existing theme so much that you’re afraid to part with it. Your users have become accustomed to the familiar feel of your current theme, and the thought of finding a new one that ticks all the right boxes is enough to scare you to death.
When you are asked to make some ‘simple’ modifications to the theme, what is the best way to make the necessary adjustments? It seems silly to start from scratch with a new theme, when all that’s needed are a few minor style amendments or a couple of new features. Ideally, you are looking to have all the work completed while keeping the original theme intact. Having access to the new features without screwing up the original theme would give you the added bonus of being able to roll back to the original version if necessary.
Does this situation sound all too familiar? Is it bugging you to the point of despair? Then a new child theme may be exactly what you need.
The WordPress child theme is a wonderful feature that enables us to make elegant modifications to our chosen theme (called the parent theme) without changing the theme itself. Using a child theme will keep your site tidy and organized in the back end, and helps you to avoid messy hacks that will only create problems for future maintenance.
In this post, we will explore what the child theme features of WordPress are , explain the best time to use one, and provide a step-by-step guide to get you started.
What is a Child Theme?
A child theme is simply a theme that inherits the functionality and styling of any other theme. According to WordPress.org, using a child themes is the recommended way to modify an existing theme, especially if you are looking at making substantial or ongoing changes.
Advantages of Child Themes
Using a child theme has the following advantages over a standard theme:
- You can save time developing a whole new theme from scratch.
- The parent theme can be upgraded without losing your precious work.
- If you aren’t satisfied with your customizations, you can simply disable the child theme and revert back to using your original theme.
- As a bonus, you may even learn something about how WordPress themes work!
The Problem with Theme Updates
Unfortunately, many people still choose to edit their theme files directly. This is a very dangerous operation. Please be aware that if you make changes in this way and your theme gets updated, your changes will be lost…wiped…kaput!
One of the major advantages of child themes, is that any changes you make will be preserved when the parent theme gets updated by the developer.
All WordPress themes must be updated eventually. This is bound to happen sooner or later. It may come in the form of a security update, or a general update that fixes bugs that were identified in the previous release.
Whenever you install a new update, the update process will wipe any changes to the theme files that you have made. In this case (if you don’t have a child theme), any hard-coded customizations you have made to your theme along the way will be removed as part of the upgrade process. You simply can’t avoid it!
Even if you choose to delay the update from being applied, you are simply delaying the inevitable. By delaying your updates you may be inadvertently opening up gaping security holes that could compromise your website’s security and allow hackers to gain unauthorized entry. This situation is less than ideal.
It’s Time to Make a Change
Let’s consider a simple scenario. We need to change some style definitions or alter the layout of our existing theme. You could accomplish this task in one of several ways including:
- Edit your theme files directly (style.css, function.php etc.)
- Use the built-in theme editor in WordPress.
- Add some custom style codes to the Custom CSS/Code area provided by your theme.
- Create a child theme to extend the features of the parent theme.
So, which option is the best? If you use option 1 or 2, and your theme is updated, your changes will be lost! Option 3 is slightly better and may even work in some scenarios, but only if the theme supports this feature by storing your changes in it’s own database.
However, if you build a new child theme (option 4), you can be rest assured that your changes will be preserved.
Creating A Child Theme
So now we know how amazing child themes are, and we have seen all the wonderful benefits of using them. Now it’s time to create your very own child theme and experience the wonder for yourself! Don’t worry, you’ll be pleasantly surprised at how simple it is. There are 4 basic steps:
- Create a theme directory for your child theme
- Create a stylesheet for your child theme
- Pull in the styles of your parent theme
- Activate the child theme
Now let’s go through the above steps in detail. In this example, we will create a basic child theme for the Twenty Fifteen theme (one of the default themes provided by WordPress).
Step 1: Create a Theme Directory for your Child Theme
Go to your theme directory and create a folder for your new theme. You can name it anything you like. For simplicity, I will name my theme twentyfifteen-child.
Step 2: Create a Stylesheet for your Child Theme
The next step is to create a stylesheet file. This must be named style.css. Copy and paste the following code into the file you’ve just created:
/*
Theme Name: Twenty Fifteen Child Theme
Description: A basic child theme to modify the Twenty Fifteen theme
Author: Daniel Thurlow
Template: twentyfifteen
Version: 1.0.0
*/
Note: There is a lot more information you can include in the header (including text domain and the tags). Here we have shown you a simplified version which only contains the basic information that is required to make it functional.
Unless you are planning to publish your theme, this will be all that is required. Actually, the minimum you need to keep WordPress happy is “Theme Name” (the name you have chosen for the child theme) and “Template” (the parent theme you wish to extend).
Step 3: Pull in the Styles of the Parent Theme
At this point, you a nearly there! You have created your child theme directory and styles.css. Next, we need to tell the child theme to inherit it’s styles from the all-important parent theme. To do this:
- Create a new file under your child theme directory called “functions.php”
- Copy and paste the following 4 lines of code to your functions.php file:
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );
function enqueue_parent_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
Step 4: Activate the Child Theme
Congratulations! You have created your child theme folder, stylesheet, and you have inherited the styles from your parent theme. Finally, it’s time to activate your child theme and bring everything to life!
- Login to WordPress backend, go to “Appearance” → “Themes” and find your child theme there.
- Click on “Theme Details”, then click the “Activate” button.
You have awakened the beast! When you view your website, it should look exactly like your parent theme. Now the real fun begins.
Customizing Your WordPress Child Theme – Taking It Further
From this point forward, the power is in your hands to add your own styles and functionality to control the way your site looks and behaves. Although we are moving outside the scope of this article, you can begin by making changes to the child theme files we created above. Your new child theme opens up the door to a plethora of options for enhancing your site in every way imaginable. You can produce an endless variety of outcomes including:
- Implement custom styles
- Override parent theme files
- Pluggable functions
- Using theme hooks
As you can see, child themes are not that difficult to implement. In just a few very simple steps you can create a future-proof WordPress environment. It may also save you the time and effort of finding a whole new theme that suits all of your needs.
Using a child theme is the industry standard technique for carrying out effective, robust and permanent changes to your WordPress site. While it may be tempting to jump straight in and modify your theme’s files, this approach will most likely end in a perpetual cycle of tears and heartache. If you’re not using a child theme, you will create more problems than you solve.
Please take a few minutes to consider a child theme before making ad hoc updates to your WordPress website. Your web developer will be overjoyed and may even shout you a drink on Friday!
Finally, if you have any useful tips about child themes, let us know your thoughts in the comments box below.