Child Theme – it’s easy! and necessary

If you are building a serious WordPress site, it’s likely you have bought a good theme, either because it looks good, or is easy to use or both. I’m a fan of Enfold, I like the visual page builder than the others I’ve seen, and I know that handing it off to clients who don’t spend their days on Stack Overflow evaluating code snippets.

Your theme, if it’s good, will be getting updated from time to time, and you want to protect whatever customization you make to the theme. Therefore, a child theme is essential. Luckily, it’s so friggin easy.

Part One, super easy:

Steps (I do this in my sleep now for new projects):

  • get set up with FTP access to your site
  • make sure your parent theme is there, and note the name of the folder it is in. The folder name is important here not the name in the heading of the stylesheet.
  • in the wp-content > themes folder, create a new folder for your child theme. I usually name it for the client and the year, so we can track how old it gets, so something like “clientname2016”
  • In that folder create two files: “styles.css” and “functions.php”

Put a header in the style.css file that looks like this. It needs a minimum of 2 things: the child theme name, and the template (parent) theme name, but if can have more lines in it (see below).

 /* 
Theme Name: Client Name 2016 
Template: twentyfifteen 
*/ 

Put this in the functions.php file:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

} 

Now you can go back to your WP Admin dashboard and activate the child theme you made. You can, of course, but in a .png as a preview for your themes page, and of course take off and running with your customizations.

Part Two, get off and running…

The child theme allows you to make modifications to your theme without being affected when you update the parent theme. Adding CSS to that styles.css file will override parent theme styles, and functions added to that functions theme will be added to the parent functions used in the site.

Furthermore, files you add to the child theme folder will replace the ones in the parent. For example, if you want to customize the header.php you can copy the one in the parent, and paste it in the child theme in the same relative position. Feel free to edit the file, changing php and html code as you wish. More complicated themes often have various template parts or files in subfolders, and once you identify one you need to modify, set up the same structure in your child. Say, in a folder called “includes” there is one called “helper-main-menu.php”. Simply create a folder in your child theme called includes, and paste that file in it, then hack away!

Leave a Reply

Your email address will not be published. Required fields are marked *