How to tweak your theme – the right way

You’ve found a theme you like and want to customize it to make it unique to you. Before you do, you need to know that when you install an update for your theme, you’re at risk of losing the changes you made to your theme’s files.

Instead of editing your theme’s files directly, you need to make a child theme.

A child theme is a theme that gets everything from the parent theme – functions, styles, everything – except for the files the child theme 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.

Don’t use the built-in editor in WordPress (Appearance > Editor) to edit code. For one, you’re editing your theme files directly, and you need to use a child theme to keep your changes safe when there’s an update. But if you’re editing PHP files, you run the risk of breaking your site. And when you break your site through the Editor, you’re usually also unable to get back into the Editor to fix it. It’s much safer to use FTP to access your files. That way, you can quickly restore your files if anything breaks.

If you only want to add some custom CSS

If you only want to add some CSS, you can use the field Additional CSS at the bottom of the customizer (Appearance > Customize).

If you use a Genesis child theme

If you use Genesis, they say you can directly edit the child theme as updates are always to the framework and not to the child theme – BUT this is only for the Genesis child themes by StudioPress. For any other child themes, it’s best to keep your changes separate, because theme creators do occasionally update Genesis child themes.

If the theme you use is already a child theme, you can’t create a grandchild theme. There are workarounds, such as creating a plugin for the “grandchild theme”, or adding a custom file so you only need to re-add the small bit of code that includes your custom file into the child theme if it’s gone after an update.

How to create a child theme – with a plugin

You can use the One-Click Child Theme plugin to quickly create your child theme, but since you’ll be editing code in your child theme you might as well skip the plugin and create the child theme yourself. If you do use the plugin, I’d remove it after use – no need to keep it around after your child theme is created.

How to create a child theme – with code

To create a child theme, create a new directory in your themes directory. It’s common practice 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 creator).

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

Don’t know where to start with tweaking your theme? Sign up for my free Brand Strategy Workbook below to learn how to pick colors and fonts for your brand, then use those colors and fonts on your site!

Also 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.