Child Themes – A Starter Guide

Changing Your Theme the Easy Way

Sometimes you need to amend a theme, either the font colour isnt right or you want to increase the height of the header or other minor modifications. However, changing the themes code is often fraught with problems, the two top ones being messing something up with out having backed the file up first or the theme gets updated and all your hard work is lost.

So how best to avoid this? Child Themes.

No dont panic, this isnt going to be writing a full blown theme (though you can if you want to…), it’s just going to be small changes. A quick note, the Parent theme is the orginal theme the one you are trying to change.

Code is an Haiku

Start by creating a new text file with Notepad and save it as style.css.

Open this file and type or copy & paste the following short piece of code:

Theme Name: ExampleName
Description: Child theme for ExampleName Theme
Author: Your name here
Template: ExampleName
@import url("../YourParentTheme/style.css");

What this means is:

Theme Name: This is the child themes name, needs to be different to the normal theme

Description: A small description to remind you what this is

Author: Your name here

Template: This is the Folder name of the Parent theme (the them you want to change)

@import url(“../YourParentTheme/style.css”); This is the location of the theme you are changing style.css file

Once this is done, you then need to log into your FTP or cPanel/Plesk and find your themes folder – normally public_html/wp-content/themes – and create a new folder. Name it the same as the name you put in the Theme Name line.

Now copy upload the style.css file to this folder.

A New Theme

When you log into your WordPress Dashboard you will now find a new theme under the themes section, this is your Child theme. When you activate it, your theme should be the exact same as it was before. Sounds useless right? Well its not, its the basis of all your changes.

From there you can go to the Appearance Editor and start adding code (anywhere below the @import line). For example, if you want to change the background colour, try entering this:

html {
background-color: #000;

This will change the background colour to black.

So any code entered here will take precedence over the code in your parent theme.

Some advice: If you get hold of the Firefox addon and Chrome extension Firebug, you can look at your parent themes code to find out exactly what needs changing by right clicking the text, image, background, whatever and selecting Inspect Element.

A note: Sometimes a parent theme wont be coded quite right and your images will disappear. If that’s the case the easiest thing to do is copy the images folder from your parent theme to the child theme folder.

So there you go, an easy way to set up a child theme to allow changes to your existing theme that will stay in effect if the theme is updated and can be easily removed if you make a mistake.

For all you visual learners out here, here is the video version: