WordPress themes today are much more sophisticated than in the past and offer a wide range of customization options. However, in many situations, we want to modify a specific function or file in the purchased template.
Of course, you can make changes directly to the template’s source code, but if you decide to update the template one day, all the changes you made will be lost, and the update will likely overwrite the files you modified.
Using a Child Theme solves this problem. A child theme allows you to make changes to the parent theme without the risk of losing them during an update. So, what are the benefits of using a child theme, and how does it work?
If you simply want to download a child theme without unnecessary explanations, you’re welcome to download a child theme from this link. Note that you need to modify the relevant details in the style.css file according to the instructions provided in step B later in the post.
Why Should You Use Child Themes?
As a general rule of thumb, it’s recommended to use child themes even if you’re planning to make minor changes to the parent theme.
There are two main reasons you should consider using a child theme, especially if you plan to update the parent theme for organizational purposes in your code:
For Updates
If you directly change the code in the parent theme, you’ll encounter one of the following situations when an update is released for the parent theme and you want to implement that update:
- Choose not to update the parent theme and continue working with an outdated version.
- Choose to update the parent theme and lose the changes you made.
The first option is not recommended. Beyond bug fixes and expanded theme options that updates usually provide, most website breaches occur on sites with outdated code. You can understand why the second option mentioned is a waste of time…
For Code Organization
When you add or modify code in the parent theme, you usually change code in files that can contain thousands of lines of code. Developers working on your site (or you) will have difficulty tracking these changes.
Since child themes act as a kind of fallback for the original theme, the child theme consolidates all the changes you made. This allows you, as developers, to make changes more quickly and in a more organized manner.
How Does a Child Theme Work Behind the Scenes?
So how does a child theme work? First, understand that a child theme is essentially a separate theme that relies on the main theme (the parent theme) for most of its functionality.
Child themes work at the file level. WordPress first checks if the required file exists in the child theme, and only if it doesn’t find it, it searches in the parent theme.
There’s one file that deviates from this rule, and that’s the functions.php file – this file is loaded both in the child theme and in the parent theme.
Let’s provide some practical examples and explain how you can use a child theme to modify the functionality of the original theme:
Overriding a Template File Using a Child Theme
Let’s say you want to make changes to a specific file in the parent theme, such as the header.php file.
All you need to do is copy it to the main directory of the child theme. From this point on, the file that will be loaded is the one in the child theme.
Note that we’re talking about template files only and not assets like CSS and Javascript files, for example…
Now you can make changes to your theme’s header by editing the header.php file in the child theme, while the original file in the parent theme remains unchanged.
If you decide to update the parent theme in the future, the header.php file in the child theme will still contain the changes you made, so nothing will break on your site due to the update (in the context of this file).
This way, you can override any template file that exists in the main directory of the parent theme. But what if you want to override a file that doesn’t exist in the main directory but in a subdirectory?
In this case, you need to maintain the folder hierarchy in the child theme to override files in the parent theme. In other words, you need to create the same subdirectories in the child theme as in the parent theme for the file you want to override.
It’s important to understand that you can add files to the child theme that don’t exist in the parent theme. For example, you might want to create a more specific template file for a particular page or for a custom content type archive.
Overriding a Function in the Parent Theme Using a Child Theme
I previously wrote a detailed guide on how to override an existing function in the parent theme using a child theme, so I won’t elaborate on this topic again. Feel free to check it out if you’re interested…
How to Create a Child Theme in WordPress?
Creating a child theme is not a complicated process; all you need to do is perform the following actions. We will explain them in detail below:
- Create a folder for the child theme under the themes directory – usually
/wp-content/themes. - Create a style file named
style.cssthat contains information about your child theme. - Ensure the child theme loads the parent theme’s style file.
- Load the child theme’s style file after the parent theme’s style file is loaded.
Step A – Creating a Folder for the Child Theme
Go to your themes directory and create a new folder for the child theme. You can choose any name for the folder, but avoid using spaces. Remember the exact folder name as you will need it in the next step.
Step B – Creating the style.css File for the Child Theme
Enter the folder and create a file named style.css. Then copy and paste the following code into this file:
/*
Theme Name: Your Child Theme Name
Template: parent-theme-folder
*/These are the only required lines for creating a child theme. Line 2 specifies the theme name displayed in the WordPress dashboard.
Line 3 indicates which theme to refer to as the parent theme, and the name must exactly match the parent theme folder.
There are additional options, such as adding tags and setting a text domain for the child theme, but we won’t cover those as they are not mandatory.
Step C – Creating functions.php and Loading the Parent Theme’s Style
If you go to the WordPress admin interface now, you will see your child theme under Appearance > Themes. You can activate it at this point, and it will work fine. However, if you do so, you will notice that your site is displayed without any styling (no CSS).
We need to load the parent theme’s style file to see our child theme properly, as this file contains all the styling settings of the original theme.
To ensure that we load the parent theme’s style file, we need to add the following function to the child theme’s functions.php file. Go to the main folder of the child theme, create this file, and add the following lines:
<?php
function savvy_child_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'savvy_child_styles' );
Step D – Loading the Child Theme’s Style File
At this point, our child theme loads the parent theme’s style file. However, in most cases, we also want to allow the child theme to override existing CSS settings in the parent theme’s style file.
To do this, we need to add an additional line to the code we presented earlier to load the CSS file of the child theme. Here is the complete code:
<?php
function savvy_child_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', 'parent-style');
}
add_action( 'wp_enqueue_scripts', 'savvy_child_styles' );
At this point, any changes you make in the style.css file of the child theme will override the existing styling settings in the parent theme.
Note that we are defining a dependency between the files, so the child theme’s style file will load after the parent theme’s file. Also, it’s important to mention that to load assets from your child theme’s folder, you need to use the ()get_stylesheet_directory_uri function instead of the ()get_template_directory_uri function we use to get the correct path when loading assets from the parent theme.
For more details on this topic, refer to the guide on How to Add CSS and Javascript Files to WordPress Sites.
After these steps, if you have already activated the child theme, you will find that your site looks exactly as it did with the parent theme.
How to Add Hebrew (RTL) Support to the Child Theme?
To maintain RTL support in the child theme, create a file named rtl.css in the main folder of the child theme. Add the following line to the code in functions.php:
wp_enqueue_style( 'child-style-rtl', get_stylesheet_directory_uri().'/rtl.css' );
Note – if an
rtl.cssfile exists in the parent theme, simply copy it to the child theme folder.
If your site is configured as RTL, in other words, if the is_rtl() function returns true, the rtl.css file, if present in the child theme, will be loaded automatically.
Summary
While there are many words in this post, the steps to create a child template are straightforward and essentially involve copying and pasting, and creating a few files as I hope you’ve understood.
Creating a child template can save you a lot of headaches in the future and allows you to update the parent template whenever you want without worrying about losing your changes. Additionally, it enables you to work in a more organized and structured way in terms of code.
By the way, you’re welcome to download the child template we’ve created, but make sure to modify the code in the style.css file according to your parent template’s directory name. If you have any tips on child templates, feel free to share them with us, and as always, you’re welcome to comment and discuss… 🙂
