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:

  1. Providing a documentation page with step-by-step instructions on setting up a child theme
  2. Providing a downloadable child theme zip file, which users can upload using the built-in theme uploader
  3. 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:

  1. Add the use-child-theme.php file to your theme directory
  2. Add the line require_once( trailingslashit( get_template_directory() ) . 'use-child-theme.php' ); to your theme’s functions.php file

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.

the use child themes file is available at github
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.

save the file with the correct title
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' );.

just copy and past the code into the function dot php file
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.

User Experience

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.

a notification appears to encourage users to activate a child theme

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.

the child theme is activated

Observations and Conclusion

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 code does limit the display of the notification to the editor
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.

the child theme has been activated but the parent theme is still selected
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.