How to Customize a WordPress Theme

So you just installed a nice template you want to use for your website, but of course you want to make some changes. This is how to customize a WordPress theme the right way.

Customizing a WordPress Theme

• 1st rule: You do not modify the original theme directly.
• 2nd rule: You DO NOT talk about FIGHT CLUB. I mean, see 1st rule…

You never want to modify the original theme directly because those changes will be lost when updating the theme after the author makes his own changes. Also, keeping the original theme is useful if you ever need to ‘roll back’ your changes.

The proper way to do this in WordPress is to ‘fork’ a child theme from the original theme (which can now be called the parent theme). The child theme inherits all the properties of the parent theme, as well as any changes or additions you make.

How to create a child theme?

The simplest way would be to install a plugin that will do it for you, such as the Orbisius Child Theme Creator.

If you want to do it manually, all we have to do is create a new theme folder with a proper style.css file in it. Let’s create a child theme based off the ‘twentythirteen’ WordPress template.

1. Create a new theme folder in the /wp-content/themes/ directory, such as ‘twentythirteen-child’.
2. In that folder create a style.css file with the following minimum info.

/*
Theme Name:     Twenty Thirteen Child Theme
Template:       twentythirteen
*/
@import url("../twentythirteen/style.css");

That’s it! The Theme Name is the unique identifier, the Template is the directory name of the parent theme where WordPress can find template files (header.php, index.php, etc), and the import url tells WordPress where to inherit the style sheet.

Now in your WordPress admin go to Appearance->Themes and select the ‘Twenty Thirteen Child Theme’. It will look exactly like the parent theme because we haven’t made any changes yet.

Customizing the style

This is the easiest part. If we want to change something in the style sheet all we need to do is add the changes to the child theme’s style.css file. Most users will only need to change the style sheet to tweak their WordPress theme. Let’s quickly change the default font size in the child theme.

/*
Theme Name:     Twenty Thirteen Child Theme
Template:       twentythirteen
*/
@import url("../twentythirteen/style.css");

html {
    font-size: 16px;
}

Save the changes and now reloading the child theme will show a font size of 16 pixels for all elements that inherit the html attribute. Nice! The child theme style definitions take precedence over the parent theme. Repeat for any css elements you want to change.

Just a few of the most likely things to tweak for a new theme:

• Font size
• Font family
• Font color
• Background color
• Anchor link color
• Header image
• Background image
• text alignment
• image padding

Pro tip: If you want to change an element in your child theme, right click on the element in a browser and select Inspect Element (many browsers support this feature by default). This will display a bottom window pane with the html code in the left pane and the matching css for that element in the right pane. You can click on the items in either pane to change the values just for that browser window. It’s useful for testing different values before committing it to your style.css file.

Customizing the template files

This is a little more advanced, but if you want to make changes to a template file, you must copy the template file from the parent theme into the child theme. For instance if you wanted to change the header.php code, copy it into the child theme folder and make the php code changes there. Any template files in the child folder will be used in place of the parent template files*.

* The exception is the functions.php template file.

Customizing the functions.php file

This is definitely more advanced. Unlike other template files, WordPress will first load the child theme’s functions.php file and then the parent theme’s functions.php file. It makes it easy when you want to add new functions yourself, but if you want to modify a function declared in the parent theme it can get tricky.

If you’re REALLY lucky, the theme author will have used the function_exists() code around his functions.

/* from parent theme functions.php */
if ( !function_exists('do_something')) :
 function do_something() {
    /* does some stuff */
 }
endif;

If you see the function_exists() code used, you can copy that function code to your child theme’s functions.php and change what you want. WordPress will find the function in the child theme’s functions.php first, and won’t try to define it again in the parent theme’s functions.php. Make sure to give the theme author an extra star for making it so easy!

/* add to child theme functions.php */
 function do_something() {
    /* child theme does some stuff */
    /* parent definition of do_something won't be used */
 }

Unfortunately, this is RARELY the case, so we get into using some hooks instead. For this example, we want WordPress to use a child theme function instead of the following parent theme function.

/* from parent theme functions.php */
function parent_theme_setup() {
  /* does some stuff */
}
add_action('after_setup_theme','parent_theme_setup');

Functions are connected through WordPress through hooks like add_action() or add_filter(). In this case, WordPress hooks the function parent_theme_setup() to its internal function after_theme_setup(). We want to unhook that parent function and hook in our child theme’s function to be used instead.

/* add to child theme functions.php */

/* unhook parent function */
function undo_parent_setup_theme_hook($length) {
        remove_action('after_setup_theme', 'parent_theme_setup');
}
add_action('after_setup_theme','undo_parent_setup_theme_hook');

/* hook the child function instead */
function child_theme_setup() {
  /* does some new stuff */
}
add_action('after_setup_theme','child_theme_setup');

You might be wondering “Why not just call remove_action() directly instead of using a hook?” That’s a good question. The reason is because the child theme functions.php is loaded before the parent theme functions.php, so we can’t remove an action that hasn’t been loaded yet. We have to attach it to the same WordPress hook (in this case ‘after_setup_theme’) so it’s all done properly.