How to add simple jQuery script from WordPress child theme

Jacob

I am working on a theme and all the additional changes are reflected from the child theme. Currently we got a requirement to add some functionality that require some piece of codes written in jQuery. I am trying to load the jQuery file with the following.

add_action( 'wp_enqueue_scripts', 'my_custom_script' );
function my_custom_script() {
    wp_register_script(
        'child-theme-script', 
        get_template_directory_uri() . '/js/custom-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

But not luck with these piece of codes.

James

Everything looks good except the get_template_directory_uri() function. The get_template_directory_uri() will provide you the URI of the parent theme, not the child theme that you need to load the jquery script.

You have to use the get_stylesheet_directory_uri() instead of get_template_directory_uri().

add_action( 'wp_enqueue_scripts', 'my_custom_script' );
function my_custom_script() {
    wp_register_script(
        'child-theme-script', 
        get_stylesheet_directory_uri() . '/js/custom-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}