Customizing WordPress with Child Themes

If you are like me, you’ve probably searched long and hard to try and find the perfect theme for your web site.  In the end there’s usually some modifications that you want to make to the theme outside of what plugins and built in customization settings will allow.  If you are like me, your first thought is probably to crack open the php and css files in your theme’s folder and make the changes there.  This isn’t the recommended approach for several reasons and this is where customizing WordPress with Child Themes come into play.

 

What is a Child Theme?

So, what is a child theme?  A child theme is a theme that inherits its looks and functionality from another theme, its parent theme.  This may sound difficult and time consuming, but it really isn’t.  A child theme just lets your override any functionality or looks that you want to change in the parent theme and even add new functionality.  This is all done without making any modifications to the original theme that you installed.

 

Why Use a Child Theme

But why go through all the hassle of creating a child theme when you can just modify the parent theme itself?  The biggest reason not to modify the parent theme is to preserve your changes when the parent theme is updated.  If your changes are made to the parent theme’s files, your changes will be lost when the parent theme is updated and the source files are overwritten.  In contrast, having your changes in their own separate set of files preserves your changes even after the parent theme is updated.  I’ve found that another big advantage to having your changes separated out into their own files is that it is much easier to see what all you have changed.  Most themes contain a large number of files including style sheets, html pages, php files, images and javascript libraries.  When you create a child theme and make changes, the only files in your child theme’s folders are the files that you have added or made changes to.  So, you don’t have to hunt around in every file in the parent theme’s folder and try to remember what you changed.

 

Creating a Child Theme

Hopefully I’ve convinced you that a child theme is the way to go!  But how do you create one?  It’s actually very simple to do.  Find your WordPress “themes” directory on your file system and create a new folder with the same name as your parent theme but append “-child” to the end.  For instance, my parent theme was “crisp-persona” so I created a folder named  “crisp-persona-child”.

Child Theme Create Folder

The next step is to create a new file named “style.css” in your newly created child theme folder.  This is the only file that is required for a child theme and its job is to provide the header information to WordPress for the child theme as well as any additional styling.  Below is an example of what the header should look like and it should be placed at the top of your “style.css” file.  The 2 most important lines are the ones that start with “Template:” and “@import”.  The “Template:” line tells WordPress what the name of parent theme’s folder is.  “@import” points to the parent theme’s style sheet to provide default styling for the newly created theme.  These are case sensitive so make sure to pay attention to the casing as you enter the values.

/*
Theme Name: Crisp-Persona
Theme URI: http://justinklemm.com/crisp-persona/
Description: Crisp-Persona Child Theme
Author: Justin Klemm
Author URI: http://justinklemm.com
Template: crisp-persona
Version: 1.0.0
*/

@import url("../crisp-persona/style.css");
/* Theme customization starts here

Once you have the style.css created and the header in place, you can go ahead and add any new CSS styles for your site or override any styles in the parent theme that you want to change.

You are probably going to want to change more than just the styling of a theme at some point. Most of the template .php files will just override the file with the same name in the parent theme. For example, if you create a new file sidebar.php in your theme then it will get loaded instead of the parent theme’s sidebar.php.

Functions.php does not behave in the same way, however. Functions.php does not override the entire file like the others previously mentioned. Instead, the functions.php file in the child theme is loaded before the parent theme’s functions.php file. Any new functions that you added to this file will be used along with any functions you wrote to replace parent theme functionality – with one catch. If you are trying to replace a function in the parent theme, that function must be doing a “function_exists” check for your override to work.  If the “function_exists” check isn’t on the function you are trying to replace, the parent theme’s version of the function will overwrite your version of the function in the child theme.

if (!function_exists(‘my_function’)) {
   function my_function() {
   //do something
   }
}

 

Activating a Child Theme

After you have created your child theme, you need to upload and activate it.  Uploading and activating a child theme is no different than any other theme.  Goto Appearance -> Themes in the WordPress dashboard to upload and activate it.  Before uploading it, you must ZIP up the child theme folder that you created.  You also need to make sure that the parent theme has been uploaded as well.

Two more notes of interest.  If you went to the “Themes” page of the WordPress dashboard, you probably noticed that your child theme had a gray and white checker board displaed instead of an image.  Create an image file named “screenshot.png” and include it in your child theme ZIP and that will be displayed in the dashboard.  The name for your child theme in the dashboard is controlled by the “Theme Name:” line in the header section of style.css.

 

I hope this has helped get you started using child themes in WordPress.  Once you spend a little time with it and learn a few of the ins and outs, child themes really aren’t that difficult to get setup and running.