Creating Child Themes and When You Should Use Them

A child theme in WordPress is small, light-weight “add-on” theme that inherits all the styling and functionality of another theme, called the “parent theme” in this case. You can create a child theme for any theme in WordPress.

Child themes are used when you want to make changes to a site without actually changing the code or the files in your original theme. This lets you update your original theme (which is the engine behind the child theme) without losing any changes you made to your site.

In this post we’ll go over how to create a child theme and also give a rundown of 5 common scenarios for when you’d want to use a child theme.

Is your WordPress theme not working how you want it? WPZOOM themes are easily customizable, well supported and responsive. Switch to a WordPress theme that works.

How to Create a Child Theme

There are two basic ways to create a child theme. You can do it with a plugin, or you can do it manually.

There are a number of plugins out there these days that will help you create a child theme. I’ve found the Child Theme Configurator plugin to work well.

If you would like to create a child theme manually, then follow the instructions below.

Manual Child Theme Creation – 5 Steps

1. Create a Folder on Your Computer

The first thing to do is to create a folder on your computer for your child theme. In my example, I will be using WPZOOM’s Prologue Theme as my parent theme, so I will name my folder prologue-child.

2. Create a Style Sheet

Next, open up a regular text file (Notepad in Windows or TextEdit in Mac) and put the following in the top of it (changing the names to be appropriate for your parent and child themes, of course):

/*
 Theme Name: Prologue Child Theme
 Template: prologue
 */

Save that file in your child theme folder with the name style.css.

You can also go ahead and add some CSS code into this file if you know what you want to add.

(Note: The top of the style sheet can have a lot more information in it if you like, but it’s not necessary. We’ll go over that at the end.)

3. Create a functions.php File

Next, open up a new text file, and place the following code in the top of it:

<?php
 add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
 function enqueue_parent_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri().'https://b8f4g5a7.rocketcdn.me/style.css' );
 }

Save that file into your child theme folder with the name functions.php.

IMPORTANT: For Windows users, you must save the file using quotation marks (“functions.php”). If you don’t, your file will be saved as a regular text file instead of the required PHP file.

You should now have two files in your child theme folder: your style sheet file and your functions file.

4. Zip Your Child Theme Folder

Next, zip up your child theme folder in whatever way you do that on your computer, maybe by right-clicking and finding an option for that or by using a program of some sort.

Once you’ve done that, you should now have a zipped and an unzipped copy of your child theme.

5. Upload Zipped Folder to Site

Next, upload the zipped copy of your child theme to your site and activate it as you would any other theme.

Screenshots

You can also add a screenshot for your child theme. WordPress recommends making it 880×660 px in order to be viewed well at high definition displays. That said, it will only be displayed at 387×290.

Make your screenshot, save it as screenshot.jpg or screenshot.png, and place it into the main folder of your child theme.

If Your Child Theme Doesn’t Work

If your child theme doesn’t work, try adding the following line of code to your style sheet file just below the header information. Notice the name of the parent theme in there (“prologue”) that you will need to change to YOUR parent theme.

@import url("../prologue/style.css")

If that still doesn’t work, then also remove the code from the functions file.

If you’re still having problems, contact the theme author of your parent theme.

More Info in Header of Style Sheet

As mentioned before, you can have a lot more information at the top of your style sheet if you like. However, it is not necessary.

Below is an example of the different types of info you can put in the header area if you like.

/*
Theme Name:   Prologue Child
Theme URI:    http://example.com/prologue-child/
Description:  Prologue Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     prologue
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:  prologue-child
*/

5 Excellent Uses for a Child Theme

As mentioned before, you can use a child theme when you need to change your theme’s files.

Below we’ll go over 5 common scenarios when using a child theme is an excellent idea.

1. When Changing Your Site’s Style

Perhaps the most common use of a child theme is when you change your theme’s style in some way.

For example, let’s say I have an image in a post that I want more padding around for some reason. I can add CSS for that to my child’s style sheet.

Here’s an example. This is the original image.

And here’s the image with more padding to the right and to the bottom of the image.

I did that by finding the relevant attachment and putting the following in my child’s style sheet.

div#attachment_12043 {
     padding-right: 30px;
     padding-bottom: 30px;
 }

IMPORTANT: It’s important to note that you only need to insert the style that you’re changing into your child theme’s style sheet.

For example, if I look at my parent theme’s style for the body text, I find the following CSS.

body {
    color: #555;
    font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    overflow-x: hidden;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    background: #ebeff0;
}

If I wanted to change ONLY the font-size to 18, I would NOT need to copy that whole section. I would only need the following

body {
     font-size: 18px;
 }

2. When Adding New Functions

The functions file can be used to add all sorts of new functionality to your theme.

Essentially, the functions file code is like the code for a plugin. You might find little snippets of functions file code on the web to help you do things you’d like to do.

For example, maybe you’d like to add new image sizes to your theme. You can do that by adding a bit of code to your functions file.

Here’s an example.

By default, here are the 3 image sizes available to me in the Prologue theme.

But let’s say I wanted to add 2 more sizes, so that I would have these options.

I did that by adding the following code to the bottom of my functions.php file.

// New Images Sizes
add_image_size( 'medium-width', 480 );
add_image_size( 'medium-height', 9999, 480 );

// Register New Image Sizes
add_filter( 'image_size_names_choose', 'prologue_custom_sizes' );
function prologue_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'medium-width' => __( 'Medium Width' ),
        'medium-height' => __( 'Medium Height' ),
        ) );
}

3. When Changing Existing Template Files

Another good time to use a child theme is when you want to change a template file, like your single.php file or your footer.php file, etc.

The way to do that is to copy the existing file from your parent theme and put it into your child theme. You can then edit it there.

For example, let’s say I wanted to change the credits in my footer. Let’s say I wanted to get rid of the WordPress link there and put a link to my own site in.

To do that, I would copy the contents of the footer.php file from my parent theme and then create a new footer.php file in my child theme (either on my server or in the child theme folder on my computer).

Now I can edit the code in the footer.php file of my child theme. I’ll replace the WordPress link with a link of my own.

And now I have my new footer.

4. When Creating Page Template Files

One reason many people use child themes is to put new Page Templates into their site.

A Page Template is a template that you create and design as you like, and then you can assign it Pages.

As an example, let’s say I’d like to make a template that has a contact form automatically placed at the bottom of the page.

Let’s go over how to do that.

1. Install a contact plugin like Contact Form 7 and get the appropriate code for the template, which you’ll paste into your template later.
2. Copy the contents of your parent theme’s page.php file to use a model for your new template.
3. Create a new file (either on your server under your child theme or in the child theme on your computer), and paste the original page.php file contents into it.
4. At the VERY TOP of that new template file (ABOVE the code you’ve already placed into it), place the following, giving it a name appropriate for your purposes.

<?php
 /*
  * Template Name: Contact Form at Bottom
  */
?>

And here’s what it looks like at the top of my template file.

5. Save your file along the lines of page-contactform.php or whatever is appropriate for your case.

6. Edit the file as you like.

In my case, I’m going to paste the code I need for my contact form below my content area, plus a little bit of styling and text.

It looks like this:

<div class="entry" style="padding-top:50px;">
<h3> Get in Touch </h3>
<?php echo do_shortcode( '[contact-form-7 id="12053" title="Contact form 1"]' ); ?>
</div>

I save that again, and I’m ready to apply my template.

7. Now choose your template when you create a Page.

Do that by looking on the right hand side of the edit screen for Pages. You’ll see a pulldown menu there for templates.

You should see your new template somewhere in the list of templates in this menu.

When I assign my template to my page, I get my contact form automatically added to the bottom.

5. When Using Custom Fields

WordPress comes with a number of fields in a post that you’re already used to, like the Title field, the field for the main content, and the Excerpt field.

But did you know you can also add other fields to put into a Post or a Page? You can. They’re called Custom Fields.

There are different ways to add custom fields, but the easiest is with a plugin like Advanced Custom Fields.

As an example, let’s say I review restaurants on my blog, and so I want to have extra fields for things I use all the time, things like the type of restaurant, location, price, etc.

After setting up new custom fields with my plugin, I then get the code I need to place them into my template file.

As a quick example, let’s say one of my custom fields is a final yes/no judgement on whether I recommend the restaurant or not.

If I am putting this in my single.php file, for example, then I will copy the single.php file contents from my parent them and make a new single.php file for my child theme.

I will then insert my code there, maybe something like this:

Somewhere on my write/edit screen I will see my new custom field the way I set it up with my plugin.

In my case, I set it up with a simple Yes or No.

So when I check Yes, I get the following on my post in that spot.

Don’t Change Original Files, Use Child Themes

Changing original theme files can very easily become a recipe for disaster. Child themes are a safe and easy way to change things to your heart’s content without having to worry about losing your work when updating a theme.

Don’t throw the baby out with the bath water. Use a child theme.