WordPress Child Themes – Simple

A WordPress child theme is something absolutely marvelous that you really might want to think about implementing!  Do you like to play around with the style of your WordPress site?  A WordPress child theme is just the thing for you.

What Is A WordPress Child Theme?

In simple terms, it’s basically a sandbox where you can make all the changes you want without changing the code of the original theme.  The original theme is the parent and the new theme is the child.

A child theme is super simple to make and I’ll show you how to get started.

What is required to create a child theme?  Not much at all, it’s pretty simple…

Create A Folder For Your Child Theme

The first step is to create a folder in your wp-content/themes folder.  You want to name this folder whatever amazing and mystical name you have come up with for your child theme.  For this website, I created a child theme folder called…wait for it… Simple.

So now there is wp-content/themes/simple

Create Your Child Theme Stylesheet

Just to reiterate, the child theme stylesheet does not take the place of the parent theme’s stylesheet.  The child theme stylesheet supplements the parent and also overwrites any identical styles.

Example…If your parent theme has the following

.simple-header: {
font-size: 360px;
}

and you want to make it a little more realistic, you can put the following in your child theme stylesheet and it will override the slightly larger font-size in the parent theme stylesheet.

.simple-header: {
font-size: 36px;
}

So, to create your new stylesheet, create a file named style.css and put it in your child theme’s folder.  wp-content/themes/simple/style.css

You need to add a few pieces of information to the top of the stylesheet called the stylesheet header.  This is necessary so WordPress can tell what this stylesheet is for and that it is for a child theme.

/*
     Theme Name:          Simple
     Theme URI:           http://example.com/simple/
     Description:         Put a description of your theme here
     Author:              Josh Lutz (Put Your Name Here)
     Author URI:          https://simpletonsays.com (Put Your URL Here)
     Template:            twentysixteen (This is the parent theme)
     Version:             1.0.0
     License:             Whatever you use here
     License URI:         Put your license URI here
     Tags:                Put descriptive tags here
     Text Domain:         simple
*/

“Template” is very important.  You want to use the theme slug of your parent template.  In this example I’m using the Twenty Sixteen theme.

Now save your file and let’s move on to the next step.  If you viewed your webpage right now it would have no style since it isn’t pulling the information from the parent theme’s style.css at this point.  So let’s get that rolling.

Create Your Child Theme functions.php

Create a file named functions.php and put it in your child theme’s folder.  wp-content/themes/simple/functions.php

We need a way for WordPress to pull the original stylesheet from the parent theme and start using it.  If we don’t do this, you have absolutely no style at this point…and that’s bad.

In functions.php add the following code to call up the parent’s style.css file.

If your parent theme uses more than one stylesheet, you have to enque each one separately within the theme_enqueue_styles() function.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    /* If you have another stylesheet besides style.css then repeate the wp_enque_style here for each additional one. */
}
?>

Now if you reload your webpage it should look identical to the parent theme.  It doesn’t seem like you have accomplished much since it looks identical but what you have done is freed yourself from the bonds of the parent.

Now you are free to make your changes to your child theme style.css, functions.php and other files without corrupting the parent theme.