Are you looking to create a WordPress child theme? If you want to customize your WordPress site beyond the default Customizer, then making a child theme is a great starting point. This article will show you how to create a WordPress child theme with step-by-step instructions.
What is a WordPress child theme?
As the name implies, a child theme is the offspring of a WordPress theme. Technically speaking, any WordPress theme can have a child, although a lot of themes are coded in a way that makes it too difficult, or cumbersome to have a child.
A child theme will inherit all the functionality, features, and style of the parent theme.
Why would you want to create a child theme in WordPress?
Suppose you’ve come across a theme that you really like, but you’re a special snowflake and would like to change somethings in the theme. Unfortunately, the Customizer feature in WordPress limits what you can do with the theme.
Instead of making changes directly into that theme, you create its child theme. This child theme will piggyback on top of the parent theme and introduce changes into the parent theme. Meanwhile, the parent theme is completely safe throughout the process.
That means creating a child theme is the right and safe way to modify an existing theme in WordPress. Confusing? Heck yes. But I promise that if you stick with it, you will see why WordPress powers 30% of websites all over the world.
Further benefits of creating a WordPress child theme
- As new versions of the parent theme becomes available. you can update it and your child theme will follow suit. No broken code whatsoever.
- You can deactivate your child theme and go back to your parent theme anytime you like.
- Making a child theme is a great first step to learning WordPress development, making premium themes for sale etc. The sky’s the limit.
Which themes is suitable for making a child theme?
As I mentioned above, not every WordPress theme is conducive to making a child theme. They are either too complicated for their own worth, or badly codedYour best bet is to use the default WordPress themes like Twenty Fourteen, Tweenty Seventeen etc.
How to create a WordPress child theme?
Step 1: Access your WordPress themes folder
First of all, you need to access your wp-content/themes folder. If you seldom tinkle with the WordPress backend, you probably don’t remember how to access that folder. Here’s a refresher just in case:
You can access your WordPress site’s directory through either of these two methods:
- use an FTP client like Filezilla or Cyberduck.
- use the File Manager.
File Manager is a web-based application available in the cPanel dashboard of your WordPress hosting account. It doesn’t require any setup, so I will go with this method.
In the cPanel, look for the File Manager app and click on it. Set the directory as Document Root for your site. I’m using Siteground to host my website, so the interface may look different, but you can still get the idea.
You will be directed to a home page that looks like the one below.
One by one, click on the public_html folder, wp-content, then themes. This is the folder that stores all the themes you have installed. You can install as many themes as you like, but you can only activate one.
Step 2: Create a folder for your WordPress child theme
Inside the themes folder, click on the new folder icon at the top left of the dashboard. Name it following this format: “name of your parent theme’s folder” hyphen child. For example, I’m going to create a child theme for the Twenty Seventeen theme, so my folder’s name is twentyseventeen-child.
The naming convention in WordPress is case and space sensitive, so naming it as something like Twenty Seventeen Child won’t work, as WordPress won’t recognize it as a child of the Twenty Seventeen theme.
Step 3: Create a CSS stylesheet for your WordPress Child Theme
Technically speaking, the only file required for making a child theme is the style sheet. Overtime, you will add a lot more files, but to get started, a style sheet is all we need for now.
In your code editor, create a blank file and save it as style.css. Then add the following code snippet to the file:
/* Theme Name: Twenty Seventeen Child Theme Theme URI: https://www.komonodesign.com Description: A child theme of Twenty Seventeen, a default blog-centric theme by WordPress. Author: Trang Le Author URI: https://www.komonodesign.com Template: twentyseventeen Version: 0.1.0 */ @import url("../twentyseventeen/style.css");
In the last line, the double dot .. represents the parent directory. The command tells WordPress to move out of the current folder (twentyseventeen-child), go to the twentyseventeen folder and then navigate to its style.css file.
As a word of caution, you need to pay attention to Template: twentyseventeen. It tells WordPress that our theme is a child theme of a parent named twentyseventeen.
Step 4: Activate the WordPress child theme
You can now go to Appearance >> Themes to see the new child theme we’ve created.
The preview looks blank because we haven’t added a screenshot of the child theme. Don’t worry, we can always add it later. Hover the cursor over it and select Preview.
It looks exactly the same as the parent theme because duh, we haven’t made any modifications yet. We merely import the style sheet from the parent theme. Click on the Activate button to start applying the child theme on your site.
I hope this article helped you learn how to create a WordPress child theme. The path is long, but you’ve taken a step closer to design any theme that you can imagine.
If you like this post, pin it to your Pinterest board for future reference.