How to Make a WordPress Child Theme

Creating a WordPress child theme is very simple to do and will save you so many headaches. Modifying a theme directly is never advised. When you modify a theme you will lose all the changes you made the next time it updates. However, if you create a child theme then you’ll never lose those changes. It’s really simple to do as well, so there’s no reason not to.

See, a WordPress child theme is kind of a copy of a theme. What it does is take elements of a parent theme and modifies what it needs. That way you aren’t modifying a theme directly, so you won’t lose the changes you make.

Basically, the way it works is that it pulls everything from the parent theme. Other than the files noted below, the only files your child theme will contain are the ones you want to alter.

So, if there’s only a few things you want to change about a theme there won’t be many files in the child theme. This is what makes creating it easy – you only need what you want to alter; you don’t have to build everything like a normal theme does. You can build it in a few minutes as well, believe it or not.

How to Make a WordPress Child Theme – Step by Step

There are two core things you want to do when you create a child theme. Before we get to those though, you’re going to want to start by creating a folder for the files you need. I typically just append my name to the theme’s name.

For example, the theme I’m using on this site is called Ribbon Lite. The folder for the theme is ribbon-lite. So, when I created my WordPress child theme, I created a folder called ribbon-lite-thor. Simple enough!

functions.php

You are going to want to create a functions.php file inside your folder. Inside that functions file you will want to add this:

add_action('wp_enqueue_scripts','theme_enqueue_styles');

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

What that code will do is add the parent theme’s style.css file to your child theme. This is very important because if you do not do this then things will not look right. Your child theme needs all those style of the parent theme to render properly. You can of course modify the styles, but first you need to include them.

style.css

The next file you need is a style.css file. Even if you aren’t modifying the styles at all of the parent theme, you will still need this file so your child theme has the proper structure required.

What you will need to place inside this file is the following:

/*
Theme Name: Ribbon Lite Thor
Theme URI: http://creativetwilight.com/
Description: Child theme for the Ribbon Lite theme
Author: Thor
Author URI: http://creativetwilight.com/
Template: ribbon-lite
Version: 1.0.0
*/

That goes at the very top of the style.css.

To break it down:

Theme Name: This can say anything. I like to keep it simple, but I could have instead put “Thor’s Awesome Theme” here if I wanted to. This is the name of the theme that will appear when you choose the theme you’re using.

Theme URI: You can just put your blog’s URL here.

Description: This is the text that will show up in the theme selector to describe the theme. Again, I like to keep it simple.

Author: Self-explanatory 😉

Author URI: The author’s URL. Again, I just put in my site’s URL here.

Template: This is very important. This is what tells WordPress the theme your theme is a child of. That way WordPress knows where to get the files required for your child theme. Since my child theme is based on the Ribbon Lite theme, and the folder for that theme is ribbon-lite, that’s the value I enter here.

Your Styles

Inside this style.css is where you will place any styles you are altering or adding.

For example, here’s part of my stylesheet:

/*
Theme Name: Ribbon Lite Thor
Theme URI: http://creativetwilight.com/
Description: Child theme for the Ribbon Lite theme
Author: Thor
Author URI: http://creativetwilight.com/
Template: ribbon-lite
Version: 1.0.0
*/

#page, .container {
	max-width: 1200px;
}
.site-branding h1.image-logo, .site-branding h2.image-logo {
	margin-top: 0px;
}
.site-branding h1, .site-branding h2 {
	margin: 0px;
}
.site-description {
    margin-top: 5px;
}
.article {
	max-width: 822px;
}
.sidebar.c-4-12 {
	max-width: 342px;
}
footer p {
    color: #aaa;
}

So, I’m altering the parent’s styles for #page, .container, .article, and others you see there. I wanted to change those values from the ones the parent theme set, so I included them in my style.css and they will in turn override the parent’s version of them.

If you find that your child styles are not overriding the parent’s then you may need to include the !important declaration. That would look like:

#page, .container {
	max-width: 1200px !important;
}

Include Files as Needed

Most likely if you’re creating a WordPress child theme you’re wanting to do more than modify a few styles. Though, doing it just to modify styles is perfectly valid as well. As mentioned earlier, you will include any files you need to modify from the parent.

For example, say you wanted to change how a post looks. To do that you would take the single.php file from the parent theme, save a copy into your child theme’s folder, and then make any changes needed to that single.php file. If you needed to change how a page looks, save the page.php file to your folder and make your changes to it.

Again, other than functions.php and style.css, you only need the files you’re modifying.

Theme Image

You know how a theme has an image that shows up when you look at the themes you have installed? If you want to have that then you need a screenshot.jpg or screenshot.png file in your WordPress child theme folder.

If you’re lazy like me then just copy the one from the parent theme and save it to your child theme folder. Done!

Activating the Theme

Once you have all the files you need, you need to put the theme up on your site. You can do this one of two ways.

FTP

  1. FTP into your web host and navigate to /wp-content/themes/
  2. Upload your child theme folder with contents.
  3. Go to your WordPress Admin->Appearance->Themes, find your theme and activate it.

Zip File

  1. ZIP your child theme folder and contents.
  2. Go to WordPress Admin->Appearance->Themes->Add New->Upload Theme. Select your ZIP file, install, and activate.

Conclusion

This should hopefully get you started on doing your first WordPress child theme.

There are exceptions to everything, so if you find yourself struggling with something, or just want a more thorough explanation than I gave, then definitely check out the documentation on WordPress.

If you have a tutorial you’d like to see me cover then let me know below!

Please Rate this Article

Please take a second to rate this. It helps us deliver to you the stuff you enjoy.

How to Make a WordPress Child Theme
5 (100%) 2 votes

Author: Thor

I started blogging in 2009 for my gaming blog Creative Twilight. I've been blogging ever since.

I later created Command Center, a tool for 40K. I've also set up, maintain, and run my wife's site ecoLifestyle for her business.

I'm also a PHP programmer for a local web hosting company where I develop WordPress plugins.

Leave a Reply!

Note: You can comment as a guest by clicking the field indicated Name and checking off “