How to tweak your theme – the right way

So you’ve found a theme that’s close to what you want for your site. Close, but not quite there. I’m not going to tell you what tweaks to make or how to make them. This is actually about the step BEFORE you make any tweaks to your theme. Whether you’ve got yourself a free or premium theme, chances are, there’ll be updates for them, some time. Could be tomorrow, could be a few months down the line. And it could be security updates, or added features. Doesn’t really matter though. The thing is, when your theme is updated, some of its files will be overwritten, including any changes you made to customize your theme.

You could lose changes you’ve made when your theme updates.

You could not update your theme, but do you really want to take the risk of having security issues? Or what about that shiny new feature that’s now added to the theme? You’d love to use it!

There’s a solution: use a child theme.

A child theme is a theme that gets everything from the parent theme – functions, styles, everything – except for the files the childtheme has itself. You can copy the file from the parent theme to the child theme, edit away, and still get updates to the parent theme without losing your modifications.

How to create a child theme

To create a child theme, create a new directory in your themes directory. It’s common practise to name it the same as the parent theme, with “-child” added to the end, but you can call it whatever you want. In the child theme directory, create a file called style.css. The file needs some lines at the top. At the very least, you need to add these lines:

/*
 Theme Name: (Name of your child theme, e.g. Twenty Twelve Child)
 Template: (directory name of the parent theme, e.g. twentytwelve)
 */

You could also add a description, author info, version number and more, but it’s not necessary. If you want to make style changes, either copy the css from the parent theme to your child theme’s style.css file, or include the styles from the parent theme using a css import rule:

@import url("../twentytwelve/style.css");

After including the styles from the parent theme, add your tweaks. If you copy the css from the parent theme into your child theme’s style.css file, I recommend adding your tweaks to the end of the file, to keep them all together, easy to find, to keep them safe if you ever need to overwrite the styles from the parent theme with an updated version.

Modifying functions

If you want to modify functionality, it’s good to know that a functions.php file in the child theme will not override the functions.php file from the parent theme. Instead, both files are loaded. The child theme’s functions.php is loaded right before the file from the parent theme. If the parent theme is coded properly, you can make changes to any function simply by having it in the child theme. If it exists in the child theme, it will override the function from the parent theme. When it doesn’t work, chances are, you will have to make a small change to the parent theme.

Find the function you want to override in the parent theme, and add an if statement around it:

if ( ! function_exists( 'function_name' ) ) {
    function function_name() {
        // Do something.
    }
}

This will determine if the function already exists, and if it doesn’t exist, it defines the function. Since the function from your child theme is loaded before the one in the parent theme, the function already exists and will not be defined by the parent theme, instead using the tweaked function in your child theme.

This should be the only change you make to the parent theme, and will need to be done again when the parent theme is updated (if this is not already added by the theme author).

Once you’ve made your changes, activate your child theme by going to your WordPress dashboard, go to Appearance > Themes. Your child theme is listed here, click Activate.

Have you made changes to your theme? Did you use a child theme?

P.S. Consider these tweaks: adding opt-in forms anywhere on your site, how to add Google Fonts to your website and why you shouldn’t justify text on your website.