Search
Close this search box.
Search
Close this search box.

Customizing a WordPress Theme

Using a child theme

Ok, you got your WordPress theme that’s suited to your need, and you have to make some customizations to it. What is the correct way to do so? By using a child theme!

Never, ever, ever, ever, ever, ever, ever, hack up core theme files to make changes.

Besides screwing up what someone has worked very hard to perfect, you will lose all of your changes when you update the theme.

Always use a child theme when you want to customize an existing WordPress theme.

Create your first child theme

In this example, we’re going to create a child theme for the Twenty Thirteen default WordPress theme.

The first thing we need to do is create a new folder in our themes directory to hold the child theme.

It’s important to name the folder without any space in the name, and it’s common practive to use the name of the parent theme folder with “-child” added on the end.

So for this example, we’ll be calling our folder “twentythirteen-child”.

In the child theme folder, create a file called style.css. This is the only file required to make a child theme.

The style sheet must start with the following lines:

/*
Theme Name: NewTheme
Template: twentythirteen
*/

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

The template is the folder name of the parent theme, in this case twentythirteen. That imports all of the parent theme styles. You are then going to add more rules below it, customizing the theme.

Now we need to activate the child theme. Login to your WordPress site and go to Appearances > Themes. Find your child theme in the list of available themes and click “Activate”.

Editing The Functions.php File

Functions.php is where a theme’s main functions are typically stored. A parent theme’s functions are always loaded with the child theme, but if you need to add more custom functions to your theme then you can do so by creating a new functions.php file within your child theme folder. The new functions will be loaded right before the parent theme’s functions. Your child theme’s functions.php file should start with a php opening tag and end with a php closing tag. In between, you can add your desired php code.

<?php
// your custom functions go here
?>

How to override template files

Template files are the files which control how your WordPress site will be displayed on the web. These files draw information from your WordPress database and generate the HTML code which is sent to the web browser.

Every theme has several different template files, where every template has a specific task. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions.

In case you want to customize the HTML of a certain area of your WordPress theme, you can override template files with a child theme. This WordPress feature lets you modify the templates of a parent theme without actually editing them, so that your modifications are preserved when the parent theme is updated.

A child theme can override any parental template by simply using a file with the same name. That means when you want to override a template file, you can copy the original file from the parent theme and paste it in the child theme folder with the same file name. WordPress will then use the file of the child theme instead of the parent template. Afterwards you can edit the file in your child theme folder and make your changes.

How to override parent theme functions using pluggable functions

Pluggable functions are something you code into your parent theme, so they won’t be any use to you if you’re working with an existing parent theme that doesn’t have them.

But if you’re writing your own parent theme, maybe as a starting point for future projects, or if you’re creating your own theme framework, it’s good practice to make your functions pluggable so that you can easily override them in child themes. It’s also a good idea to look through the functions that are written into the parent theme you’re using, as many of them, including the WordPress default theme, will have pluggable functions.

To write a pluggable function, you simply enclose it in a conditional tag to check if a function with that name has already been run:

<?php
if ( ! function_exists ( 'my_function' ) ) {
    function my_function() {
        // Contents of your function here.
    }
}
?>

So if you enclose the functions in your parent theme in a conditional tag like this, WordPress will check if there is a function with the same name in your child theme that’s already been run, and if that’s the case it won’t run the function from the parent theme.

Then when you come to write a function in your child theme which you want to override the one in the parent theme, you just give it the same name as the one in the parent theme:

<?php
function my_function() {
    // Contents for your function override here.
}
?>

WordPress will run the function in the child theme first, and when it comes to the one in the parent theme, it’ll check if it already exists and because it does, it won’t run it.

Learning Resources

  • How to customize a WordPress theme: a comprehensive guide article
  • How to Build a Custom WordPress Theme from Scratch article
  • How to Widgetize a Page, Post, Header or Any Other Template in WordPress article
  • Add New Dynamic Widgets Area in Header of Your Child Theme with TwentyTwelve Parent article
  • How to Add Second Navigation Menu to WordPress Child Theme article
  • How to Create a WordPress Child Theme article
  • A Guide to Overriding Parent Theme Functions in Your Child Theme article