.:: *This page may include affiliate links. At no additional cost to you, we may receive a commission if you click through and choose to make a purchase. ::.
Concern:
How to make custom edits to theme pages, CSS sheets, add custom functions, and save site customize settings…. without changing the core theme files and protecting changes from future theme updates.
Solution:
Child Themes. These are themes that are dependent on their parent theme to operate and are not stand-alone themes. They contain only the theme files that have been changed or customized. Google child themes if you need more information on what they are, how they work and why you might want one.
For this tutorial we choose the Child Theme Configurator plugin because it’s popular, it’s free version has everything we need, and it is actively updated at the writing of this blog post.
– – – –
Disclaimer: This post is intended as a resource for a professional or someone with existing knowledge on how to install wordpress plugins and edit themes. Use this information at your own risk. Please be careful as any errors in your theme files can corrupt your website.
How to find and install the plugin:
wp-admin -> plugins -> new plugin button -> search for “Child Theme Configurator” -> install button -> activate button
How to find the child theme settings:
wp-admin -> tools -> child themes
Reminder: Backup before you begin.
It’s alway a good idea to make a complete backup of your database and wordpress files before making any change to your website. Particularly wordpress updates, plugin updates, theme update and changes, after adding important content, and just as a regularly scheduled safety precaution. Use a backup plugin to do this every time you do development work on your website. We like the “UpdraftPlus Backups*” plugin because the basic version is free, robust and easy to use, but there are several options. If your host offers staging, that is also recommended.
Setting up a new child theme:
1) Use the default “CREATE a new Child Theme”
2) Choose the parent theme you wish to use. If you have multiple themes installed, choose the parent theme that you want to use as your base theme. In my example, it’s a theme called Divi.
3) Click the Analyze button. This is a safety step to make sure that your parent theme is compatible with the typical use of child themes.
4) Here you are naming the directory where the theme will live on your server, usually at YOURWEBSITE/wp-content/themes.
I like to specifically name the child theme directory with easy to understand details about what it contains, for example with the website/brand, the name of the parent theme, and then child. The resulting theme directory might be “HTB-Ptheme-Child”. The naming of the actual child theme will come later in step 8, here we are just naming the theme directory (folder) on the server.
5) Choose the default: “Primary Stylesheet (style.css) Save new custom styles directly to the Child Theme primary stylesheet, replacing the existing values. The primary stylesheet will load in the order set by the theme.”
6) Use the default “Use the WordPress style queue” (most of us), unless you need the other options.
7) Click the “Show/Hide Child Theme Attributes” button.
The info fields are self explanatory. They will be autofilled with the parent theme’s info but you have the opportunity to make changes.
Child Theme Name: Here I like to specifically name the child theme with the website/brand and then the name of the parent theme + child. For example, on this site I might choose a theme name of “HTB Ptheme Child”, where the website the child them is being used on is HearTellBranding.com, the parent theme is ParentTheme, and then Child to indicate that this is a child theme in use.
Sidenote: There can be a fine line between documenting so that a site is easy to understand and security/privacy where you prefer not to share what development platform or theme you are using. This is a personal decision and in this case I’m choosing clarity and ease of use.
8) “Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme:”
Check this box the first time you are creating a child theme. If you’ve been using your parent theme with customizations such as Menus, Widgets and WP Customizer, this will transfer those customizations into the child theme. This creates a separation between your parent themes code and the customizations created with the child theme. This can be very useful for preserving custom theme edits, so they are not overwritten accidentally by parent theme updates, etc. Don’t use this on an existing child theme, or you will overwrite all of your child theme customizations.
Click “Create New Child Theme Button”
The page will refresh and you’ll see a notification at the top of the page saying “Thank you for installing Child Theme Configurator.” with an additional suggestion that you “save a Zip Archive of your Child Theme before using CTC for the first time. Click the “save backup” link ( see Step 2, below ) to export your themes.” This goes back to my statement above. Always create a backup of your data before making changes, especially wordpress updates, plugin updates, theme update and changes, after adding important content, and just as a regularly scheduled safety precaution.
If you scroll down the page, you’ll see that there are new options in section 1 and that “CONFIGURE an existing Child Theme” is now selected for the theme you just create. Section 2 will have a link in blue, directly under the section title that says “Click here to save a backup of the selected theme.”
How to Activate your Child Theme
wp-admin -> Appearance -> Themes
You should see your current Parent Theme listed first and marked as “Active: THEME-NAME”.
Find the theme box for your newly created child theme and Click the “Live Preview” button for your child theme. This will show you your homepage inside of wp’s “Customize” framework. At this point there should not be any noticable differences between your child theme and your parent theme. (If anything looks off or different, something may have gone wrong in the child theme creation process and you should troubleshoot, which is beyond the scope of this quick tutorial. Hit the “x” box at the top left of the customize box to exit without saving.) If everything looks good, click on the “Activate & Publish” button to go live with your child theme. Click the “x” button to exit the Customize framework. Congratulations, you have an active child theme!
You can now begin making changes to your child theme settings if desired. This is also a great time to do a fresh manual backup of your website using “UpdraftPlus Backups*” plugin or your preferred backup service.