The importance of “child themes” and how to set one up

Using child themes allows you to make an adjustment to your WordPress template while also being able to run updates on your template without losing any changes. If you were to make any changes to the original code of your template and save over the “parent file”, the next time you downloaded an update for your template, all your changes would be lost. A child theme is a separate file that you can use to customize parts of your template without overriding the original code. It is almost the same idea as an adjustment layer in Photoshop as your original artwork is always available.¬†And while the functionality of child theming is a benefit within it self, the other benefit of using a child theme is the simplicity in which it takes to set up.

Steps for setting up a child theme

  • Find the theme file for your template within wp-content/themes and create a new folder with the same title as your theme folder the extension “-child” at the end of the of it.
  • Create a new file in Sublime named style.css and save it in the new folder.
  • At the start of the style.css file, copy and past the following code while also updating the sections in bold to be consistent with the information from your parent theme:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/
  • Start a second file in Sublime and call it functions.php and save it in the -child folder as well
  • Inside functions.php copy and paste the following code
<?php

function theme_enqueue_styles() {

$parent_style = 'parent-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 )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
  • Now you are ready to start customizing your theme without worrying about breaking the original code. Open the style.css document and you can modify any section of your site by identifying the class that supports that section, typing it into your document and applying any changes. For example on this site, I put a red background around the title of the site by adding the following code to my child theme.

.site-branding {
background-color: red;
}

  • The last step to apply the theme to your website is to use your FTP client to upload your new child theme file to your -child folder.

If you are like me and accidentally save over the parent theme style.css, don’t freak out. All you have to do is download the file from the original parent theme provider, and re-upload it. All your original styling should be restored.

For a better example of child theming, check back to this site in a few months when my design portfolio is launched using an existing template with custom child theming.

 

One Comment

  • Great post, Ryan! Love the code snippets. If you take a look at the post in the backend, you’ll see I added some code around the snippets that format it a little differently on the front end. It’s a pretty cool way to tell the reader “this is something different” than what they’re reading.

Leave a Reply

Your email address will not be published.