Do you want to learn how to customize a child theme on your WordPress website? If so, keep reading – it’s time for a quick post about WordPress theme development with our latest How-To tutorial!
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 when you want to customize 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). However, 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 for Child Themes
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().
In conclusion, 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 about WordPress development!
