× Cancel Forgot password?
Menu
iThemes
WordPress Backup, Security & Maintenance
  • WordPress Hosting
  • BackupBuddy
  • Security
  • Sync
  • Plugin Suite
  • Toolkit
  • Training
    • WordPress Gutenberg Help
    • WordPress Tutorials
    • WordPress Training Courses
    • Free Upcoming Webinars
    • Free Webinar Library
  • Blog
  • Contact
  • Log In
WordPress News and Updates from iThemes
Categories
  • Product Updates
  • WordPress Backup
  • WordPress Ecommerce
  • WordPress for Freelancers
  • WordPress Maintenance
  • WordPress Security
  • WordPress Training Webinars
  • WordPress Tutorials & Tips
  • WProsper

Written by Ronald van Weerd on December 22, 2009

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

Share this post with your friends
Other related posts
WordPress Gutenberg Block Plugins: Comparing Stackable, Atomic Blocks and Otter Blocks
WordPress Gutenberg Blocks Explained
Two Ways to Perform a WordPress Site Move
How to Set Up WAMP for WordPress Development

Comments

  1. Leon McKee says:
    December 29, 2009 at 12:23 pm

    Works great! Looking forward to additional posts on Child Themes.

    Leon McKee

    Reply
  2. Ursula Comeau says:
    December 29, 2009 at 10:05 pm

    Wow! I’ve had to take a break in the past month as life has gotten too busy, so I’m very grateful for all the info you guys has posted on child themes! Thank you!

    Reply
  3. Ursula Comeau says:
    December 29, 2009 at 10:05 pm

    have* posted. Typo correction! πŸ˜‰

    Reply
  4. Ronald van Weerd says:
    December 30, 2009 at 10:52 am

    Hi Leon,

    I’m working on it, but these are busy days πŸ˜‰ Expect a follow up soon!

    Reply
  5. Stef Rigby says:
    January 7, 2010 at 11:58 pm

    This is SOOOO exactly what I needed! I’ve lost a few mods to themes when upgrading them. Has been a bone of contention for a while now.

    Your instructions (as usual) are brilliant!

    Thanks so much – I just love what ithemes has done for my business!

    Reply

Respond

Click here to cancel reply.

Liquid Web

Get updates on new themes & plugins plus special discounts

About iThemes

  • Our Team
  • #WProsper
  • Testimonials
  • Friends of iThemes
  • Contact Us
  • Privacy Policy
  • Sitemap

Resources

  • Blog
  • Documentation
  • WordPress Tutorials
  • Free WordPress Ebooks
  • Free Webinar Library
  • Free Upcoming Webinars
  • iThemes Training
  • Affiliates

Customers

  • Member Panel Login
  • Support
  • FAQs
  • Getting Started
  • Upgrade Policy
  • Licensing
  • Terms and Conditions
  • Refund Policy

Top Products

  • BackupBuddy
  • BackupBuddy Stash
  • iThemes Security Pro
  • iThemes Sync
  • iThemes Hosting
  • Plugin Suite
  • Toolkit

iThemes Media LLC Copyright © 2019 All rights reserved