How to Automagically Create Child Themes in WordPress
How to Automagically Create Child Themes in WordPress
You already know that if you’re going to modify a WordPress theme you had better be working with a child theme. Modify the theme itself, and all your hard work will be lost the next time the theme is updated.
WordPress developers, and most implementers, don’t have any trouble creating a child theme from scratch in just a few minutes. However, that isn’t true for the average WordPress user. The barriers to getting started with WordPress are low enough that many first-time ‘pressers know nothing about child themes, much less how to go about creating one.
While that low barrier to entry is a great thing, it means there are lots of WordPress websites out there running severely outdated themes because the website owners have modified the theme files and don’t want to lose the modifications when they update.
Fortunately, if you’re a theme developer, there’s a new tool you can use to make child theme creation as simple as possible for your users: Use Child Theme.
Creating Child Themes the Old-Fashioned Way
Right now, most theme developers help their users set up child themes using one of three methods:
- Providing a documentation page with step-by-step instructions on setting up a child theme
- Providing a downloadable child theme zip file, which users can upload using the built-in theme uploader
- Ignoring the issue entirely, leaving theme users to figure things out on their own with the help of WordPress blogs and tutorials
Method one is OK, method two is better, and method three is just plain lazy (but thanks for the extra traffic!).
A New-Fangled Way to Create Child Themes
Thanks to the good folks at FacetWP, creators of Use Child Theme, helping your theme users create their own child themes is now easier than ever for both developers and users. The free project is hosted at GitHub and is incredibly easy to implement.
Getting Started with Use Child Theme
Setting up Use Child Theme is a simple two-step process:
- Add the
use-child-theme.phpfile to your theme directory
- Add the line
require_once( trailingslashit( get_template_directory() ) . 'use-child-theme.php' );to your theme’s
That’s it. With the file in place and the code added to
functions.php, theme users will be prompted to create and activate a child theme – a process that is completed automagically with a single mouse click.
Step-by-Step Implementation Instructions
FacetWP has put together a 27 second screencast to show off the process. However, if you’ve watched the screencast you know that it moves pretty fast.
I’m going to break down the process so you can follow along. For the sake of example, I’m going to use the default Twenty Sixteen theme so you can see the project in action.
The first thing to do is head to the project page at GitHub and copy the contents of the
use-child-theme.php into a plain-text file.
Next, save the file directly into your theme directory using the filename
use-child-theme.php. Be careful to get the file name exactly right or you won’t get the child theme automagic you’re hoping for.
Finally, open up your theme’s
functions.php file and add this line of code to it:
require_once( trailingslashit( get_template_directory() ) . 'use-child-theme.php' );.
You can add the code anywhere in the file that isn’t commented out. I went ahead and added the code to the very top of the
functions.php file along with a comment explaining the bit of code.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
That’s it! If the modified theme is active, users will be prompted to create a child theme.
When a user activates a theme with the
use-child-theme active, they will be automatically prompted to create and activate a child theme.
After following the steps outlined above, I opened up the WordPress website with the modified Twenty Sixteen theme active, navigated to Appearance > Editor, and found a notification waiting for me.
After selecting Activate Now, the Twenty Sixteen Child theme was activated and after refreshing the page the child theme’s
style.css file was displayed in the Editor.
Observations and Conclusion
Adding this project to a theme is easy and it creates and activates a clean child theme consisting of
functions.php files with minimal difficulty.
It’s worth noting that my experience with the project was a little different than the screencast depiction. The screencast shows the notification to create the child theme appearing on Appearance > Themes page. However, I didn’t see it until I went to Appearance > Editor.
Hiding the notification until the Editor is accessed makes sense since theme users need to create and activate a child theme if they are going to modify the theme files. The code in the
use-child-theme.php file is consistent with my experience suggesting that the notification behavior has been changed since the screencast was created.
One recommendation I would make to the development team is to make one UX change to the activation process to avoid any unintended editing of parent theme files by inexperienced users. Here’s what had me worried: after selecting Activate Now I was greeted with a success message but the Twenty Sixteen parent theme files were still loaded in the Editor.
I can imagine a scenario where a user selects Activate Now and then goes on to edit the parent theme files thinking they are editing the child theme files. The transition from the parent theme to the child theme would be improved by either forcing the Editor to refresh and display the child theme files following activation of the child theme, or if that isn’t possible, users should be prompted by the success message to refresh the window prior to editing theme files.
I’m no theme developer and the process of using this project was easy enough that I may use it to create child themes moving forward. As such, it should be a breeze for any theme developer to automate child theme creation for their users by adding this project to their themes. Adding this functionality to themes would make it much easier for users to create and activate a child theme than any of the other typical methods for creating a child theme.
Theme developers: Have you added, or are your thinking about adding, this tool to your themes? Theme users: Is having the ability to automatically create a child theme with a single-click a useful feature? Let us know what you think in the comments below.