Creating a Child Theme in WordPress
by Bandicoot Marketing on | Posted in Tutorials | 29 comments
I have received a lot of emails in regards to users having to modify one of my Premium themes to get it looking or working exactly how they want it. Everyone is different, and even though I have added tons of options to each of my themes, sometimes there just isn’t an option for what you require. The only problem with modifying any of the core theme files is that when you upgrade, those modifications will be overwritten. That’s where a child theme comes in.
A child theme is a “theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.” In layman’s terms, it’s a way you can modify a theme that will never be overwritten, since it is a totally new theme that only relies on core elements from the “parent” theme.
Putting together a basic child theme really only requires one thing: a style.css
file. For this example, I am going to create a child theme for Magazine Premium.
A child theme has to be self-contained, so first you need to create a new folder. Call it magazine-premium-child
. In that folder, create a new file called style.css
. The structure should look like this:
Once you have a style.css
file, open it up and add this to the top:
/* Theme Name: Magazine Premium - Child theme Theme URI: http://themes.bavotasan.com/our-themes/premium-themes/magazine-premium/ Description: A basic child theme for Magazine Premium Author: c.bavota Author URI: http://themes.bavotasan.com/ Template: magazine-premium Version: 0.1 */
The most important line is the Template: magazine-premium
. This lets WordPress know that this theme relies on Magazine Premium. You need to always make sure that you are using the parent theme’s directory name. If you have changed the directory name to something like MagazinePremium
, then that line would have to read Template: MagazinePremium
.
If you would upload your new child theme into WordPress and activate, you would get a theme with no styles whatsoever. The thing about child themes, is that they totally overwrite the style.css
of the parent theme, so if you have no CSS in your new style.css
file, then your site will have no CSS. A great way to load up the parent theme’s CSS is to use @import
. Now your new style.css
file should look like this:
/* Theme Name: Magazine Premium - Child theme Theme URI: http://themes.bavotasan.com/our-themes/premium-themes/magazine-premium/ Description: A basic child theme for Magazine Premium Author: c.bavota Author URI: http://themes.bavotasan.com/ Template: magazine-premium Version: 0.1 */ @import url("../magazine-premium/style.css");
What that does is include the stylesheet from the parent theme’s directory. Now, if you activate your child theme, it should look identical to the parent theme.
You are ready to make some modifications.
Any CSS you add will no longer be overwritten if the parent theme is updated. And, if the parent theme’s CSS changes, it will automatically be imported into your child theme’s CSS. So far so good, but what if you want to modify something in the single.php
file? Simple, just copy over the file from the parent theme’s directory into your child theme’s directory. Modify to your heart’s content and your changes will be safe.
This may seem like a bit of work just to change one or two things, but taking the extra time to create a child theme will end up saving you more time in the long run, since you will no longer have to redo all your changes each time you upgrade.
Read more about child themes in the Codex at http://codex.wordpress.org/Child_Themes.
29 comments for “Creating a Child Theme in WordPress”