How to Make a WordPress Child Theme (and why you should)

We have a great question this week for all you who are using pre-made WordPress themes!

What are the benefits of using WordPress child themes? I’m afraid to try to tweak my “functions” or “themes” files. Is there an easy way to make a child theme?
Molli

What is a child theme and why should you use one?

If you have bought a pre-made theme, you’ve probably heard people saying, “Don’t edit the theme files.” Because if you edit the theme files, then when the theme gets updated, any changes you’ve made will be overwritten! But luckily, child themes give us a way around this.

Honestly, I can’t really explain child themes better than WordPress.org does:

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.
WordPress.org

So basically, you create a child theme, and then that child theme uses everything in the parent theme, but you can add new CSS or functions to your child theme which act independently of the parent. So if the parent gets updated, your child theme still remains completely the same. Let’s get started!

How to create a child theme

This is actually super easy! For now we’re going to start working on your desktop, and then when we’re done, we’ll upload it to WordPress.

Create a new folder that will be the name of your child theme. Do not use any spaces! A good naming convention is something like: parenttheme-child. So if you’re creating a child theme of “Twenty Twelve”, you would do twentytwelve-child. But ultimately, this can be called anything (as long as there are no spaces or odd symbols—but dashes and underscores are fine).

The Stylesheet

Now, using a text editor like Notepad++ (Windows) or Textwrangler (Mac), create a new CSS file named style.css and save it inside that folder. At the very top of that file, paste this:

/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme 
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

@import url("../twentyeleven/style.css");

This is the example for creating a child theme of Twenty Twelve. You need to make a few edits accordingly:

• Theme Name (required): This can be anything. I suggest you use “Parent Theme Name” followed by “Child”, but ultimately it’s up to you.
• Theme URI (optional): This can just be the URL of your blog.
• Description (optional): Just put a description—it can be anything!
• Author (optional): Your name here.
• Author URI (optional): This can just be the URL of your blog.
• Template (required): ***IMPORTANT*** This must be the directory name of your parent theme. You can find this out by logging in via FTP, going to wp-content » themes and searching for your theme. You need to note down the name of the directory (with proper capitalization). Another way to find out the directory name is to find an image on your blog that is included with your theme. For example, if you view the source of my blog and find the main stylesheet, the URL is: https://www.nosegraze.com/wp-content/themes/nose-graze/stylesheets/theme.css . This URL tells us that my theme directory name is nose-graze.
• @import (required): This is to import the stylesheet from your parent theme. Make sure you replace “twentyeleven” with the directory of the parent theme (same as above).

Now, below this, you can start putting in all of your CSS to overwrite the parent theme! So you can change the body background colour and body font colour like this:

body {
	background:black;
	color:white;
}

Tip: if you find that things aren’t overriding correctly, try adding !important at the end. Like this:

body {
	background:black !important;
	color:white !important;
}

The Functions File

If you want to be able to make additions to your theme functions.php file, you can create a brand new file in your child theme! This child theme’s functions.php file will be loaded in addition to the parent theme’s functions.php file.

Using a text editor, create a file called functions.php and save it in the same folder as the style.css file. Then copy this into the file:

<?php

//Your code here

?>

All of your new PHP code can be put inside those PHP tags.

How to upload and activate your child theme