How to create a child theme in Wordpress and why they're important

         

Wordpress is an immensely powerful tool. Although originally a blogging platform, it has quickly evolved into an all-round content management system for websites in pretty much every sector, mainly thanks to its open-source format.

If you're relatively new to Wordpress though, you might know have heard about themes, but have no idea what a 'child theme' is. There's a lot of talk about making sure you have a child theme set up. So what is a child theme, why do you need one and how do you go about creating one.

What is a child theme?

Every Wordpress website has a theme installed.  The theme sets the overall structure for the website layout, and can also include various custom additions to the site, including things like e-commerce add-ons, custom image galleries and unique page layouts. A child theme is an update-safe extension of the main theme, allowing you to make direct changes to the theme without modifying the core theme files.

Why use a child theme?

Unless the theme has been custom coded by a freelance Wordpress developer, then it's quite likely the theme will get updated periodically by the creators.

Theme updates are published for various reasons, sometimes as bug fixes and other times to add new features or to make sure the theme supports change in other plugins.  If you make any sort of modification to your themes core files and then run an update to the theme, its likely your changes will be overridden. This is because the update will pull in the updated files from the theme creators, and replace any existing theme files you have with the new ones.

This is where a child theme comes in. A child theme will look to the main theme (called the parent theme) for all of the functionality, layout and styling, but if any of those files are also found in the child theme, it will give the child theme file priority. This also means that when you run a theme update, the files in your parent theme will update, but the modified files in the child theme will stay put, and still take priority over any parent theme files.

An example use of this could be:

Your parent theme has a footer.php file. You want to add in some custom code into the footer that calls some javascript. If you simply place that code in the footer.php file and place it in the main theme, if an update comes along, your entire footer.php file will be changed to the updated file from the theme creators - which obviously won't have your custom code.

However if that same footer.php file is also stored in the child theme, the footer.php file in your main theme will update, but the footer.php in your child theme will still be there, and will be the one that is loaded by your site by default.

How to set up a child theme.

The majority of premium themes will include a child theme with them. Simply install the parent theme first, and then install the child theme after. Activate the child theme after you have the parent theme installed. As mentioned, the child theme will look to the parent for all of it's functionality, layout and styling - but if there are any of those same files in the child theme, they will take priority and be displayed instead.

If your theme doesn't come with a child theme, then setting one up is relatively easy.

1) Use an FTP client to navigate to your /wp-content/themes/ folder on your server.

2) Create a new folder in there. You can name it whatever you want, but it's wise to name is yourthemename-child so you know the name of the parent theme!

3) Open up a program like notepad and paste the following code into it (Change the [square bracket] content to fit your needs):

/*
Theme Name:   [Name of the theme]
Theme URI:    [URL of your site]
Description: [A quick description of your theme]
Author:       [Your name]
Author URI:   [Your URL]
Template:     [parent-theme-name]
Version:      1.0.009
*/

@import url("../[parent-theme-name]/style.css");

4)  Save the file as style.css

5)  Upload the file to your new child theme folder.

6)  Open your wp-admin, navigate to 'themes' and activate your child theme.

That's it! You'll now have a working child theme. If you want to change any files from your parent theme, simply copy them into your child theme folder first, then edit them. As long as they are the same file name, and are in the same folder structure as the parent theme, they'll override your parent theme.

         

I've been designing and developing websites for a very long time. In that time, I've learnt many things - and this article is written to help share that knowledge with others. Everything within this article is written based on my experience, but is my own professional view.

If you would like to tap into my knowledge further, please contact me for a free, no obligation quote.

Need a quote?  Contact me