Modifying a WordPress theme with a child theme

The recommended way to modify a WordPress theme is to use a child theme. This allows redefining all features of the parent theme without manually changing the theme. This post describes why you might want to do this and how to do it.

Why would I want a child theme

One of the primary benefits of creating a child theme is so that you can modify a theme in a way that the default theme options don’t provide. Many themes by default only allow a small number of configuration options which can limit what you can change.

By creating a child theme you are able to change any part of the original theme by overriding the styling and features. This would be possible if you customized the main theme however that would mean you wouldn’t get theme updates. By using a child theme the parent theme is easily updatable as updates won’t interfere with the child theme.

Please note this post doesn’t discuss the potential legality of whether you are allowed to modify a theme. Please check the licence of your distributed theme before doing this. Many themes will let you use child themes to modify your theme but you should check.

How to create a child theme

The first step in creating a child theme is creating the folder to store the theme. You will want to create this in your theme folder located in wordpress_root_directory/wp-content/themes/.

Here it is recommended you create a folder named the same as your theme with the suffix -child. This means if your theme was called super-cool-blue-theme you will want to name it super-cool-blue-theme-child.

Once this has been done you need to create a file in this directory called style.css. This file holds the primary information about your new child theme. An example style.css is reproduced below.

/*
Theme Name: Super Cool Blue Theme child
Theme URI:
Author: Chewett
Author URI: https://chewett.co.uk
Template: super-cool-blue-theme
Description: changes to the super cool blue theme
Version: 1.0.0
License: Some licence
License URI: Some URL
*/

The only important thing to change from the above is the Template field. This must be set to the name of your parent theme. In our case I have set it to super-cool-blue-theme as this is the name of the parent theme I have made up.

The other elements are used by WordPress to hold the details of what the theme is. If you are only making the modifications for yourself the contents are not massively important.

The final step for a basic child template is adding a file called functions.php. The recommended example from WordPress from states the content should be:

<?php
function my_theme_enqueue_styles() {
  $parent_style = 'super-cool-blue-theme-style';

  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
  );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

The main thing to change in this script is the variable $parent_style which needs to be set to the name of your parent theme plus the text -style at the end.

Once these two files are in place you should be able to select your child theme in WordPress. At this point, the child theme should exactly mimic the parent theme.

Making simple overrides

There are a couple ways to make simple overrides to the WordPress theme. The first is to add your own CSS styling to the style.css file. Any CSS you place here will be loaded and will override CSS in the parent theme. This can let you modify the CSS that the parent theme uses to customize your theme.

The other way to change the theme is to modify the functions.php file. This file is loaded before the parent theme so you can define override functions. Some themes are “pluggable” which means that before defining any of the functions they use, they check if they are defined as shown below:

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

By doing this any child theme can define this function and the parent theme will use the child themes function. If your theme supports this you can use this behaviour to define your own custom functions for some of their scripts.

If your theme doesn’t support this, or you want to add complementary behaviour to the theme you can define a function to run before or after the parent themes.

function fixImageSize() {
  add_image_size( 'custom-override', 200, 200, true )
}

add_action( 'after_setup_theme', 'fixImageSize', 15);

The function add_action allows you to specify a function to run when and what priority. By default, actions are added at level 10 and therefore by defining the above function at level 15 it will run after anything defined in the parent theme at level 10. This allows me to run my custom setup function once all the defaults have been set by the parent theme.

By using these two methods you are able to override any part of a wordpress theme while keeping the major parts of the parent theme.

For full information I recommend reading the wordpress codex on child themes.