Finally, a child theme creation plugin that does it right! In past posts, I’ve taught you how to manually create a child theme and install it using FTP (file transfer protocol). Until now, this was my only option for helping people with child themes.
What is a Child Theme – Review
The theme of your WordPress website manages the style and layout of your website this includes colors, where widgets are located, and menus. Sometimes, you need to make changes to a theme for example, change the file that controls what information appears in the footer, or customize a 404 page. The challenge is that if you do this, you will lose your changes when you update the theme. A child theme is a partial theme that adopts the styles and files of the original theme (the parent theme). This allows you to copy specific files into the child theme, make changes to those, and then keep the changes when the parent theme is updated.
For a more detailed explanation of Child Themes visit https://whiteglovewebtraining.com/what-is-a-wordpress-child-theme/
Introduction to the WordPress Child Theme Configurator Plugin
Now, the WordPress plugin, Child Theme Configurator, by Lilaea Media, is available to help you create a child theme without the need for file editing software or FTP.
Child Theme Configurator is not the first WordPress plugin to create child themes. It is, however, the first one I’ve found that uses the appropriate method to create a child theme. It uses the enqueue method to bring in the stylesheet in the functions.php file instead of using @import in the style.css file. For more information on the best practices for creating a child theme see How to Create a WordPress Child Theme and the WordPress Codex article on Child Themes- https://codex.wordpress.org/Child_Themes
Note that some parent themes are not written to allow child themes, or have special configurations that may not work with the plugin.
Getting Started with Child Theme Configurator
From WordPress Dashboard, install and Activate Child Theme Configurator.
Once activated, the Dashboard > Tools menu displays the option Child Themes. Select this.
Create Your Child Theme
This takes you to the initial Parent/Child dialogue where you create your child theme.
By default, the currently Activated Theme is the theme set to be the parent. You may change this using the dropdown option, if needed.
By default, the child theme name is created as “parentname-child.” So in this case, I’m using the Divi theme by Elegant Themes, as the parent, so the child theme is set to Divi-child. This parentname-child is the standard naming convention for child themes, but you may change it, if desired.
You may select to copy parent theme menus, widgets and customizer options. If you have already made changes to the theme menus, and widgets, and customizer options, you may select to include those. Note that if you have already created a child theme with these items and you are rebuilding files, you will overwrite your original changes. If you are using the Divi theme like I am and have created custom widget areas, you will need to select this option.
By default, the child theme creator copies all of the stylesheets for the theme. It is possible to select those that won’t be changed and have them not selected. When you’re just getting started, I don’t recommend this. If later your site is having any performance issues and you want to dig through, you can.
Click on the button Generate/Rebuild Child Theme files to create your child theme.
At this point, you have created a child theme with the two required files styles.css and functions.php.
Notice that several configuration tabs now appear. The free version of this plugin has several fairly advanced options for creating and configuring child themes. There is also a Pro version with more developer functionality.
The Second Tab is the Query/Selector feature.
This allows you to look for a CSS Selector setting within the parent theme and then configure that for the child theme. For example, you might want to change the font face or font size on h1 (header 1). If you are just starting with child themes, this may be a more complicated configuration area. Note that some themes will need extra steps taken to access their stylesheets because they are not using the standard style.css file.
The Third Tab is the Property/Value feature.
Like the Query/Selector feature, this may not be the first option for editing a child theme if you are a beginner. It allows you to select a specific value for a given property and then edit that value.
The Child CSS and Parent CSS Tabs
The Child CSS tab displays the Child Theme style.css and the Parent CSS tab displays the Parent Theme style.css. Note that some themes actually call other stylesheets instead of placing the CSS in the Parent style.css file.
Web Fonts Tab
The Web Fonts tab allows you to import additional stylesheets and also web fonts to be used in your child theme. Do not use this for the main parent stylesheet, only for additional stylesheets, if needed.
The Files Tab
The files tab allows you to copy files from the parent theme into the child theme which can then be edited, as desired. This is an option I use frequently. When using the Divi theme, I always change the footer.php to reflect my copyright information and for most themes, I tweak the 404 Page to be a conversion tool not just a page that reads, “Sorry We Didn’t Find What You Were Looking For.”
This tab also allows you to upload a Screenshot image for your child theme, if desired. This is the image that will appear with the child theme under the Dashboard Appearance > Themes area.
To export your child theme for use in other WordPress installations, select the Export button. Remember, although you can export and then import this into another installation, the parent theme will still need to reside within that installation in order for the theme to work.
Child themes are very important if you need to make changes to your theme’s underlying files like the footer.php file. Without a child theme, your changes will be lost when the theme is updated.
Although much of the content of this post is for intermediate WordPress users, basic child theme creation and changing of files can be completed by beginners. In the next post, I’ll demonstrate how to use the Child Theme Configurator plugin to create a Divi child theme and change the footer to reflect my copyright information.