Creating a child theme in WordPress requires getting into some code, but it doesn’t have to be scary! The benefits far outweigh the fear, so trust me: you’ll conquer the WordPress child theme.
Note: If your theme was custom designed by someone else, it may already be a child theme, and if not, they may have named the files something different. If you aren’t sure which files need to be inherited, do a little sleuthing or ask for help in the Google Analytics 101 Facebook group.
Finding the folder for your child theme
First off, you will want to log into your hosting cPanel. Now you will want to look for your File Manager. Since the location varies depending on your hosting company, you may want to look in their support documents if you don’t know where it is.
Once you’re in your file manager, you’ll probably see a screen with a menu that looks something like this:
Click on the public_html folder. In the public_html folder, you’ll want to find your WordPress folders:
The wp_content folder has the next folder you want, which is themes. Click on themes to open the folder. Within the themes folder, you’ll be creating a NEW folder for your child theme. As you can see in the picture below, I’ve already created the child theme for Divi, which is the theme we use for The CE L.A.B.
You will want to create a folder that is the same as your parent theme’s name (e.g. Divi), with “-child” tacked on at the end (e.g. Divi-child).
It will vary based on your host as to where your New File/Folder buttons are. In my case, it is in the top left corner of the File Manager menu and they look like this:
Now you’ll go into your new child folder and create two new files. One will be named style.css and the other will be named functions.php. This is where we’ll start coding but don’t worry! It’s all copy-paste along with replacing a couple of words.
Adding the child theme code
First, open up style.css. You’ll copy and paste the following style header code in:
/*
Theme Name: Your Parent Theme Name Child
Theme URI: http://yourdomainhere.com/your-parent-theme/
Description: Your Parent Theme Name Child Theme
Author: Your Name
Author URI: http://yourdomainhere.com(or.co or whatever)
Template: yourparentthemefoldername
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready (these aren’t really necessary, but you can copy them if you want to)
Text Domain: your-parent-theme-child
*/
Replace everything in bold-italics with your own info. You can pretty much copy-paste from your parent theme’s style.css file. (You can find this back in the themes folder.) Make sure that the Template line corresponds to your parent theme!
This is all you need to put in the style.css sheet for now, but the functions.php file is going to need to pull all of the code from the parent files for you.
So! Now we need to open up that blank functions.php file that you made a minute ago. Paste in this code:
<?phpfunction theme_enqueue_styles() { $parent_style = ‘parent-style’; wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ ); wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( $parent_style ) );}add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );?>
The only thing that might need to be changed is the code that I highlighted in bold-underline. Most themes will use the file name style.css, but if it was created by a designer, they may have named it something different. If the file is indeed style.css, just paste the code above and you’re all set!
Activate your new WordPress child theme!
Once you’ve saved both the style.css and functions.php files, you can activate your child theme. Go into your WordPress dashboard and go to Appearance → Themes:
You’ll see a theme that looks something like this:
I know it looks plain and boring, but trust me – it’ll look exactly the same as your original theme! Click Activate (it’ll appear when you hover over the theme).
This will activate your child theme – woohoo! Since it’s pulling everything from the parent theme, your website should look the same as before. I still recommend checking your site to make sure everything changed correctly, just in case.
That’s it! You’re done. You can now modify your child theme style.css and functions.php files without worrying about losing your changes when your theme updates. You can also create a site-specific plugin if you want to use that instead of your functions.php file, which means that if you switch themes, those functions will come along, without any need for further transfer. Check out the other bonus tutorial for creating a site-specific plugin (which isn’t any harder than creating a child theme), which is the next lesson in this course!
This post is part of the Conquer Your Business Analytics bonus material. To find out how Google Analytics can help you grow your business, click here!
