Creating a Child Theme in WordPress

Why Use a Child Theme

The theme is the part of WordPress that gives your site its look and feel.  While themes can be completely custom for your site, normally, you download a theme from a vendor.  That theme is a skeleton for the look and feel of your website.  They add some functionality as well, particularly, again, in the look and feel of the site.  Like much of your site, your theme is really a collection of files.  This becomes important because some of your customizations may involve editing those files.  It’s also important because, like plug-ins, themes are often updated to improve them and fix security holes.  This means that the author of your theme will edit those files.   This is where the problem happens.  If the theme author edits a file that you’ve changed to customize your website, then you will lose your customization when you update the theme.  So….you need to be careful about how you customize your theme.

Often, you will make changes to your stylesheet.css, which can change colors, heights, widths, and numerous other components.  If you need to add a function to the WordPress code, you can do that in the functions.php.  You can access these through customization settings in your administrator dashboard.  Some changes are more involved.  You might need to change the page template or customize an email template.  These changes involve editing or adding files directly within your theme.  The problem here is that when the developer updates the theme, your changes will be lost.  A child theme can fix that for you.

What is a Child Theme?

Simple WordPress HierarchyYour theme, in fact, WordPress, is a collection of files to give your site all of its look and functionality.  First, the system looks at the WordPress system, and then it looks to the themes and plug-ins to see if they override anything within WordPress.   Then, it looks to see if you have something called a child-theme and if there’s anything in there that overrides the parent theme.  So, if you have changed the template for the single page in the child theme, it will use that in place of what’s in the main theme, otherwise, it uses the template in the main theme.  One important point as a result of this is that the child theme does not work without a functioning parent theme.  Otherwise, it would have to be a theme. A broken or missing parent theme will also break the child theme.

Incidentally, all this searching around makes WordPress really powerful but is also part of why too many plug-ins or the theme design can slow your site down.

Child themes let you make changes that you need to customize your site without damaging the main theme or having your changes undone every time there’s a theme update.  It can be very powerful.  Some examples of where you might use this are to create a special page template (e.g. like creating a landing page template that hides the menu bar or changing the width of a page.)  This does require directly editing files.  We’re going to show you how to set-up a child theme, but we’re not going to show you in this post how to change templates or make other changes directly.  We may do more of that later.

When Should You Use a Child Theme

If you are making minor changes, such as minor CSS changes or minor function changes then using the parent theme is fine.  Basically, if you can make the changes in the theme editor or customization, then you can stick with the parent theme.   These are generally things like font or color changes or maybe a small resizing.

Otherwise, you need to start thinking about a child theme.  If you want to change the design of pages or large-scale changes then you need to work on a child theme (or have a developer do it.)

Creating Your Child Theme

This involves editing the file structure of WordPress itself.  To do that, you’ll need to be able to look at the files.   CPanel allows this or you can use a File Transfer Protocol (FTP) program like the free program FileZilla.  To avoid weighing this down with a discussion of FTP applications, we’ll stick with the File Manager in C-Panel.  Either way, be very careful you can completely ruin your site if you accidentally delete something.

Log into your CPanel on your host and find the File Manager.

C-Panel File ManagerClick on that and it will open a list of all the files on your host.  This will show a list of files and directories.  Look for a directory that either looks like your URL or that says something like public_html.  Double click on the directory.

 

File Manager List

Then you’ll see a directory that looks something like this.  Enter the wp-content directory and then again into the themes directory.  You should see a directory for each of your themes.  For this, we’re going to be using a generic Twenty Twenty theme.  This works with just about any theme (some themes ship with a child theme set-up already.)

WordPress Directory

Now you need to create a folder for your child theme.  Most people use [parent-theme]-child. Not very creative but it makes it clear what you’ve built.  No matter what you name it, don’t add any spaces to the directory name.  That will cause you problems.  To do this in the File Manager, there is a + Folder button on the upper left.  Press that and give your directory a theme.  So, now we have created the twentytwenty-child directory.

 

Child Theme in Directory

 

Now we are going to create a couple of files.  These set the stage with WordPress that you have a child theme.  The first file is called a stylesheet.  It’s used to give your site its design elements.  This is how things like fonts, colors, sizes of elements, and many other things are set.  If you’ve ever loaded a fancy website and saw a jumble of text, you’ve seen a site where the stylesheets didn’t load.

In the upper lefthand corner again, next to the folder button is a + file button.  Press that and name the file style.css  You should now see it in the directory.

Right-click on the style.css file and select edit.  This will open a text editor in a new window.

Child Theme Code in File Editor

Copy and paste the code below into the file and then save it.


/*
Theme Name: Twenty Twenty Child
Theme URI: http://www.yourdomain.com/twenty-fifteen-child/
description: >- Twenty Twenty Child Theme
Author: Anadar Professional Services LLC
Author URI: http://www.yourdomain.com
Template: twentytwenty
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
Text Domain: twenty-twenty-child
*/

What’s All This Stuff Mean?

Some of this, you don’t need but many developers include it.

  • Theme Name – This is really important and is what you will see in your administrative panel.  Usually, most people just name it the same name as the main theme and add “- Child” to it, or something similar.
  • Theme URI – This is the URL of the developer, but you can use your URL here.  You need it there.
  • Description – This is what will show up in the theme menu when you look at theme details.  You might want to give yourself some information to remember what you did.
  • Author – This is you.
  • Author URI – You can use your URL here, or anything you want, but take credit for your work!
  • Template – Okay, this is really important.  This needs to have the name of the parent theme, but use the folder name you see when you look at FTP.  This tells WordPress where to look for other parts of the theme.  If your theme is broken when you turn it on (meaning your site completely changes its look) then check here.
  • License URI – The license is the legal stuff and says if the theme is free for anyone or what have you.  You can leave this or just copy what your main theme has.  It’s not too critical as long as you don’t violate the license of your original theme.
  • Tags – Can help you find your theme in WordPress if you have a bunch installed.  Make sure they are relevant.
  • Text domain– This is used to make your theme translatable, but stick with the “slug” of your original theme.  It’s easiest.

Okay, save your work.  Go back in and follow the same instructions to add a file called functions.php  This is code that is called by the theme.  We need to add a little bit of code in there.

<?php 

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

?>

This loads the parent theme styles.

Then, go back into WordPress in the admin area and pick your child theme.  It won’t have a picture.  We could add one and maybe we’ll look at that later but for now, this will work just fine. Enjoy!

17279

Stay Up on WordPress

We send out periodic updates on WordPress hints and tips, security practices and deals.  Sign up now and we'll give you a special gift.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top