If you’re like most WordPress site owners, you’ve probably made a few changes to your theme’s files.
Maybe you changed some CSS, PHP code or added new features on your own. And then, after a while, an update for your theme rolled out, and you clicked “Update”. But when you did this, all of your code changes were replaced by the original updated theme files. You spent all that time tweaking and perfecting your site’s design and features, and now it’s all gone.
It’s so frustrating.
Well, not anymore. Your entire site has just got reset without any backup point. Thanks to WordPress child themes, but what are those really?
What Is A Child Theme?
A WordPress theme that inherits its functionality from another (parent) theme, is known as a child theme.
Child themes allow you to modify, or add to the functionality of that original theme without modifying it directly.
The changes you make in a child theme will appear only on pages where it’s is used, and the parent theme files remain unchanged.
With a child theme, you can make all of the changes you want without worrying about losing them when you update your parent theme.
How To Create A Child Theme in WordPress?
You should remember that we’ll be dealing with code before we start creating a child theme. And, if anything goes wrong, make sure you’ve got a backup for your WordPress site.
Also, for this example, I’ll be working with Twenty Twenty Two.
Essential things required to create a child theme include a:
- Style sheet
- Functions.php file
- Access to your host files
You can either go with the manual method or via the plugin.
Creating child theme manually
With everything set up, start following these steps:
Step 1: You’ll need to create a folder on your server where you can save all of your child theme’s template files and assets using File Manager in the control panel of your WordPress hosting provider.
Step 2: Go to public_html > wp-content > themes.
Step 3: Create a new directory (folder) with your theme name and append “-child” at the end of the folder name (as shown below).
Step 4: Go inside this new folder you just created > create a new file and name it “style.css”.
Step 5: Add the following code to this file (for Twenty Twenty Two Theme):
Theme Name: Twenty Twenty-Two
Theme URI: https://example.com/twenty-twenty-two-child/
Description: Twenty Twenty-Two Child Theme
Author URI: https://example.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-column, responsive-layout
Text Domain: twentytwentytwochild
Don’t forget to copy the asterisks and slashes too. Hit save once done.
Step 6: Create another file with the step shown in step 4 but this time, name the file as functions.php and copy-paste the code below into this file.
/* enqueue scripts and style from parent theme */
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
Step 7: Now go to Appearance > Themes > Activate.
And start using the child theme on your site.
Step 8: To add functionalities, you can make the changes to your functions.php file to add styling, or code to your style.css file.
In some cases you might not want to change the code yourself, so here’s the plugin method you can follow.
It’s a safe and quick method to build a child theme with little risk of failure.
I’ll be using a Child Theme Configurator plugin for creating a child theme.
Step 1: Install and activate the plugin.
Step 2: Once activated go to Tools > Child Themes in your WordPress dashboard.
Step 3: On the Parent/Child tab, a drop-down menu will appear with various parent themes to select from. I’ll choose the Twenty Twenty-Two theme.
Step 4: To ensure that the theme is appropriate for usage as a parent theme, click the Analyze button.
If the theme is suitable, you’ll get a success message. This means your theme has no issues and you can proceed to the next steps.
Step 5: Rest, leave everything to default settings > scroll down and click Create New Child Theme.
Step 6: Now go to Appearance > Themes > Activate and start using the child theme on your site.
8 Reasons WordPress Child Theme Isn’t Working
Finally, you have created and activated a WordPress child theme.
But when you go to your site, nothing changes. There’s no indication that the new theme is in use. There are a few reasons why this may occur.
- Invalid file names or extensions
Sometimes, you misspell the file name or forget to include the correct extension (.css or .php). Also, it’s possible you might have misspelled style.css or functions.php.
You might not have placed your child’s theme files in the correct location. The folder path for a child theme should be: public_html > wp-content > themes > child theme.
If your child theme isn’t activated, it won’t show up on your site. Make sure you’ve followed the steps above to activate it.
If you’ve named your child theme incorrectly, WordPress won’t be able to find it. Double-check the name you’ve given the child theme and make sure it matches that of the parent’s theme.
- Incompatible parent theme and child theme versions
It’s possible that the parent and child themes are incompatible with each other. In this case, deactivate the child theme and update the parent theme to the latest version. Then, reactivate the child theme.
- Your CSS code is set on low priority
If the parent theme is still overwriting the child theme’s CSS, add !important to the elements you modified. Whatever is written on the parent theme’s CSS sheet will be overridden violently. Like this:
a color: blue !important;
If you’re still seeing an older version of your website, try cleaning your WordPress cache. To ensure that the modifications have been updated, view your website in an incognito window to see if any of your published changes have been applied.
If none of the above tips work for you, have any questions, or run into any problems, contact your theme support team for assistance. They will be able to assist much better and troubleshoot the issue.
4 Advantages Of Using A Child Theme
Creating a child theme in WordPress is a great way to customize your website without having to touch the original files.
This gives you the ability to update your theme without losing any of your custom changes. In this section, I’ll mention some of the benefits of using one. Few benefits include:
- Keep the changes live even after updates
When you make changes to your original WordPress theme, they get overwritten the next time you update the theme. This can be frustrating if you’ve put a lot of work into customizing it. But, if you create a child theme, any changes you make will be safe from updates.
- Making changes without risking your original theme
If you’re not comfortable making changes to the original files of your WordPress theme, creating a child theme is a good way to go. This way, you can make all the changes you want without worrying about ruining the original files.
- Creating similar websites
If you want to create a website that looks similar to another one, it’s much easier to do if you’re using a child theme.
You have to find the original theme and make the changes you want in the child theme. You simply need to upload your child theme to another location within the WordPress site’s directory and then activate it in the parent theme.
Then, when the parent theme is updated, your modifications will remain intact, and you may use the same child theme on other sites just like this one. This has no impact on the appearance or function of your designs and functions if you’re building two or more similar websites.
Using a child theme allows you to develop much more quickly. Instead of starting from scratch, use the parent as a foundation and modify it as needed.
Creating a child theme is a great way to customize your WordPress site and makes updating your theme much less risky.
This will allow you to make changes to your site’s files without fear of losing them when you update your theme.
I hope you find this information helpful and that it allows you to have more control over the design and features of your website.
Now that you have set up your child theme, you can start making changes to the code and see how they appear on your live website.
Be sure to save a copy of the original files in case you need to revert back to them later.
If you have any questions, please let me know in the comments.