How to Get Started with WordPress Child Theme Development
In this guide, we’ll talk more what a child theme is and how it works. We’ll also take you through the process of creating one from scratch and show you how you can turn a modified theme into a child theme.
Modifying existing themes is a great way to get started with WordPress development. The results of your changes will be easy to see and understand. However, making edits directly to an active theme can cause problems, as even a small mistake can render the theme unusable. You will also lose all the changes you’ve made whenever the theme is updated.
There is a way to avoid these problems, however, and that is by creating a ‘child theme.’ A child works in much the same way as any other WordPress theme does, except that it uses an existing theme as a foundation (or ‘parent’). Changes you make to the child theme will be reflected on your site, without having to alter the parent theme directly.
What a Child Theme Is (And How It Works)
In many ways, a child theme functions just like a ‘normal’ WordPress theme. It’s installed, activated, and configured in the same way. What makes a child theme unique is that it relies on another theme to determine what the majority of its contents will be. That other theme is known as the ‘parent theme.’
WordPress will always prioritize the child theme’s settings. Therefore, you can think of the child theme as sitting in front of the parent. If a setting in the child overrides a matching setting in the parent, the child theme takes precedence. This enables you to change only the parts of the theme you want to alter, leaving everything else to be handled by the existing parent.
For example, most parent themes contain styles that define different heading text levels — such as h1, h2, h3, h4, and so forth. Let’s say that a parent theme defines the h1 font size as 20 px, but the child theme specifies the same heading as 32 px. In this case, WordPress will apply the latter style to all h1 text. However, if the same child theme does not contain special styling instructions for h2, h3, and h4, the styles defined by the parent theme will still be applied.
You might be wondering why a child theme is worth the trouble if you can just edit your theme directly. Using a child theme actually comes with many advantages since it:
- Enables you to update the parent theme. You should always keep every aspect of your site up to date. However, if you’ve edited the parent theme, all your changes will be lost as soon as you update it.
- Makes it easy to find changes you’ve made. Spotting every instance where you’ve made changes can be difficult. Using a child theme makes your additions much clearer.
- Avoids the risks of editing the parent theme directly. If you make a mistake when working on your theme, or you aren’t happy with the modifications you’ve made, you can easily roll back to the original theme.
Now that you know why you should use a child theme, it’s time to create one. The process is a little involved, but we’ll walk you through each step.
How to Create a Child Theme From Scratch (In 4 Steps)
Before you create a child theme, you will need to make some preparations. First, it’s very important that you create a backup of your site before you do anything else. This way, you can work on your theme without having to worry about breaking your site or losing any of its contents. In fact, it’s best to use a staging site to edit and test your theme, rather than your live site.
We also recommend that you familiarize yourself with CSS and PHP before you get started. While you won’t need any experience using these languages to create your child theme, it certainly helps with the process of editing the theme. Taking the time to understand the basics of these key languages will give you a head start.
With those preparations out of the way, it’s time to get started!
Step 1: Create a Folder for Your Child Theme
The first thing you’ll need is a place for your child theme to live. Before you can do that, however, you will need a way to work with your site’s files directly. This commonly means using an SFTP solution like FileZilla to access your site.
Once you’ve installed and set up FileZilla, you can sign in using the credentials provided by your web host. When that’s done, you will see your entire site organized into a series of folders and files. From here, you need to navigate to /wp-content/themes/, which is where all your themes are located.
Right-click anywhere inside this folder, and select Create directory. This folder is where your child theme will be saved, so we recommend that you name it after its parent. For example, a child of twentyseventeen might be called twentyseventeen-child.
When you’ve saved the folder, it’s time to start adding content to your child theme.
Step 2: Create a Stylesheet
Cascading Style Sheets (CSS) is a language that defines the appearance of HTML content. A theme’s CSS file controls how text, images, hyperlinks, and most other content on your site will look. When we talk about changing the appearance of a theme, we’re usually talking about editing its CSS.
This may sound complicated, and CSS does give you a lot of customization options. For now, however, you don’t need to worry about the specifics. All you need to do is to create the CSS file itself. You’ll do this in the child theme folder that you just created. Simply open the folder, right-click anywhere inside it, and select Create new file.
When you’re asked to name the file, call it style.css, being careful to use that exact capitalization and spelling (as WordPress won’t recognize the file otherwise).
The file will naturally be empty, so you’ll need to give it some content. To start editing the file, right-click on it and select View/Edit. This will open the file in your default text editing program, such as TextEdit or Notepad.
The first thing you need to add is the theme’s header. This is a comment placed at the top of the file that provides WordPress with information about the theme. Copy and paste the following code into your style.css file now.
/*
Theme Name: Twenty Seventeen Child
Theme URI: http://example.com/twenty-seventeen-child/
Description: My Child Theme
Author: Your Name
Author URI: http://example.com
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: child theme, twentyseventeen
*/
The two most important fields here are Theme Name and Template. The former naturally determines the theme’s name, while the latter defines which theme it should consider as its parent. As you can see, we’ve set twentyseventeen as the parent theme in this example. Feel free to edit any of the fields, depending on your chosen parent theme.
When you’re done, don’t forget to save the file. FileZilla will ask if you want to replace its old version, at which point you should select Yes.
Step 3: Reference the Parent Theme
By now your theme has a home and some basic information. Now, it’s time to give it some functionality. You can do this by creating a functions file. Among other things, this file determines the unique functionality of your theme. It’s a powerful tool with many uses, but for now, you only need to create it.
As before, this file should be placed in your child theme’s folder. So create a new file, and name it functions.php. Once again, be sure to use that exact spelling and capitalization.
The most important function — and the only one you need to add right now — is telling the child theme to reference the parent theme. If you don’t do this, only the child theme’s styles will be used. This would defeat the point of using a child theme in the first place.
Open your new functions.php file and add the following code:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
That’s it! You don’t need to edit the code since you already specified what the parent theme will be in the style.css file. Just save your functions file, and agree when asked to replace the older version.
Step 4: Activate the Child Theme
Your child theme is now ready to be used, so all you need to do is activate it. The easiest way to do this is through the WordPress admin interface. Simply log in, and then access Appearance > Themes. You should already see your child theme listed here:
At this point, you just need to click on Activate to enable your theme. You probably won’t notice any differences to your site at this point, of course. This is because you haven’t actually added any customizations yet. Your child theme is still a blank slate, waiting for you to turn it into something special.
As we mentioned earlier, you should now take some time to learn more about CSS and PHP. This will enable you to add new styles and functionality to your site through the child theme, using the built-in theme editor. If you want to expand your theme’s functionality, it’s also a smart idea to learn more about the functions.php file. With a little effort, you can use your brand new child theme to make any changes you'd like to your WordPress website!
Turning a Modified Parent Theme Into a Child Theme
So far, we’ve talked about how to create a child theme from scratch. However, what if you’ve already made changes to an existing theme, and want to carry those over? The good news is that you don’t need to lose your modifications. Instead, you can take the changes you’ve made and turn them into a child theme.
One way you can do this is by using the Child Theme Configurator plugin.
Among other things, this plugin enables you to create child themes based on existing parent themes. For full instructions on how this process works, you’ll want to refer to the official plugin documentation.
If you prefer to do this manually instead, you can simply compare the original, unedited version of your theme with the current version running on your site. There are plenty of tools available to help with this, such as DiffNow or Diff Checker.
These tools enable you to enter two pieces of text and immediately see the differences between them. You’ll need to go to the Theme Directory and download an unaltered copy of your existing theme first. Then, paste the contents of your edited theme’s files in one field, and the theme’s original files in the other.
When you see differences between the two themes, copy only the edited code and save it in a text document for later.
After you have scanned through each modified file and have saved every modification, you can use the process we outlined in the previous section to create a child theme. Once you’ve set up the child theme, simply copy the changes you saved in your text document into its files.
Conclusion
Creating a child theme is the best way to make modifications to a theme without taking on any of the associated risks. Using this process, you can change nearly anything you’d like about your site’s appearance and layout. What’s more, you’ll be able to create your child theme in no time.
