Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
This tutorial isn’t for everyone.
You don’t need to be an experienced developer to follow along, but you do need a genuine interest in learning more about WordPress and how themes work.
If you’re not afraid to work with a bit of code and get your hands dirty with some theme files, then welcome aboard!
In this guide, you’ll learn how to customize your WordPress site to your heart’s content using a child theme, but first…
Let’s cover exactly why you should even use this weird thing called a “child theme.”
Why use a child theme?
Repeat after me:
I solemnly swear to never edit a theme file.
New WordPress users who are interested in making customizations with code often directly edit the files in their theme. This is a big no-no.
Why?
One reason: when you update your theme, WordPress will override your existing theme with the new version of the theme.
So why does that matter?
Imagine you’re using version 1.04 of the Challenger theme. You moved the menu in the header.php file and added some new CSS to style.css. Then version 1.05 comes out and you see the notification in your dashboard.
When you update to v1.05, both the header.php and style.css files will be replaced with the ones in v1.05 of Challenger. They are not going to contain the same edits you made, so your work will be lost and there’s no way to get it back. This can be pretty disheartening if you sunk hours into your customizations.
However, if you put your customizations into a Challenger child theme, you could safely update to version 1.05 without losing any of your customizations because they are stored safely in the child theme.
This will become a bit clearer as we move into a real example, so let’s go ahead and make a child theme now.
How to create a child theme
While I’m not going to explain in detail how all of the code works here, these are the basic ideas and snippets you need to get started.
Basic setup
Start by creating an empty folder on your desktop. You can name it whatever you’d like, but the standard naming convention is to use the theme’s name in lowercase followed by “child” and replacing spaces with hyphens.
For instance, a child theme for the Challenger theme would have a folder name “challenger-child.” This folder will contain all of the child theme’s files.
You only need one file to make a technically valid child theme, style.css.
Create the style.css file
Using the code editor of your choice, create a new file inside the child theme folder and name it style.css.
The style.css file is, of course, where you will add all of your CSS to customize your site. In order for WordPress to recognize your child theme as a valid theme, you need to add a stylesheet header like this at the very top of style.css:
/* Theme Name: Challenger Child Template: challenger Author: Compete Themes Version: 1.0 Author URI: https://www.competethemes.com Description: This is a child theme used to customize the Challenger WordPress theme. License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
You can copy this exact header and use it for your own child themes. Just switch out the name of the theme with whatever theme you’re customizing.
The most important part is the “Template” value which must be set to the name of the parent theme. In particular, the name used for the folder containing the parent theme.
With this in place, you can already activate the child theme via the Appearance menu and use it. However, your site will be completely unstyled!
When a child theme is activated, WordPress will no longer load the parent theme’s style.css file and instead depend on your child theme to do that.
Here’s how you can load both stylesheets…
Create the functions.php file
In your code editor, create a second file in the child theme and name it functions.php.
Next, add the following code to the file:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
This function tells WordPress to load the parent theme’s style.css file and then load the child theme’s style.css file after. Loading the child theme’s stylesheet after makes it easier to override the parent theme’s CSS selectors.
As I mentioned previously, I’m not going to cover this code line-by-line, but you can find a more detailed explanation of this snippet in the WordPress Codex.
Customizing with your new child theme
That’s all you need to do to create a functioning child theme!
With the child theme setup, there are three ways you can go about customizing your site with it.
Add and override styles
You can add as much new CSS into the child theme’s style.css file as you want.
When finding selectors to use in your CSS, don’t check the parent theme’s style.css file. All of our themes use a “CSS pre-processor” so we don’t even look at that file! Instead, follow this smarter process to find CSS selectors, and I think you’ll have a lot more success customizing your site.
Override functions
With a well-coded parent theme, you can override any of the functions found in its functions.php file.
For instance, every function in Mission News is wrapped with a function_exists() check. This means you can copy the function into your child theme’s functions.php file. Then you can make any edits you want to the function there.
Override templates
A common customization requiring a child theme is the reordering of elements. For instance, you might want to move the post title after the Featured Image instead of before it.
You can take any of the template files found in the parent theme and place a copy in your child theme. The version in the child theme will then be loaded instead. This allows you to add, reorder, and remove any elements you want in any part of the site.
Installing the child theme
Once you’re happy with your edits, you can install the child theme on your site.
Child themes can be uploaded just like regular WordPress themes, so it only takes a minute or two to get them activated on your site. Follow along with this tutorial to get your child theme installed:
How to Install a WordPress Child Theme
What tools should I use?
If you’re totally new to all this, here are a couple free tools to help you out.
First, if you don’t have a code editor, check out Visual Studio Code. It’s simple but flexible. It’s also totally free and lots of professional software is made with it. It’s what I use to make themes here at Compete Themes.
Second, creating a local WordPress site (offline) is a great way to try out code without affecting your real live website. While I’ve used and recommended MAMP in the past, Local by Flywheel is so darn easy and simple to use I love it. It’s what I use for theme development and it’s also free.
If you use Kinsta, using their DevKinsta tool is a no-brainer. It’s incredibly easy to use and will let you pull your live or staging site to a local environment, and then push your changes to their platform when you’re finished.
Your updates are safe
Going back to the example from earlier…
When updating the Challenger theme (or any theme) the entire “challenger” directory gets replaced which won’t impact the child theme because it now has its own directory in the “challenger-child” folder.
With your child theme in place, you can safely make any customizations you want and keep your parent theme up-to-date.
If you’re new to CSS and PHP, it may take you some time to get your customizations the way you want, but with a child theme, you have a great foundation to work with. Remember to follow these steps to find CSS selectors to use, and any style customizations you make will be pretty simple.
