Today, I changed the layout of this site. I was frustrated by the template I was using, so I just threw it out and started again.

Changing WordPress templates is actually easier than it looks. Select from your choice of installed template and hit Activate. It’s that easy. And once you wrap your head around Child themes, it gets even easier. Why? Because, you can customize everything about a template, without changing anything at all. Huh?

A Child theme is basically a copy of your chosen template. You only ever make changes to the copy, leaving the original untouched. The child references the original, but overrides it wherever you tell it to. That’s where the parent-child thing comes in. Parents always think they know best, and kids always ignore them and do their own thing.

With this method, any updates to the original template code which may be released by the authors do not affect your modified child template. You get all the benefits of upgrading (new features, code improvements) without overwriting your favourite background image or chosen color scheme. So you no longer have to avoid updates (potentially dangerous from a security standpoint), or redo them all from scratch every few weeks, which is a pain in the proverbial for many web developers. Very cool.

It can be as simple as creating a new folder in your Themes directory and creating a single file called ‘style.css’ inside it. That stylesheet file must reference the original stylesheet, and it will pull the majority of layout info from there. But whatever you place inside the new custom stylesheet takes precedence and will override the original. Sweet. Here’s how it works.

The child style theme requires certain parameters. Create your blank ‘style.css’ file in the relevant folder, and paste in the following section:

/*
Theme Name:     OriginalTemplate – Child Theme

Theme URI:      http://www.whatever.com/
Description:    Child Theme based on the Default template, which is OriginalTemplate for this example
Author:         Carl Green
Author URI:     http://www.gystservices.com/linktoyoursiteifyouwantit
Template:       OriginalTemplate
Version:        1.0.0
*/
@import url(“../responsive/style.css”);
/* =Theme customization starts here
——————————————————- */
.site-description {color:#ffffff; font-size: 1.2em;}

Modify the above to suit your own situation and need. The last line is optional and can be removed. It is there for demonstration purposes only.

The most important items above are ‘Template’ and ‘@import url’. Both are case sensitive. Get it right or your site will break. The first is the reference to the Parent template. The second is a reference to the style.css file within the folder structure of that template. The other items are mainly informational, except the part below the ‘theme customization starts here’ line. That’s where it gets interesting.

The original template had the attribute site-description set in CSS as a mid-gray. This did not fit my needs, so I changed the color and size to make the text stand out more for this child theme. See? Easy.

Once you have set up the folder structure and file on your site, go to Themes. You should see a new entry there, which uses the name you set in your style sheet as ‘Theme Name’. From there, you should be able to figure it out as you would any other theme, and you can always fall back to the original in case of emergency. Preview, configure and Activate. Again, it’s as easy as that.

You can go down a rabbit hole with this and change everything about your original template. Depending on how complex the original is, that will be more or less difficult, of course. The pattern to follow always remains the same. Any file that needs to be changed in the original template should instead be copied into the child folder, using the same file and folder names and directory paths. You customize the copy in the Child folder and leave the original untouched. As long as they match (and remember they are case sensitive), the child theme will use your customizations instead of the originals.

One caveat, if you modify some of the deeper functionality within your chosen template, for example the underlying coding or PHP, then you will not benefit from any security patches to the original template, as your customizations will override the update. This is unlikely to affect anyone, but I would be remiss if I did not address the possibility.

For our purposes, we just found an easy way to make sweeping changes to a web site without having them overridden every time the site automatically updates itself. Isn’t that grand?