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.
Method one is OK, method two is better, and method three is just plain lazy (but thanks for the extra traffic!).
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.
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.
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.
Don't download the entire project. All you need is the use-child-theme.php 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.
Make sure you save the file in the theme directory.
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' );.
Add the code anywhere that isn't commented out. I added it at the very top with an explanatory comment.
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.
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.
Adding this project to a theme is easy and it creates and activates a clean child theme consisting of styles.css and 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.
The current code does limit the notification to the Editor.
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.
Note the success message, yet the parent theme is still selected within 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.
Definitely a good thing !
Providing a way to create child theme easily would avoid a lot of trouble for average users who don't know that they should create child themes.
Thansk for this article, and the dev for this function !
How about just using Child Theme Configurator plugin at the WordPress depository?
Works easily for me. No coding required.
There seems to be multiple issues using this configurator with Upfront..
You using it OK ?
Hi Uber – I should have mentioned in the post that this tool probably won't work with any theme framework (Upfront, Genesis, Canvas, etc). It's designed to work with stand-alone themes.
It even provides warnings when attempting to create a child theme for a parent that uses unusual coding techniques.
It does not provide user prompting like the project in the article but it seems to be a robust child theme creation solution.
That's the one I mentioned above… Works for me, too.
This article's solution does not function on a multi-site network..
site.org is currently unable to handle this request.
After enabling this inside spirit, and activating Spirit.
Hi Uber – I don't think the issue with with multisite. I haven't tried it myself on multisite, but it should work. The issue is that Spirit is effectively already a child theme of the Upfront framework.
You are right, I basically copied Spirit, brought it local, made my changes and used it for my main site.
Good article! I've previously used the plug-in 'One-Click Child Theme', super simple to use and it has worked well with the themes I've used. Haven't tried to use it on a theme fremwork.
always used that plugin, will try this new approach.
I've used "Child Theme Configurator" with stand alone themes very successfully as well and it's usually my go to plugin for child themes. I've also used "One-Click Child Theme" successfully as well. Both are in the WordPress repository which I prefer to use because they do some limited vetting of the themes and plugins they accept in.
And, I've found child theme configurator to work on multi-site installs, too.