The power of Child Themes in Wordpress [Part 1]

The power of Child Themes in WordPress [Part 1]

The power of child themes in WordPress

If you are a WordPress Developer or Designer then most probably you ran across this problem before. The problem in simple words is, you have downloaded a theme for your WordPress installation, made some changes to the theme and everything was running beautifully. But then, when there was a newer version of that theme, you simply upgraded the theme and BAM! You lost all your changes because they were overridden by the theme upgrade.

That’s when the Child Theme concept comes to the rescue! Because, from now on, you are not going to change the original theme files anymore. Instead, you are going to create/modify Child Theme files.

So, what are Child Themes and how can I use them anyway? Let’s find out!

Child Themes:

Child Themes according to WordPress’s own codex 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 ( I can easily add, without affecting the parent theme files at all). For instance, I personally like the default theme of WordPress 3.0, the TwentyTen theme I mean. I would like to edit it and change its style but would like to not lose the changes that I make the next time I update the theme from its developers. In that case I will create a Child Theme called “myTwentyTen” which will inherit its main features from the original default TwentyTen. Makes sense, right?

Well, Let’s take a closer look at the Themes files hierarchy in WordPress 3.0

Wordpress default theme hierarchy showing TwentyTen

Now, to create a simple new child theme to the default TwentyTen theme, we do the following steps:

How to create a child theme

Wordpress theme hierarchy with child theme

A diagram to show the directory structure of the theme directory with a child theme

Create a new Directory / Folder under Themes (Name it with the same name you are going to use as the Child Theme Name. In our case I’m calling it “mytwentyten”)
Create a CSS file inside called: style.css

Open the CSS file in your favorite CSS editor and insert the following:

^?Download style.css

/*
Theme Name: My Twenty Ten
Theme URI: http://www.yourdomain.com/
Description: My own theme for the Twenty Ten theme
Author: Your name here
Author URI: http://www.yourdomain.com/about/
Template: twentyten
Version: 0.1.0
*/

That’s it, Now you have just created a new child theme! But wait, let’s carry on to do some magic with our new child theme, carry on please!

Now we’d like to import the default TwentyTen’s default CSS file so we can override it, otherwise you’ll need to restyle “everything” from scratch! So, while your CSS Editro is still open, insert the following line:
^?Download style.css
1
@import url("../twentyten/style.css"); //importing the twentyten's default style.css file
Next, we are going to override the default background and font colors of the entire TwentyTen’s design

^?Download style.css

1
2
3

body {
background: #87AD63; /*to change the default background color for the entire website*/
}

Well, That was the end of Part 1. Tune in for Part 2 soon!

In the mean time, if you have any questions kindly leave it at the comments section below.

Aug201006

Ayman Aboulnasr

0