How to Create a WordPress Child Theme
How to Create a WordPress Child Theme
WordPress themes can be fantastic but there are so many examples of little things we all want to change. A color here, a font size there, perhaps use a different call to action on the buttons?
The problem is that modifying a theme even slightly prevents you from updating it to a newer version in the future, because if you do try to update, you lose all your changes.
Of course, if you are working with Upfront, this is not a problem, because Upfront automatically stores customizations in the site’s database protecting your edits. It really is the only theme you’ll ever need and you can get it for free by clicking here.
But what do you do if you’re working with a theme from the WordPress repository or a theme you purchase on Themeforest that doesn’t make it so easy? Child themes solve this by allowing you to use all of the functionality of your chosen theme while allowing you to update without the fear of losing your modifications.
In today’s Weekend WordPress Project, I’ll explain why you should be using a child theme and how you can get the job done.
Note: If you’re still having trouble setting up a child theme after reading this post, let us help! Our awesome support team can help you with any WordPress issue, big or small – and for free! It doesn’t matter what time it is or whether it’s the weekend, our team is available 24/7.
How Child Themes Work And Why Use Them
Child themes are separate themes that rely on a parent theme for most of their functionality. If you are using a child theme, WordPress will check your child theme first to see if a specific functionality exists. If it doesn’t, it will use the parent theme. This is great because it allows you to modify only what you need.
Child themes should always be used if you plan on modifying even a single character in your theme. There are two very good reasons: updates and organization.
If you modify a theme without using a child theme you have two choices: You can opt to not update your theme in future, or you can update and lose any changes you’ve made to your theme.
The later option would technically work, but it is not recommended. Even if your changes are easy to copy and paste, why spend two minutes on an error-prone task on each update?
Not updating your theme should be out of the question. Almost all “why your website was hacked” lists contain outdated software as a top cause for security issues. You should always keep WordPress, your themes and plugins up to date, no exceptions.
When you add code to an existing theme you are adding to a codebase, which may be thousands and thousands of lines. Developers working on your site (and, indeed, you yourself) will have a hard time tracking down your changes. At least one direct result of this will be an increased development bill.
Since child themes fall back on parent themes unless otherwise specified, your child theme is essentially a changeset to an existing theme. This can result in extensive changes even though the child theme only has a couple of files and maybe 100 lines of code.
Creating A Child Theme
Creating a child theme is extremely simple, so much so you can copy and paste my example below.
To create a child theme for your theme, you will need to do the following steps:
- Create a theme directory in your WordPress install
- Create a stylesheet with information about your child theme
- Pull in the styles of your parent theme
Once these steps are completed you can activate your child theme and your website will look exactly the same as before, but it will be using your child theme.
So let’s go through the above steps in detail. For this example, I will be creating a child theme for the Twenty Fourteen default theme.
1. First, go to your theme directory and create a folder for your new theme. You may name it anything you’d like. For clarity’s sake, I will name my theme
2. 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:
The two necessary items in the code above are the lines starting with “
Theme Name" and “
Template.” The theme name tells WordPress what the name of your theme is, and this is displayed in the theme selector. The template tells WordPress which theme it should consider as the parent theme. Most of the others are self-explanatory, with the exception of the text domain and the tags. The text domain is used for translating strings. The text domain should be unique for your theme and should be used whenever you use translation functions. See I18n for WordPress Developers for more information. The tags section is a list of tags that are used by the WordPress Theme Repository. For this example I looked at the
style.css file of the parent theme and simply copy-pasted the tags from there.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
3. At this point your child theme works just fine. If you activate it and reload the page all your content will be there but, it will have no styling information. I mentioned before that WordPress first looks for functionality in the child theme and if it isn’t present it falls back on the parent theme.
In our case we do have a stylesheet, so WordPress figures it shouldn’t load the parent file’s. To make sure we load the parent file’s stylesheet we will need to enqueue it. This can be done in the theme’s
functions.php file, so go ahead and create that file now. In this file, copy-paste the following code:
If you have no idea about PHP and you just want to change some styles, don’t worry about why this works. Feel free to go into your stylesheet file now and start making your changes. If you would like to learn more about enqueueing we have you covered right here on WPMU DEV with Adding Scripts and Styles to WordPress the Right Way With Enqueueing.
Child Theme Mechanics
So how does a child theme actually work? Child themes work on a file-level. When a file is used during the process of loading a theme it checks if it is present in the child theme. If it is, the content of that file is used. If it isn’t, the same file in the parent theme is used.
There is one exception to this rule, the theme’s functions file. The
functions.php file in both the parent and the child theme is loaded. If the child theme’s functions replaced the parents you would either have a malfunctioning site, or you would need to copy-paste the entire contents of the parent theme’s function file into the child theme’s which would sort of defeat the purpose of extending a theme.
The workflow when modifying functionality is the following. If you want to make changes to the header, copy-paste the parent theme’s
header.php file into your child theme. Edit the file to your heart’s content, save it and enjoy the fruits of your labour.
Some Notes For Theme Makers
If you make your own themes there are a couple of guidelines you may want to follow to make child theme creation easier. The two most important ones are learning the difference between
get_template_directory() and creating pluggable functions.
The Right Directory
When linking to assets using the mentioned functions you should always be aware that the
get_template_ family of functions will always point to the directory of the parent theme while the
get_stylesheet_ family of functions will always point to the child theme’s directory.
In the example above the first link takes its image from the parent theme, the second takes it from the child theme. There’s no good answer to which one you should use, it’s up to you.
The upside to using
get_stylesheet_directory_uri() is that child theme developers can use their own image by simply creating it in the proper location. On the other hand, if the image doesn’t exist in the child theme it won’t be shown at all.
The reason for this is that if a child theme is active the
get_stylesheet_directory_uri() function doesn’t check (and doesn’t know) which file you are loading so it won’t check for its existence, it will always spit back the URI for the child theme.
The other method you should use is what WordPress calls pluggable functions. This makes it possible for child theme authors to overwrite the functions you define in the parent theme. This involves wrapping your functions in
Let’s presume you create a function for a customized post meta display named
my_meta(). There is no way a child theme can modify this function because it can not be defined twice. The solution is to only create this function if it hasn’t been defined (remember, the child theme’s function file is loaded first).
Using a few very simple copy-pastable steps you can create a future-proofed environment for your theme, which will save you a lot of headaches. While it may be tempting to use the built-in theme editor in WordPress, it almost always causes more issues than it solves if you’re not using a child theme.
Take a few minutes to follow along the tutorial here and your website and your developer will thank you for it. Finally, If you have any great tips about child themes, do let us know.