What is a Child Theme in WordPress?
A Child Theme is an extension of your parent theme that allows you to customize and modify your theme, so that when the Parent Theme is updated, your Child Theme modifications remain in place.
Who would use a Child Theme?
Anyone who would want to make customizations or modifications to their theme files – do you want to add the Google Analytics code to the header and not lose it each time the theme updates? That is just one really small reason to add a Child Theme.
Another example would be from our other blog, we wanted to set the blog title to “h2” and our blog post’s titles to “h1” for SEO, so we needed to modify the header and single post templates of our theme to accomplish this and using the Child Theme allows us to maintain those changes, when our theme updates.
Mainly you can make the modifications to your theme without adding extra plugins to make each of the modifications for you. What’s more, additional plugins may slow down your site or conflict with one another and cause problems, so it is recommended to only use the plugins that you really need.
As a side note, let me know in the comments how easy or difficult you find this tutorial and if it was useful to you. Include Any steps you needed to modify as it may help other readers.
How do you setup a Child Theme?
Option 1: using a plugin
Pros:
This method is easy to do.
You can disable the plugin after the Child Theme is created, so it will not affect site load time.
Cons:
You may need to temporarily disable some plugins for the Child Theme Configurator to work.
I have used the plugin Child Theme Configurator to create Child Themes on most of my sites.
Child Theme Configurator is feature rich, and yet easy enough for the beginner to use.
They provide a fair amount of “how to” information on using their plugin.
You can use this method at any point before or after starting your blog to add the child theme, but it is best when you are first setting up your website/theme.
Note:
Always backup your website before you make new changes to your website
If you don’t already have a backup method, check out the free plugin Updraft Plus
Make sure to live preview your Child Theme before activating.
I have had only 1 Child Theme not work out of the several that I have generated through the Child Theme Configurator plugin.
So let’s get started.
- Login to WordPress
- Go to your Plugins menu and click to add a new Plugin.
- Search for “Child Theme Configurator” to install and activate.
- In my case, I had to temporarily disable a couple plugins for Child Theme Configurator to work
- Go to Tools on the menu and select “Child Theme”
- Select your “new” Child Theme, and select your theme from the drop down box.
- Analyze the Parent Theme:
- Most settings are fine at their defaults for most themes.
- For the first time generating the Child Theme, Checkmark to copy over the menus, widgets and other items from the Parent Theme to the Child Theme.
- Click to configure the Child Theme.
– My image lazy loader
– My minify plugin
Option 2: Build the Child Theme Manually
Pros:
This is more of a learning experience, of the WordPress file structure and a little bit of how it works.
No need to disable any currently installed plugins
Cons:
Much more difficult
You may break your website if you are not careful
First, you will need to login to your cPanel or FTP site on your host. You may also be able to do this from the WordPress file editor, however, on our sites this is disabled by our security settings.
The instructions contain examples from the Bluehost cPanel.
- Login to your Bluehost account
- Click Advanced
- Select the File Manager
- Navigate to your wordpress install theme folder This is the location of the default install folder, yours may be slightly different. "public_html/wp-content/themes/"
- Create a new folder and name it “theme”-child
- Create the following files in your folder
- Copy the theme Screenshot.png file into the Child Theme folder
- Edit the style.css file
- Edit the functions.php file
For this example it is twentynineteen-child
– Click the “Folder +” menu item
– style.css
– functions.php
Click the “+File” menu item, then name your file.
– Navigate to the Parent Theme folder
– Right click on screenshot.png and click copy
Before:
– Add “-child” to the theme name, click “copy files”
After:
So you will now have these 3 files in your Child Theme folder:
– right-click and select “edit” this is the code for the Twenty NineTeen Child Theme style.css file.
Modify to suit your theme.
/*
Theme Name: Twenty Nineteen Child
Theme URI: https://github.com/WordPress/twentynineteen
Template: twentynineteen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Requires at least: WordPress 4.9.6
Version: 1.2
Updated: 2019-01-25 21:14:29
*/
Make sure to save your changes to the file.
Here is sample code for the Child Theme Functions.php. If you are going to modify the Functions.php file, enter your custom code under this part.
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
//Enqueue Child Theme Style
add_action( 'wp_enqueue_scripts', 'enqueue_parent_css', 10 );
function enqueue_parent_css() {
wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css', array( ) );
}
//End of Child Theme Style
Again, make sure to save your changes.
Test your Child Theme
No matter which option you chose to create your Child Theme, you will want to test and confirm that it appears as you like before activating it.
Login to your WordPress
Go to Appearance, click on the “customize” menu item
Once the Customizer loads, click the button by the theme name to change themes.
Select your Child Theme
Confirm it looks exactly like or very similar to the parent theme as we have not made any changes yet. If so, you can activate & publish the Child Theme.
Twenty NineTeen Parent Theme
Twenty NineTeen Child Theme
If the Child Theme does not look like the Parent Theme and does not look appealing to you, exit the previewer. Do not publish and activate. From this point, if you used the Child Theme Configurator I would seek their support, or as mentioned previously you can check out my services to schedule a time for me to assist you.
REMEMBER if you change themes at some point, any changes made to your theme (or Child Theme) now, will need to be re-applied to the new theme (or new Child Theme), like if you add the Google Analytics code to your header file.
If you would like to see a post on adding the Google Analytics code to the header file of your Child Theme, see this post: Add Google Analytics Code to your Child Theme Header
