Contact Us

How to Customize a Child Theme

Do you want to learn how to customize a child theme on your WordPress website? Here’s our How-To tutorial!

Time for a quick post and tip about WordPress theme development!

Customize a Child Theme Tutorial

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.

Stylesheets and Javascript

Many theme developers include other stylesheets or javascript into their themes for a variety of reasons. They decrease loading times for style.css, general organization, and maintain an intuitive filesystem. Plus 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. Replace get_template_directory_uri() with get_stylesheet_directory_uri(). If the set-up is correct, your child theme’s style.css is in use. 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 a child theme to your heart’s content without having to touch the parent. And/or worry about upgrade compatibility in the future.

Want to read more? Check out all our blog posts!

How can we help you?