For the last few weeks I seem to have spent a lot of time fixing people’s ‘self-build’ WordPress websites  and sorting out problems created by other ‘developers’.  “Fixing what, Aaron?” I hear you cry. Well all sorts of things but the main issue is that clients can’t update the theme because something in the theme files has stopped working, or the client wants to get a function or bug patch that the theme developer has fixed in the latest update.

Updating a theme is normally a simple task. In fact anyone with a basic understanding of WordPress can do it in less than 5 minutes. Unfortunately,  there seems to have been a surge of  both ‘developers’ and non-developers who have merrily gone ahead and made direct changes to the theme files  to give them the look and feel they want. This is where the problems start; if they’ve just made a few CSS changes, fixing it might not be a big deal. It all depends on how they did it – did they include a new CSS file? Did they add it inline or just somewhere in the “core” theme CSS?

Building a WordPress child theme will save you all the heartache of having to fix these issues. You still get all the updates from the theme developer but you don’t lose the functions or styles.

As I said, I seem to have had an influx of requests to fix this issue in  the last few weeks. So, in the spirit of ‘good will to all’, I thought I’d share a few of my best-kept secrets with you.

The basics

Step one: add a new file in the “wp-content/themes” directory, for this demo let’s call it ‘AGChild.’

Step two: now we need to create a style.css file and add the code below to it (edit it where you see fit) and save it to the ‘AGChild’ folder.

/*
Theme Name: The name of your child theme here
Author: Aaron @ AG Design Studio
Template: your-theme-directory-name-here
*/

/* Below we are calling the main theme CSS file, This must be at the top of the new CSS file so when we add new CSS styles we wont get over written */

@import url("../theme-directory-name-here/style.css"); 

/* Start adding your code below the line
-------------------------------------------------------------- */

That will give you a very basic child theme.

If you need to add some new functions to the new child theme, add a functions.php file to the child theme folder.

Including Files in Your Child Theme

When you start including files that reside within your child theme’s directory structure, you must use “get_stylesheet_directory()”. This is because the parent templates style.css is replaced by your child theme’s style.css.

require_once( get_stylesheet_directory() . '/filename.php' );

Speed up loading times

If you’re looking to build heavily on to a child theme then I recommend you dig out that new functions.php file from the child theme and add the code below to it.

// Faster way to load your CSS then @import 
add_action( 'wp_enqueue_scripts', 'AG_child_theme_css' );
function AG_child_theme_css() {
    wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}
//End CSS

Then remove the @import from the style.css file from the child theme, this will help speed up the loading times on the stylesheets.

If you have any tips you would like to share post them in the comments and I will add them to this list on here.