In our previous article we have explained the manual way of creating child theme in WordPress. If you feel exhausted with all those manual steps – don’t worry, you are not alone. Especially customizing the parent theme by finding out individual CSS classes from parent style.css is more technical for a WordPress beginner. Fortunately there are many useful plugins out there to make the entire process easy at the same time allowing you to customize further. 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.
Why Child Theme Configurator Plugin?
We tried multiple plugins for creating a child theme and recommend Child Theme Configurator for the following reasons:
- Plugin is updated and supported continuously.
- Good user reviews with more than 70k active installs.
- Very easy to use interface.
- Good documentation available inside admin dashboard.
- One click child theme creation.
- Easy to customize CSS and modify template files.
Finally it is free with all these options!!! There are premium extensions available but we believe for a beginner the free version is sufficient to create and customize child theme.
How to Create Child Theme with this Plugin?
Navigate to “Plugins > Add New” and search for “Child Theme” to find the “Child Theme Configurator” plugin. Install and activate the plugin; it will add an admin menu “Tools > Child Themes” in WordPress admin dashboard. Clicking on the “Child Themes” menu will show you the options like below:
By default there will be only one action initially “Create a new child theme” and the active theme of your site will be selected as a parent theme. You can choose the parent theme (in our example we use twentysixteen) from the dropdown and click on “Analyze” button to get the dependencies and other issues.
You will be shown a success message along with further options (from 4 to 9) loaded which can be customized as per your need.
Name the New Theme Directory
The plugin will automatically create the child theme’s directory name by appending “-child” to parent theme’s name. In our example, it is “twentysixteen-child” and we leave it as it is. You can give any name if you want to change the directory name of your child theme. Note this is not the name of the child theme; this is the directory in which the child theme will be stored. The plugin will create this directory under “wp-content” folder as “/wp-content/twentysixteen-child/”.
Select Where to Save New Styles
The plugin offers two options for saving the style sheet of child theme. If you have no existing child theme, choose primary stylesheet option to create a style.css file under your child theme’s directory. In case if you have existing child theme directory then the plugin will replace the existing style.css file with the new style.css generated.
In case if you don’t want to over write existing child theme styles then choose separate stylesheet option to use this stylesheet in addition to existing child theme’s stylesheet.
Select Parent Theme Stylesheet Handling
The recommended method is to choose the option “use the WordPress style queue” to use functions.php file of your child theme to enqueue parent theme style to child theme. You can also use the option “Use @import” to import parent theme’s style.css to child theme’s style.css (this is not recommended).
In case if you don’t want to use parent theme’s style then choose “do not add any parent stylesheet handling” option. If you are using theme framework like Genesis then choose “Ignore parent theme stylesheets” option.
Customize Child Theme Name, Description, author, Version, etc.
Under this section define the required details like name for your child theme, description, author name, etc.
Here is the place where you can provide the actual name for child theme which will appear under “Appearance > Themes” for activating it later.
SEO Offer: Optimize your site with Semrush Pro special 14 days free trial.
Copy Menus, Widgets and Other Customizer Settings from Parent Theme to Child Theme:
One of the real issues when creating a manual child theme is that the parent theme specific items like menus, widgets, options, background, etc. will disappear on child theme. Child Theme Configurator plugin helps to overcome this issue smartly by allowing copying those items from parent theme. Check this option to retain the menus, widgets and theme settings of your parent theme on child theme also.
After choosing all required customizations click on the “Create New Child Theme” button. You will see a success message as below with many other additional tabs.
Style.css is the only file required for your child theme when you have chosen @import method. If you have chosen the recommended enqueuing method there will be two files style.css and functions.php. Similar to manual modifications, plenty of things can be done with the Child Theme Configurator plugin.
Editing Template Files
All modifiable template files will be listed under the “Files” tab. While functions.php file will be available under child theme files by default you can copy other template files to your child theme for modification. Some of the available template files that can be modified are 404.php, archive.php, page.php, single.php, header.php, etc.
Select the file under “Child Theme Files” section and edit it using the default WordPress theme editor. You also have the following options under “Files” tab:
- Upload custom theme images to be used in stylesheet. The images uploaded will be listed on the same page which can be selected and deleted.
Theme images are stored under “/twentysixteen-child/images/” folder and can be used only within the child theme’s stylesheet. All other images uploaded on the post/page will be available under media library.
- Upload a custom screenshot for child theme which can be seen under “Appearance > Themes”.
- Export zip archive of the complete child theme for local storage.
One of the mistakes users do during manual child theme creation process is not taking care of the directory structure. The plugin does very good job by doing this automatically when copying files like “/template-parts/content.php”. It automatically creates the same structure under the child theme like “twentysixteen-child/template-parts/content.php” and ensure the functioning of that template from child theme.
Finding CSS property and selector is a main problem when using manual child themes and Child Theme Configurator plugin helps to overcome this issue easily. There are two tabs “Query/Selector” and “Property/Value” that can be used to identify the required style from parent theme and modify it.
The “Query/Selector” tab helps to find a specific selector for any @media query and modify it. For example if you want to change the background color of the body of your parent theme then leave the “@media Query” field as it is like “base” and enter “body” for selector. You will see all property values for the body and click on the body to view the screen as shown below:
Here you can modify the background color (and any other value like margin, padding, etc.) and save it as a child theme values.
Similar to “Query/Selector” you can use “Property/Value” to modify the parent CSS. For example, enter “background” on the property value and choose “background-color” from the dropdown to modify the background color of the complete site.
Viewing Parent/Child Theme’s Stylesheets
The “Baseline Styles” and “Child Styles” tabs show the corresponding stylesheets from parent and child themes respectively.
Importing Custom Fonts
You can import any web fonts like Google fonts under “Web Fonts” tab with @import query.
Finally you can delete, duplicate and analyze the child theme under “Parent/Child” tab. These options will only shown once you have a valid child theme created using this plugin.
Activating Child Theme
The newly created child theme can be seen on WordPress admin dashboard under “Appearance > Themes”. It is highly recommended to preview the site with the child theme before activating to check everything is fine as you expected.
The “Debug” option available on top right corner when enabled shows the activities at bottom of the page. This can be used for troubleshooting in case if you face any issues while creating the child theme. Click on the “Help” button to view extremely useful documentation right from the admin dashboard.
I have totally messed up a website trying to install a child theme. This is a fantastic walk-through and tutorial and now that I feel better armed with your walk-through, I feel much more comfortable giving it another shot.
Thanks for reading, please try and let us know your experience.