featured-large-parent-child

If you ever want to customize a WordPress site, then the smartest way to do that is to create a “child theme” and then customize that instead of altering your original theme.

A child theme inherits all the functions and designs of your original theme (or the “parent theme” as it’s called). The advantage a child theme provides is that you can update your site’s original theme without losing any of the changes you made.

If you don’t use a child theme, then any changes you make to a theme will be overwritten when it’s updated.

As child themes are obviously very beneficial, we’ll go over how to create one.

We’ll use the Evolve theme as our parent for this tutorial.

 

Create a New Folder on Your Computer

The first thing to do is to create a new folder on your computer with an appropriate name.

I’m naming mine evolve-child.

 

Open Up a Text File

Next, open up a text file (maybe Notepad in Windows or TextEdit in Mac).

We’re going to put some info at the top of this file. You can put a number of pieces of information in this section, but you really only need two pieces to make the child theme work, and so we’ll start with that and go over some other possibilities later.

Place the following at the top of that file:

 

 

You can make your theme name anything you want it to be. Obviously, in this case, it makes sense to name it Evolve Child Theme.

The template name, however, must be named exactly as the folder of your parent them on your server. In this case, it’s evolve with a lowercase e.

If the folder were named Evolve with an uppercase E, then I would need to put that in my file.

Most theme folders begin with a lowercase letter, but not all of them, so just know that.

 

Importing CSS

Next, under the top section, you’ll need to put in a line that imports the parent theme’s CSS file. Do that just like the line below, but replace “evolve” with the name of your theme.

Once again, you will need to make sure that the name is written exactly as the name of the folder for the theme. And so if it were to be named Evolve with a capital E, then you would need to write it like that.

 

And so now at this point, you should have the following in your text file.

Now save this file as style.css in the folder that you previously created (evolve-child).

*For some text file editors, like Notepad, you may need to write the name of the file in quotation marks in order for it to save as a CSS file, like the following.

saving-in-notepad

 

Zip and Upload Child Theme

Once you have your CSS file saved in your folder, zip the folder an upload it to your site.

If everything has gone right, your child theme should look just like your parent theme. Of course if you put anything new in your CSS file, then those changes will be included.

 

Adding to Your Child Theme

Now that you have a child theme, you can easily edit its CSS file by going to Appearance > Editor in your admin area.

Or, of course, you can change the file on your computer and upload it again.

You can also add other files to your child theme, such a functions.php file that will allow you to add new functions, or new template files, such as a revised sidebar file or a new category template.

You can add theme new template files on your server itself (inside the child theme folder), or again, you can do it on your computer and then re-upload the child theme again.

 

Other Info that Can be Included in style.css

As mentioned before, the only two pieces of info you need to put in your style.css file are the following:

 

However, there is more info that can be put in there. Here’s an example using the default Twenty Fifteen theme:

All that extra info is typically only used by theme developers making a theme that they expect others to use.