This is a copywriting sample of a how-to guide on something that I do very often: setting up a child theme in WordPress. How-to guides are for people and not search engines, so the main objective is to provide clear and concise information rather than keywords. It seems that in the last update Google has devalued how-to guides on websites whose main purpose is something other than being informational (e-commerce sites, for example), but they can still be incredibly useful for your customers or potential clients so they are worth having in my opinion.

If there is a question that you notice coming up a lot in emails or phone calls you get from your customers then that is always a good topic for a guide. You will reduce the number of inquiries that you get on the subject, and for the ones that you do receive instead of typing out the answer every time you can simply direct them to the guide on your website.


How to Create a Child Theme in WordPress

What is a child theme and why do I need one?

Often you will find a WordPress theme that is very close to what you want, but it needs a few tweaks. You might want to change some of the colours, remove some elements, maybe add in a feature that it doesn’t currently have. If you update the theme files directly, when there is an update for that theme your changes will be overwritten and you’ll have to make them all over again. WordPress does not recommend that you do this.

This is where child themes come in, you can set up a secondary theme that will inherit everything from the parent except for where you have specified changes. It’s actually fairly simple to do, and then you won’t have to worry about losing the custom changes you have made in the event of an update to the parent theme. If the steps outlined below seem a little too far outside of your wheelhouse, you can always hire a developer to do it for you. Depending on how many changes you need to the theme it should be a relatively small project and not too expensive.

Step 1: Create a new folder

The first step in setting up a child theme is to login to your site via FTP and create a new folder in the themes directory. If you don’t have your FTP login credentials then you will need to either find out what they are or create a new user. You will also need an FTP client. I like to use Filezilla, it’s a free program. If your web host has a ‘file manager’ of some kind in the hosting backend then you could use that as well but I prefer FTP.

The typical naming convention for the child theme folder is ‘parentname-child’. So for example in the screenshot below the parent theme is named ‘envo-magazine’ so I called my child theme ‘envo-child’. It must be placed in the WordPress themes folder, if you start from the root of your WordPress install you will click on the ‘wp-content’ folder and then ‘themes’.

wordpress child theme guide

Step 2: Create a Stylesheet

The next thing you will need to do is create a new stylesheet for your child theme, you don’t actually need to put any style rules in it yet, but you do need the following information for it to be properly established as a child theme. Open up a text editor and copy in the code below. For text editors I like Notepad++ for PC, and BBEdit for Mac, both are free.

/*
Theme Name: Envo Magazine Child
Theme URI: http://dealfly.org
description: >-
Envo Magazine Child Theme
Author: Lisa Noble
Author URI: http://lisa-noble.com
Template: envo-magazine
Version: 1.0.0
License: GNU General Public License v3
License URI: http://www.gnu.org/licenses/gpl.html
Tags: one-column, two-columns, full-width-template, right-sidebar, custom-background, custom-menu, custom-header, editor-style, featured-images, translation-ready, custom-logo, threaded-comments, footer-widgets, rtl-language-support, theme-options, news, blog, e-commerce
Text Domain: envo-child
*/

You must update the information to your own, WordPress does not allow for two themes to have the same details in their stylesheet header. You do need to include all of the lines, let’s go over each one:

  • Theme Name: This can be anything you want, this determines what WordPress will display as the name of the theme in the WordPress backend on the theme select screen. I typically just do the parent name plus ‘Child’.
  • Theme URI: I typically just put the URL of the website that theme will be used on. Really this is more for professional theme developers who may have a portfolio site or a whole website dedicated to showcasing a theme they have created.
  • Description: I keep this simple and just put the name of the theme again, but you are welcome to include more details.
  • Author: Your name goes here.
  • Author URI: If you have a website you can put that here. Otherwise just repeat the URL of the website you are using the theme on.
  • Template: This one is important! This must be the name of the folder for the parent theme or your child theme will not work. So in my case it is ‘envo-magazine’.
  • Version: I’m assuming that if you are looking at a how-to guide on setting up a child theme this is the first version of it so you can put 1.0.0.
  • License: Take a look at the style.css file in the parent theme and use the same information.
  • License URI: You should take this from the parent style.css file as well.
  • Tags: These are descriptive tags that people can use to search themes by. Here is a list of accepted tags.
  • Text Domain: The name of the folder that your child theme resides in, ‘envo-child’ in my case.

The stylesheet must be named ‘style.css’ and placed in the child theme folder. Once you’ve got that done we’ll move on to the second required file for your theme.

wordpress child theme guide

Step 3: Create functions.php

This is the last file that you will need to make your child theme work. Create a new file in your text editor and paste in the code below:


<?php
function my_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 ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

In the third line of code there you need to replace ‘parent-style’ with your parent themes name plus ‘-style’. For example in mine that line would read:

$parent_style = 'envo-magazine-style';

And for the line that says ‘child-style’ you need to replace that with the folder of your child theme plus ‘-style’. In my example it becomes:

wp_enqueue_style( 'envo-child-style',

Now save this file as ‘functions.php’ and upload it to the child theme directory.

wordpress child theme guide

Step 4: Activate the new Child Theme

Now when you navigate to the theme selection screen in the WordPress dashboard (go to Appearance -> Themes) you should see your child theme listed. It will not have a thumbnail yet, so it will not show an image of what the theme looks like.

Activate the theme and then take a look at the front end of your website, if everything was done correctly it should look exactly the same as the parent theme. If the website is just plain text and images that means that something was not set up correctly in either style.css or functions.php. Go back and check your code carefully for any typos or something that you may have missed.

Step 5: Make changes to the child theme

Now you can start adding CSS rules to your child’s style.css file, any rules that you add in your child stylesheet will override the ones in the parent.

You can also override any of the template files in the parent folder by including a file of the same name in the child folder. Let’s say for example you want to remove the featured image from single post pages. Download the single.php file (or whatever it is called in your parent theme) and make the changes you want to the code. Now upload the edited version to your child theme folder. The child themes single.php will now override the one in the parent folder so you should not see a featured image on single post pages anymore.

If you make a change and you are not seeing it after refreshing your page you may need to clear your browsers cache.

That’s it!

You have a theme that looks great and that you can make changes to without worry now. If you need further resources on CSS rules or basic PHP check out W3 Schools. Happy coding!