iThemes and Child Themes – introduction

Child themes, an introduction

In WordPress 2.7, Child themes have been introduced in WordPress. Using Child themes, you can modify (override) all aspects of a Parent theme (e.g. the stylesheet, page templates, functions) without risking loosing all your modifications when upgrading the parent theme.

In the following chapters a short theoretical introduction, that you may wish to skip and get started using your own first Child theme for iThemes.

How do Child themes work?

A child theme is a stripped version of the parent theme, and all it requires is it’s own folder, and a stylesheet. You activate a child theme just as you activate any WordPress theme, from the wp-dashboard. The child theme will contain a reference to the parent theme, so that all theme options, settings, widgets, page templates, will be contained. All the Child theme does (can do) is to override certain aspects of the parent theme.

Due to the nature of CSS, and the way it’s interpreted by the browser, cascading stylesheets allow you to add your own specifications, that override the specifications in the stylesheet in the parent theme. You can even change only part of a specification, for example, if the parent theme uses the following specifications:

body { /* This is where you set many of the universal defaults */
	background: #454545 url(images/body-bg.gif) repeat-x;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
}

if you wish to change the font, in your child theme all you have to specify is that specific property (Verdana in this case), while all the other remaining properties stay as they are.

body { /* This is where you set many of the universal defaults */
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

So by using a child theme, you only need to add your specific changes to override the parent theme settings. Once a child theme is activated, it will behave just like the parent theme. Modifications to a stylesheet will only have to be done in the child theme, thus leaving the Parent theme unchanged, making it easier to upgrade the theme.

In a similar way, you can add theme files (like the index.php file) to your child theme, and make specific modifications to that file. If the file is included in the child theme, WordPress will use that version. If it is not, WordPress will fall back on the parent themes’ file.

And you may also want to add specific functions (for advanced users) by including a functions.php file in the child theme folder. These functions will be used on top of the themes default functions.

When to use a Child theme?

If you intend to modify the theme you have purchased, and wish to be able to upgrade easily without having to reapply your modifications in each theme file, you should use a child theme. If you are completely happy with the Parent theme as is, and will not be making any changes, there is no need to use a child theme.

iThemes and Child themes

Over the next couple of weeks, I will start to create basic Child themes for some iThemes themes. Some themes require images and additional stylesheets to be included. For now, the following steps describe how you can:

• Create your own Child theme for Builder
• Upload the Child theme
• Activate the Child theme
• Modify the Child theme

Once you have completed these steps, you can activate the child theme in stead of the parent theme, and safely modify the stylesheet, page template, or even theme functions without having to redo all these changes once you upgrade the theme.

At the end of this article, you will find a sample Child Theme for the Builder theme that you can download.

Prerequisites

• Access to your server using FTP – Recommended – You will have to upload the Child theme to your server
• A text editor – To add the code to create and identify a child theme
• A parent theme – As far as I can tell at the moment, most, if not all iThemes themes are capable of behaving like a parent theme

Step 1 – Create the Child Theme

All the Child theme needs as a bare minimum is a stylesheet. In this example, we will be creating a Child Theme for the Builder theme.

• Create a new folder on your computer, name it “Builder-Child” or anything that won’t conflict with themes that you already use in your WordPress installation. Do not uses slashes, dots, spaces or any other strange characters in the folder name.
• Create a new file, using a text editor, and enter the following at the start of the file:

/*
Theme Name:     Builder Theme - Child Theme
Theme URI:      http://www.ithemes.com
Description:    Child theme for Builder
Author:         iThemes
Author URI:     http://www.ithemes.com
Template:       Builder
*/

/* Import Stylesheets, do not remove this line, make sure you use the correct actual folder name.
-----------------------------------------------------------*/
@import url("../Builder/style.css");

The most significant line here is the reference to the Parent Template, which should be the exact (!) case sensitive name of the path to the parent theme in the wp-content/themes folder. Also, you need to make sure that Parent theme AND Child theme reside in the same folder, wp-content/themes folder.

The @import line will make sure that the Parent stylesheet is imported, and will be used as the basis for this Child theme. Any modifications to the styling can be done in this stylesheet, and since these modifications will appear in the stylesheet after the original, the Child theme will overrule the original parents stylesheet.

• Save the file you just created and name it style.css. This is the only correct name for WordPress to be able to use the theme as a child theme.
• Copy the following from the original theme to the child theme:
• copy the images folder
• copy screenshot.png, just so that a preview of the Parent theme shows in the WordPress dashboard

Upload your Child Theme

Using an FTP program of your choice, upload the folder to your server, in the wp-content/themes/ folder. I won’t do a tutorial on FTP here, there are several resources on the net. Here’s a good set of tutorials, including video tutorials on several FTP programs. I recommend using FileZilla, a free Open Source program.

Activate your Child Theme

From your WordPress dashboard, activate the child theme just as you would activate any other theme.

Modify your Child Theme

In a next post, I will describe in detail how to modify various aspects of the appearance and functionality of your site, by modifying your Child theme.

Next post in this series

Child Themes, a quick tutorial

Recommended reading

• WordPress Child Theme Basics
• How to make a child theme for WordPress: A pictorial introduction for beginners
• How To Modify WordPress Themes The Smart Way
• How To Protect Your WordPress Theme Against Upgrades
• Ian Stewart on Child Themes -1
• Ian Stewart on Child Themes -2