Subscribe to the RSS Feed : Read our Blog Posts from the convenience of your favourite Reader

WordPress Child Themes – Theme Development Made Easier

December 12th, 2010 . by Anup



WordPress Child Themes – Your Gateway to theme development paradise

Child themes are a fairly new concept. I’ve been hearing about them for some time now. Never really bothered to check out before. But luckily for all of us, I have now. This is not complicated. This is somewhat easy to understand . So don’t fret about all the lingo.

Basically, you create themes that rely on other themes as templates. Now that it turn means you only have to change the child theme to make changes to your WordPress theme .

So why bother you ask ?

As it turns out what most wordpress theme designers do is build on top of existing themes they like. I’m guilty of that myself. Why write everything from the beginning when you might need only a few things changed. For example Serving Niches itself it built on themeorrhea by JTK. I loved the way his theme was built. It was simple and didn’t have too many files cluttering up the back end.
Minneapolis St. Paul WordPress User Group #1

The basic layout for any theme doesn’t have to be different. Now previous to WordPress 2.7 I would have had to change the theme files using editor and add my embelishments. Everytime a new version of the theme was released , I would have had to copy paste all my changes to the new theme. Almost rewrite the whole thing. If you had seen the serving niches theme files , you wouldn’t recognize themeorrhea. There were way too many changes made. So imagine having to write all that again on top of the new theme. It would take time.

See now I don’t have to do that. Now with the concept of child themes , I could simply put all my changes in its own folder , so when I upload a new version of the original theme , I’ll only be rewriting the theme’s files not my changes.

So how do you make use of child themes ?

Child themes are put in the same folder as any other theme on your wordpress installation.

wp-content/themes

To build a child theme , you will first need a mother theme or a main theme to build a child theme on.

All you need to do is to make changes to the style.css file . You need it to tell wordpress that this theme is a child theme.

Neat huh ? Imagine all those hours you’d have to spend rewriting and testing and playing and rehashing and indenting and what not all that code if you were to update the mother theme.

The mother theme style.css. Below is the beginning of a typical 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 don't put this here

Version: A version number

.

Any general information, license statements, plugin requirements, or any other information you

may want to share.

.

*/

You do need to make a few changes to the child theme’s style.css . The one file it needs is style.css . You need to put the basic information below in it. Below is an example of how you’d want to fill out the child theme style.css file.

Theme Name: will the child theme’s name

Theme URL: url of your theme if you choose to upload it somewhere so that people can download or purchase it

Description: small description of the child theme

Author: your name or nick name

Author URL: if you have a website. Get a free one atleast mate if you don’t have one.

Template: This is the important option. This is where you mention the location of the mother theme. So say the mother theme is located in wp-content/themes/themeorrhea/ .

You’d write “themeorrhea” here. So it would be Template: themeorrhea .

Version: this is you first child theme ? Call it version 1.0 . you could call it 10.0 if you wanted. It doesn’t really matter.

An example of what a child theme’s style.css would look like.

/*

Theme Name: Sandwich

Theme URI: http://anupvasudevan.com/sandwich

Description: This is Sandwich, a child theme for themeoreaa.

Author: Anup

Author URI: http://anupvasudevan.com

Template: themeoreaa

Version: 1.0

.

You need to have both Sandwich and Themeorrhea in your wp-content/themes/ folder for this

theme to work.

.

*/


This child theme will be like any other theme . You’ll be able to activate it like any other theme from the Appearance page in wordpress admin .

So what about the remaining files ?

Simply add them to the child theme folder. The child theme’s files get precedence by default over the mother theme’s files. In other words, should you add a header.php to the sandwich folder at wp-content/themes/sandwich , it will be chosen over themeorrhea’s header.php . Thereby replacing it. The rest of the files will be used as is. If you choose to use the mother theme’s files , do not make an empty file in the child theme folder.

That is all . There you’ve made it to the end.

You should be able to use child themes on WordPress installation now.

An example use of this would be during the holiday season. You want to change the look for maybe December 25th alone or even the week leading up to December 25th .

This way you don’t have to write the code all over . You just need to build a child theme. Maybe just change the background image to something with leaves and bells.

You are limited only by your imagination.

image credits : http://www.flickr.com/photos/iamperegrino/2913018697/ WordPress stickers & stationery
http://www.flickr.com/photos/myklroventine-events/3832855830/ WordPress screen

Audiobook MP3s PC & Video Games

Be Sociable, Share!

4 Responses to “WordPress Child Themes – Theme Development Made Easier”

  1. […] This post was mentioned on Twitter by Anup Vasudevan and Anup Vasudevan, Michael Davis. Michael Davis said: RT @thechronicler: #WordPress Child Themes – Theme Development Made Easier http://goo.gl/fb/FTR0b #blogging #free #uncategorized […]

  2. […] more here: child themes for wordpress Posted in WordPress Themes « jQuery Cycle | Vivee – wordpress, webmastering, grafika […]

  3. […] See more here: child themes for wordpress […]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>