In WordPress, a child theme is a theme that inherits the functions and styles of another theme. Creating one allows you to edit and modify elements on your website without touching the main or parent theme’s core files.
You can think of the child theme as transparent paper over a painting, where the painting is your parent theme. You can add or edit elements to it that will make the painting look a lot nicer, but you don’t touch the original creation.
What is more, using a child theme to modify your theme is a lot safer as your changes won’t be deleted when the theme is updated.
With that said, I will discuss the benefits and drawbacks of using a child theme in WordPress, as well as how to create one.
The Benefits of Using a Child Theme
A child theme is ideal for beginner developers as you don’t need to worry about knowing the nooks and crannies of WordPress themes. There are not a lot of files in the child theme, making coding way easier.
That is also why customizing your theme becomes extremely simple, as you only need to add the changes you want to see. Everything else that is missing will be taken care of by the parent theme, as it is the backbone that dictates the site’s designs and functions.
Lastly, creating a WordPress child theme would not slow down your website as you did not use plugins to make changes to your website.
The Drawbacks of Using a Child Theme
Despite its attractive benefits, you also need to consider the disadvantages of using a WordPress child theme.
For instance, if you end up adding a ton of files to your child theme, some of those files might have to be revised in order to work with the continuously-updated parent theme.
In this case, you’ll have to monitor the parent theme for updates or changes. Picking a parent theme with a lot of support makes updates easier, but you still need to be proactive yourself.
You also need to know a higher level of coding if you wish to do advanced modifications. On top of that, it’s recommended to learn the code and functionalities of the parent theme before making serious changes.
In some cases, a child theme is not as efficient as having a custom theme that does what you want. If you need to add an additional feature quickly and easily, creating a WordPress child theme might not be the best route for you.
How to Create a WordPress Child Theme
Follow the steps below and learn how to create a child theme:
1. Choose your Parent Theme and Install It
It is important to choose a good parent theme that can last you a long time. As such, find one that has good support and opt for a theme that you will enjoy using.
Alternatively, you can use a WordPress theme framework if you want to create a theme of your own. This way, you don’t need to code from scratch. Simply select a free theme framework and start building on it.
To install a WordPress theme, go to Appearance -> Themes -> Add New.
2. Create the Child Theme Files
Once your parent theme is installed and activated, it’s time to create the child theme files.
First thing first, access your website files through your hosting’s File Manager or FTP. In this article, we’re using Hostinger’s hPanel.
Head over to public_html -> wp-content -> themes and create a new folder with the name of your child theme. Typically, parenttheme-child is used to distinguish it from the parent theme. For example, if your parent theme is called astra, then create a folder named astra-child.
Open the folder and create the following theme files:
style.css
In the child theme folder, create a new file named ‘style.css’. Double click to open it and copy the code below:
Theme Name: ParentTheme Child Theme URI: http://example.com/parenttheme-child/ Description: ParentTheme Child Theme Author: Author’s Name Author URI: http://example.com Template: parenttheme Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, two-columns, right-sidebar, responsive Text Domain: childtheme
Don’t forget to replace the domain and the name of the author, parent theme, and child theme.
Both the Theme Name (the name for your theme) and Template (the parent theme directory name) are required information. Otherwise, your child theme won’t have a name and cannot locate its parent theme.
After that, you can add design changes to the style.css file with the use of CSS code. However, there is one more file you have to create before you can do so.
functions.php
The functions.php file is used to add or change the features of your WordPress theme. Most importantly, you’ll use this file to enqueue the parent and child theme stylesheets.
The common practice was to import the stylesheet from the parent theme using @import. However, WordPress developer handbook states that this is not recommended any longer and we should utilize the wp_enqueue_style() function instead. I’ll include this function in the code later.
Like the previous step, create a functions.php file and insert the following code:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
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')
);
}
Note that ‘parent-style’ will be the name of the parent theme’s directory. Using the example above, the name would be ‘astra’.
Hit the Save button and close the file.
Additional Template Files
You can include other template files from the parent theme into the child theme. When that happens, the parent theme’s files will be overwritten.
Note that if you want to include PHP files within your child theme directory, you need to reference that file using require_once($path) and get_stylesheet_directory(). The code will look like this:
require_once( get_stylesheet_directory(). '/my_filters.php');
3. Edit Your Child Theme
If you don’t have a staging environment that you can use to test out your new theme, you should activate your parent theme and make changes locally on your computer to test it.
You can do so by inspecting elements. This is done by right-clicking an element on your website and selecting Inspect.
A box will pop up on the right side of your screen that looks like this:
With this box, you can tweak your CSS file in real-time without causing permanent changes to the website. When you refresh the page, it will revert back to normal.
If you like the changes you’ve made, copy the CSS code of the elements that you modified into the style.css file of your child theme. For example, if you want to make the text larger in your posts, you can write:
.entry-content p {
font-size: 16px; // assuming it was, say, 14px before.
}
4. Activate Your Child Theme
Go to Appearance -> Themes in your admin dashboard and click on the child theme to activate it.
If you are making changes to your theme but don’t see them yet, you might have some sort of caching plugin or server-side caching activated that’s showing you the old design of your website. In that case, you’ll only need to refresh the cache to see the changes.
Bonus Tip for Child Themes
You will most likely first start changing the basic features of your child theme, such as background color and font size. However, when you start tweaking more complicated features, your child theme’s style.css file can get messed up quite easily.
To make it easier for you, check your parent theme’s style.css file and find its table of contents. Most popular theme developers will use it to keep their code organized.
You can copy it into your child theme’s style.css file and apply the same idea. Add any changes you make to the section that corresponds with the one in the parent theme. That way, your child theme’s files will be organized and a joy to work with.
Conclusion
A child theme is often used when you want to customize your theme without touching the core files of your parent theme. It is ideal if you want a simple modification or if you’re a beginner developer who doesn’t know much about coding. And thankfully, making one is easy and does not take a lot of time.
I hope this article has helped you to understand WordPress child themes a little bit better, and you’re able to create one on your own.
Leave a Reply