How to Create Child Themes in WordPress

If you’re like me and you enjoy creating websites with WordPress, then one of the best recommendations I can give you is to learn how to create a child theme for your site. Child themes make customizing your site a breeze and can be a huge time-saver for developers and designers.

Naturally, my first instinct was to Google it and see if there were any good tutorials that made sense to me on creating child themes in WordPress. I found the WordPress.org tutorial on creating child themes, but still found the process confusing and a little over my head. So I decided to make my own tutorial on creating child themes for WordPress, to help anyone else who might be new to WordPress and looking for an easy-to-understand solution.

Why WordPress child themes are a good idea

When I first started working with WordPress, I had no idea about creating a child theme. I had heard about the various benefits online, but never really understood them until I had a couple projects under my belt.  I just figured that I could continue to edit the files of the parent theme I purchased and there would be no problems with that. Boy was I wrong!

One of the benefits of purchasing premium WordPress themes from some of the well-known theme shops like Elegant Themes, StudioPress, and AppThemes, is that they are constantly making improvements and upgrades to the themes that they release. This is a great feature that you really start to enjoy when you have a child theme to work with.

I quickly realized there was a problem with my current workflow when I wanted to update my theme to the latest version that had been released. What was the problem? The new version of the theme completely overwrote all of the changes I had made to my style.css file, header.php file, footer.php file, etc. etc.

In order to keep working the way I was, meant that I would have to keep notes on every single change I made to the themes files and then after upgrading, I would have to go in and redo ALL of those changes again. This approach was not very conducive to an efficient workflow and created double the work, especially when all I had to do was learn how to create a child theme.

The 3 steps to create a child theme in WordPress are:

1. Create a style.css file
2. Create a child theme folder in your WordPress directory
3. Activate the child theme in the WordPress admin area
4. You are done! Now you can continue to customize your website without worrying about the changes being erased

#1 – Create a style.css file in your favorite text editor

You can use any text editor you like to do this. There are free versions online like Notepad ++, so feel free to grab one that you feel comfortable with to create the file. I use Dreamweaver, so that is where I created my style.css file and for this example, I am creating a child theme for a site using a business directory theme called Vantage. Once you have created a style.css file, you will need to add some information for the child theme to work properly.

/*
Theme Name:     Vantage Child
Theme URI:      http://azwellnessdirectory.com
Description:    Child theme for the Vantage theme 
Author:         Chris Savage
Author URI:     http://savageomg.com/about-us/
Template:       vantage
Version:        0.1.0
*/
/*Inherit the default theme styles */

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

• Theme Name:  Enter the name that you’re going to call your child theme
• Theme URI:  Enter the URL of the site for which you will be using this child theme
• Description:  Enter a small description for the theme
• Author:  Enter your name
• Author URI:  Enter a URL for people to find out more about you
• Template:  Enter the name of your parent theme (vantage, twenty-eleven, eleven40, etc.)
• Version:  Enter the version number of your child theme (any number will do)
• Next you need to add the @ import url of your parent theme.  This will be wherever your parent theme’s style.css file resides and is needed to inherit the parent themes style.

#2 – Create a child theme folder in your WordPress directory

I host my sites at HostGator and use their c-panel to access the file manager and my root directory where my WordPress installation and themes are stored. You can also use an FTP client like FileZilla to accomplish this same thing, but basically you need to create a new folder to add the style.css file that you just created in step 1.

• Login in to c-panel
• Access the file manager

• Select the site for which you are adding the child theme

• Then access the wp-content folder on your root directory where the theme is located

• Look for the themes folder

• There you should see a list of all of the themes you have installed on your site

• Now you will need to create a new folder called “vantage-child” in this directory to add your child theme. (azwellnessdirectory.com/wp-content/themes)

• Once the new folder is created, you will need to upload the child theme’s style.css that you created in step 1.

#3 – Activate your new child theme in your WordPress admin area

Now that you have created a style.css file, added a new folder to your /wp-content/themes directory, and uploaded the style.css file to it, all that’s left to do is activate it in your WordPress admin area. Login to your WordPress admin area and visit the Appearance > Themes section and you should now see your newly-created child theme as an option to activate.

**NOTE:  If you have made it to this step and do not see your child theme as an option to activate, then you have added the child theme folder to the wrong directory. Your child theme should always be placed in the same directory as your other themes.

Now when you go to your Appearance > Editor in your WordPress admin area, you should see the blank style.css file that you created and be able to add changes to it that will not be affected when you decide to update your theme to the latest version. YAY!

RECAP:

1. Create a style.css file and add the information to the top of it
2. Create a new folder (vantage-child) in your ../wp-content/themes directory
3. Upload the style.css file to your vantage-child folder
4. Activate your new child theme in your WordPress admin area
5. Customize your new site without having to redo the changes when a newer version of your theme is released

I hope this quick tutorial was helpful for anyone looking to create a child theme for WordPress, and please don’t hesitate to ask any questions in the comments below.