Struggling with how to make a WordPress child theme or why you even need a child theme in the first place?
If you want to make direct edits to your WordPress theme, it’s essential to use a child theme so that your changes don’t get overwritten when you update your theme. A child theme also helps you streamline your development processes by collecting all your custom code in one spot. Or, if you’re building client sites, you can create your own child theme to use as a sort of boilerplate for all the client sites that you build.
The point is – child themes are a really useful thing to understand, whether you’re just a casual WordPress user or you’re a developer.
To help you gain that understanding, we’ve created our complete beginner’s guide to WordPress child themes. We’ll cover what child themes are, why they’re important, and how you can make and customize your first child theme.
Let’s dig in!
What Is a WordPress Child Theme?
A WordPress child theme is a WordPress theme that inherits its design and functionality from a parent WordPress theme. For example, if you’re using the popular Astra theme, you could create an Astra child theme that inherits its initial design and functionality from the regular Astra theme.
If you don’t make any changes to the child theme, your child theme will behave exactly like its parent theme. But if you do make changes to the child theme, the changes that you make to the child theme will overwrite the functionality or design in the parent theme.
For example, if you edited the template for a single blog post in your child theme but left everything else the same, your site would:
- Use the template that you created in the child theme for blog posts.
- Use the regular Astra templates for everything else because your site still goes to the parent theme if you didn’t make any changes in the child theme.
Some theme frameworks also make use of child themes by default. For example, if you use the popular Genesis Framework (our review), you use the Genesis Framework as your parent theme and then install one of the many Genesis child themes to control the design of the Genesis site. The Genesis child theme inherits all its foundational functionality from the parent Genesis Framework theme, but the child theme then adds the unique design.
However, you should also use a child theme even if you’re using a standalone theme like Astra or GeneratePress. Basically, if you ever want to edit your theme, you should use a child theme.
Article Continues Below
Benefits of Using a WordPress Child Theme
The main benefit of using a child theme is that it lets you safely make changes to a WordPress theme’s files without having those changes overwritten every single time you update your theme.
For example, let’s go back to the idea of creating a special blog post template from the previous section. You could make this change directly to the parent theme and your site would use that template just fine…at first.
However, the problem comes when the theme developer pushes out an update. It’s important to quickly apply updates to receive new features and make security fixes. However, if you were to update your theme after making an edit directly to the parent theme, your special blog post template would get overwritten and your site would revert back to using the default Astra template.
If you wanted to keep using your special template, you would need to manually make the change again…and do that every single time you update your theme. Not fun!
However, if you use a child theme, your changes will stay intact because you only update the parent theme when you update a theme. And, as you learned above, the changes that you make to a child theme take precedence over the parent theme.
So, in this case:
- When you update the parent theme, the parent theme’s blog post template will also get updated.
- However, because you made your change to the child theme, your child theme’s single blog post template will still override the template in the parent theme, so your site still keeps functioning just like it was.
Beyond letting you safely update your parent theme without losing changes, a child theme is also just generally useful because it lets you collect all of your manual code edits in one spot. This makes it a bit easier for you or developers to work on your theme because it’s easier to keep track of changes.
Components of a WordPress Child Theme
There are only two basic components of a child theme, but you can also include additional files when you customize your child theme (which we’ll cover in more depth later on):
- style.css – this file contains all of the CSS that you’ve added to your child theme and also links your child theme to the parent theme.
- functions.php – this contains all of the code snippets that you’ve added to your child theme.
You take these two files and install them as their own “theme”, which gives them their own directory on your server – e.g. wp-content/themes/your-child-theme.
Your child theme will inherit all of its other components from the parent theme. If you wanted to, though, you could copy a template file from your parent theme to your child theme so that you can safely edit it.
We’ll cover how to do all of this in the next few sections.
How to Make a WordPress Child Theme
There are two popular methods for how to make a WordPress child theme:
- Plugin – you can use a free plugin to generate your child theme.
- Code – you can manually create a child theme by creating the two files that we mentioned above.
There can be a few tricky things with the manual route when it comes to enqueuing stylesheets and such, so we recommend most people go the plugin route unless you’re a developer.
Once you create your child theme, we’ll show you how to install it in the next section.
First – Check If Your Theme Developer Already Offers a Child Theme
Before you jump into creating your own WordPress child theme, it’s useful to first check if your developer already offers a child theme that you can use.
You’d be surprised – most developers of popular themes do offer child themes, though you’ll typically only find it mentioned in the support docs.
For example, all of these popular themes include already-built child themes or tools to help you easily create a child theme:
Check out your theme developer’s support docs and you might find that you don’t need to do any work yourself.
Plugin Method – Child Theme Configurator
Note – before using this plugin, we highly recommend taking a full backup of your site or working on a staging site. While the plugin is unlikely to cause issues, it’s always important to have a backup.
Child Theme Configurator is the most popular plugin to help you make a WordPress child theme. The reason this plugin is popular is because it handles everything for you, even down to enqueuing stylesheets and fonts in an optimal way.
Once you have a backup of your site or you’ve set up a staging site, you can get started by installing and activating the free Child Theme Configurator plugin from WordPress.org.
Then, go to Tools → Child Themes to start the process.
Use the Select a Parent Theme drop-down to choose the theme you want to create a child theme for. Then, click Analyze:
You should see a few success messages based on the plugin’s analysis, along with options to customize how your child theme works.
If you’re an advanced user, you can adjust these options according to your preferences. If you have no idea what the settings mean, just leave them as the defaults:
If you’re working on an existing website, though, I highly recommend checking #8 – Copy Menus, Widgets, and Other Customizer Settings. This will ensure that you keep all of your current menus, widgets, etc. when activating the child theme.
Once you’ve configured everything, scroll to the bottom and click the Create New Child Theme button:
And that’s it! You just created a child theme. However, it’s not active yet. To activate your child theme, go to Appearance → Themes.
I recommend previewing the child theme first. Then, if everything looks good, just click the button to activate it like you would any other WordPress theme:
Manual Method – Use a Code Boilerplate
As we mentioned above, there are two basic components to a child theme:
To manually create your child theme, all you need to do is create these two components.
To help you do this correctly, you can find a child theme code boilerplate from Ahmad Awais at GitHub. All you need to do is download that code and replace the dummy content in the style.css file with the actual information for your theme.
The only important thing to note is that the Template field must match the name of the folder that contains your parent theme (on your server).
For example, if your parent theme is located at wp-content/themes/astra, you would set the template equal to astra in the style.css file for your child theme.
Once you’ve made your edits, you can combine the style.css and functions.php files into a single zip file so that you can install it directly via your WordPress dashboard.
How to Install a WordPress Child Theme
If you use the Child Theme Configurator plugin, it will install your child theme for you. However, if you downloaded a child theme from your developer or manually created one yourself, you’ll need to install it as well.
You can install a child theme just like you install a regular WordPress theme – go to Appearance → Themes → Add New and upload the zip file that contains your child theme:
The only important thing is that you need to make sure you’ve also installed the parent theme.
Once you’ve activated it, you can click on the details for your child theme and you should see a message telling you its parent theme:
Customizing Your WordPress Child Theme
As we covered in the benefits section, the big advantage of using a WordPress child theme is that it lets you safely customize your theme.
To achieve that benefit, you need to make sure that you’re always making your customizations directly to the child theme’s template files.
Adding Custom CSS
If you want to add custom CSS to your theme, you can do so by adding it to the style.css file in your child theme.
Add it below the configuration information at the top of the style.css file:
Adding Code to functions.php File
If you want to add code snippets to your child theme, you can do so by adding them to the functions.php file in the child theme:
However, while you can go this route, a better method is usually to use a dedicated code snippets plugin like Code Snippets or your own custom plugin. That way, you’ll still keep your code snippets even if you change WordPress themes.
Or, you can use both and use:
- Your child theme’s functions.php file for code snippets that are unique to your theme.
- The Code Snippets plugin or your own custom plugin for code snippets that aren’t unique to your theme.
Overwriting Your Parent Theme Templates
For more advanced users, you can also use your child theme to directly edit the template files in your parent theme. However, you will need a solid knowledge of PHP and HTML to do this.
To get started, you first need to copy the template file from your parent theme’s folder to your child theme’s folder (you can do this via FTP or cPanel File Manager).
For example, if you want to edit the template for your blog posts, you’d copy over single.php (or the template part for your blog post, depending on how your theme is coded). Then, you can make your changes directly to the file in the child theme’s folder.
Remember – WordPress will give priority to the version of the template in the child theme. So even if you update your parent theme, your customized template will keep working.
Here, you can see that I’ve copied over the single.php file from the parent theme, which lets me edit it while working in the child theme:
Create Your WordPress Child Theme Today
If you want to customize your WordPress theme in any way, it’s essential to use a child theme. At a basic level, a child theme prevents the changes that you’ve made to your theme from being overwritten when you update the parent theme.
Child themes also make it easier to keep track of what you’ve changed and manage your edits, which helps make your work more convenient (and if you hire a developer, they’ll thank you).
As is often the case with WordPress, there are two routes you can go to make a WordPress child theme.
If you feel comfortable working with code, you can manually create your child theme by uploading a few key files. Or, you can also go the plugin route and use a free plugin like Child Theme Configurator to create your child theme.
Get started today to make sure you’re implementing this WordPress theme development best practice.
Still have any questions about how to make a WordPress child theme? Let us know in the comments section and we’ll try to help!