How Child Themes Work

Any theme can be the mother of a child theme. The only thing that is really important is that the theme is located in your wp-content/themes/ folder (because otherwise you can't use its files), and that the child theme is in its own folder, just like a regular theme. So if you want to use the Notes Blog Core theme as a mother template theme, you need to have it in the wp-content/themes/ folder, and then you can have your very own Small Notes child theme (or whatever you want to call it) in its own folder, also in wp-content/themes/.

If child themes are in wp-content/themes/ just like ordinary themes, then how do you use them and what do you need? Basically, all you need is a style.css file to tell WordPress that it is a theme, and in fact a child theme, as well as point to the mother theme. Whenever a template file is called for, WordPress will look for it within the child theme, and if it isn't there, it'll load up the one in the original mother template theme. The lingo may be a bit hard to follow, by the way, because the community really hasn't decided on what to call this relationship between themes yet.

All you need is a style.css:

Theme Name: Your Theme Name

Theme URI: http://your-theme-homepage.com

Description: Oh what a lovely description of your theme you'll put here! Author: Your Name

Author URI: http://your-website.com

Template: If this is a child theme, you'll set the template theme's folder name here, otherwise remove

Version: A version number

Any general information, license statements, plugin requirements, or any other information you may want to share.

That's the basic style.css for just about any theme. Now, you'll need the Template part if you want the stylesheet to declare that it is a child theme, otherwise you'll just leave that out. So if you want to create that Small Notes child theme built on Notes Blog Core, you need to add the Template row.

However, you don't just write the mother template theme's name in the child theme's style.css header, you write the folder in which it resides. The default WordPress theme is located in wp-content/themes/default/ so if you wanted to use that as your template for your child theme, you'd write "default." Now, you wanted to use the Notes Blog Core theme, which is located in wp-content/themes/notesblog-core/, hence the folder you want to pass along in your child theme style.css is notesblog-core.

Or like this, filled out with dummy content to fit the hypothetical Small Notes child theme for Notes Blog Core:

Theme Name: Small Notes

Theme URI: http://notesblog.com/core/small-notes/

Description: This is Small Notes, a child theme for Notes Blog Core. Author: Thord Daniel Hedengren Author URI: http://thedengren.com

Template: notesblog-core

106^

Version: 1.0

You need to have both Child Notes and Notes Blog Core in your wp-content/themes/ folder for this theme to work.

Remember, this is the child theme's style.css file. You can activate it just like a normal theme from the Appearance page in WordPress admin.

Now that you have your stylesheet for the Small Notes child theme, you can change those fonts and colors. First, you need to decide whether you want to completely replace the mother theme's style.css file (Notes Blog Core in this case), or build upon it. Most likely the latter is the case, so you need to import the stylesheet from Notes Blog Core. You can do that with the @import tag:

@import url("../notesblog-core/style.css");

Just add that below the style.css theme header information, and anything you want to alter below it. Change some colors and some fonts, just for the sake of things:

@import url("../notesblog-core/style.css");

div#content { font-family: Georgia, Times New Roman, serif; } ul.sidebar ( color: #444; }

Nothing fancy there, but you will have the font-family starting with Georgia on everything in the div with id="content", and the color of type in the ul.sidebar tag will be dark grey. This will be read after everything in the stylesheet from Notes Blog Core is read; that's why you put the @import as high as possible in the style.css.

So the full style.css for the Small Notes child theme, just changing the things mentioned so far, would look like this:

Theme Name: Small Notes

Theme URI: http://notesblog.com/core/small-notes/

Description: This is Small Notes, a child theme for Notes Blog Core.

Author: Thord Daniel Hedengren

Author URI: http://thedengren.com

Template: notesblog-core

Version: 1.0

You need to have both Child Notes and Notes Blog Core in your wp-content/themes/ folder for this theme to work.

Remember the Page templates you wanted? Creating them is easier. Just create them like you would if you hacked the Notes Blog Core theme, and put them in the Small Notes child theme folder. Now they are available for use whenever the Small Notes child theme is activated, just like with a regular theme.

Every file in the child theme is ranked higher than its equivalent in the mother template theme. That means that even though there is a sidebar.php in Notes Blog Core, the mother theme, your sidebar.php from Small Notes will be loaded instead of it. And vice versa, if you don't want to do any changes to the sidebar.php file as compared to the mother template theme, then just don't add that file to the child theme.

The great part is that only changes go in your child theme, and that whenever the original template theme is updated, you can update your mother theme too, knowing that your changes are intact in the child theme. Better yet, your child theme will reap the benefits of the mother template theme update, while otherwise remaining untouched.

One of the cooler, albeit not as groundbreaking, usages of child themes is the possibility of short-term event themes. Think about it: if you have a theme that you're happy with, but suddenly want it full of snow and reindeers and such to celebrate that cold time of the year, then why not just create a child theme that swaps out the colors, background images, and even the graphics?

@import url(" ../notesblog-core/style.css");

div#content { font-family: Georgia, Times New Roman, serif; } ul.sidebar ( color: #333; }

Authority Blog Success

Authority Blog Success

Blogs With an Authoritative Voice Attract a Loyal Audience. There are Lots of Rambling Blogs on the Web Today, but Blogging as an Authority on a Particular Subject is the Best Strategy for Generating a Perpetual Income. Blogging as an Expert on Your Subject is the Key to Blogging Success.

Get My Free Ebook


Post a comment