A couple of days ago I stumbled across a new plugin that I found interesting, not only because it makes easy to create a child theme but also because it helps a lot when customizing it. This plugin is Child Theme Configurator and is not actually new, it has been in the WordPress Plugin Directory since the end of last year.Child Theme Configurator is one such plugin helps to create and customize child themes in WordPress. In this article we will discuss step by step process of using Child Theme Configurator plugin.
First steps with the plugin
After installing and activating the plugin, we will find a new menu element under “Tools” in our admin area. Next you will add an admin menu Tools > Child Themes and you will get the following screen:
I intentionally opened the “Help” tab before I took that screenshot, so I could show you that some helpful documentation for this plugin is available right there from your admin area.
Besides that, the Child Theme Configurator screen shows several tabs or pages, the first of them being “Parent/Child”. Over there we can choose:
- The parent theme we´re going to use (logically the available options are all the themes we have installed in our site which are not child themes themselves).
- The name we want for the child theme to be created.
- The slug for the child theme (that is, the name of its folder under our “/themes/” folder).
- The author name we want to show for the child theme.
- The version number of the child theme.
After selecting the parent theme and entering the above information, we are ready to click the “Generate Child theme” button. The plugin will then create the appropriate folder and files.
You can see the stylesheet of your new child theme by opening the “View Child CSS” tab. Notice that the information header was created with the information you supplied and that the @import rule calling for the parent theme CSS is already present:
Child Theme Configurator also creates an empty functions.php for you, so you don´t have to care about that if you want to add your own functions. This functions.php file is not really completely empty because it includes an ABSPATH check which terminates the script if accessed outside of WordPress, which is a nice security feature. This is how this file looks like:
// Exit if accessed directly
if ( !defined(‘ABSPATH’)) exit;
/* Add custom functions below */
Let´s start having fun
Once our child theme has been created, we can start customizing it, and here is where Child Theme Configurator proves to be really helpful.
This plugin parses and indexes the parent theme’s stylesheet so that every media query, selector, rule and value are at your fingertips, then it shows you how each change you make will look before you commit it to the child Theme and, finally, it saves your work so that you can fine-tune your child theme.
For example, let´s say we wanted to increase the font size and the line height of the h4 headings of Twenty Fourteen. After creating the child theme, we can choose the h4 selector in the Query/Selector tab of the plugin. As soon as we start typing, the selector entry box populates with matches like this:
After h4 is selected, we can fill the new desired values, and the plugin will show us a preview of the changes:
As soon as the “Save” button is clicked, the plugin will automatically update the child theme´s stylesheet with the appropriate rules for our changes to work.
You can see the result of your changes even if a different theme is active in your site. All you have to do is go to “Themes”, once in the Theme Manager hover over your child theme (the plugin doesn´t create a screenshot yet) and click on its “Live Preview” button. I recommend you to open a new tab in your browser, so that you can work on your customization changes and have a look at their results at the same time.
I´ve found this plugin very handy, and there are more things you can do with it. They are all explained in the following video by LilaeaMedia, the creators of Child Theme Configurator. The video is a bit long, but it covers every aspect about how to use the plugin: