One of the biggest benefits of building your site using WordPress is you have total control over your website. Want to move the menu? Go for it! Want to add a custom section to your homepage? You can do it! And unlike hosted solutions that greatly limit code customizations, resulting in hundreds of cookie-cutter sites, the sky is the limit when you choose to use WordPress to build your website.
With great freedom comes great responsibility. WordPress at it’s core is all about freedom. You can do whatever you want with the code and the same is true when it comes to WordPress themes. You own the code and are free to use it and change it in any way you see fit.
Sometimes, however, modifying the code of WordPress themes can bite you in the ass.
Storytime
Take Jake for example. Jake downloaded one of our WordPress themes and immediately started changing the theme code to suit his needs. Soon thereafter, an upgrade to WordPress was released introducing some sweet new features (live theme customizer, header images, custom menus). We decided that our themes (new and old) should support these new features, so we updated the themes for our customers. But Jake had spent hours and hours customizing the theme he downloaded and upgrading to the latest version would wipe out all of his changes.
Jake was stuck. He could either upgrade his theme to the new version so he could take advantage of all the new features or stick with his older customized version. That’s not a place we want anyone to be in.
Jake should have created a child theme to protect his theme changes. What is a child? According to the WordPress Codex:
A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.
Now that you understand what a child theme is and why it’s the smartest way to customize your theme, let’s take a look at how to create your own child theme.
Changing CSS Styles
At it’s very basic level, a child theme is merely a style.css file located in a folder inside your themes directly. For example, if I wanted to create a child theme of our “Stock Photography” theme, I would create a folder called “stock-photography-child” and include a style.css file in that folder with this in it:
There are two absolutely critical things that you pay attention to in the above code. The first being:
Template: stock-photography
The “stock-photography” bit refers to the folder name of your parent theme. The second important bit is:
@import url("../stock-photography/style.css");
This line imports all of the css styles of the parent theme (Stock Photography).
Any CSS that you add to your child theme’s style.css file will override the CSS styles of the parent theme. Pretty cool, eh? Now that you know this, simply never ever muck with your parent theme template files. Now you can simply inspect your website’s code and css using Chrome’s Developer Tools or Firefox’s Firebug. Decide on the CSS changes you want to make and add those changes to your child theme’s stylesheet (style.css).
And that is just the start.
Overriding template files
Any theme template file that you place in your child theme folder will override the corresponding template file in your parent theme folder. So let’s say that you want to tweak the homepage. Copy either the home.php or index.php file and put it in your child theme folder. Make your edits and save.
Adding functionality
Want to add some special functionality to your child theme? Create a functions.php file and define some php functions to use in your child theme following these instructions found at the WordPress Codex. If you need to include other php files that fall outside of the WordPress template hierarchy, you want to follow these instructions.
Feeling overwhelmed now? Fear not! We’ve created a tool for creating WordPress child themes in just a couple clicks. Protect your theme changes folks! Click the button below and build your own WordPress child theme.