How to customize your child…theme

Andrea Ferguson

President at AndiSites Inc.
Andi is founder and President of AndiSites Inc. She writes about website design and development, best practices, and random stuff her busy brain thinks would be useful.
Andrea Ferguson

Time for a quick post and tip about WordPress Theme development! You can ramp up the speed and effectiveness of your customizations for third-party themes by using the get_stylesheet_uri(); function in a child theme.

Designers sometimes start with an existing theme from an established resource like Woothemes, but then have multiple ways they’d like to change its style and function.   If you are a WordPress developer you have probably encountered child themes, or what WordPress.org has described as “the safest and easiest way to modify an existing theme.” Child themes allow for seamless updates to parent theme filesystems by adding another layer to the WordPress template hierarchy.

This means that modifying PHP templates in a child theme is fairly easy – essentially copying them to the child directory – once the main style.css sheet has been correctly configured (more on setting up a child in general).  But things get a tad more complicated when functions and styles exist outside of this required style.css or the PHP template files.

Many theme developers include other stylesheets or javascript into their themes for a variety of reasons – to decrease loading times for style.css, general organization, to maintain an intuitive filesystem, and of course in the case of javascript to perform client side functions in the browser.  Oftentimes, these files are called up in the theme’s functions.php file(s) by using something like:

<?php
function my_scripts_method() {
	wp_enqueue_script(
		'custom_script',
		get_template_directory_uri() . '/js/custom_script.js',
		array('jquery')
	);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

The important line being the get_template_directory_uri() which looks for the parent template directory and will always bypass the child theme. In order to load custom_script.js that you have modified or customized in the child theme js directory, you need to copy this PHP statement to your child functions.php and replace get_template_directory_uri() with get_stylesheet_directory_uri(). If all is set up correctly, your child theme’s style.css is being used – so the function will reference the the child stylesheet, and the directory it’s in for /js/custom_script.js, not the parent version.

Voila! You can now customize even more of the theme to your heart’s content without having to touch the parent and/or worry about upgrade compatibility in the future.

Back to Blog