I want to enqueue a .js file to my child theme

Question

I tried to enqueue a custom .js file in my child theme directory.

In the functions.php of my child theme I find the following code

/* After this. you can override Accessible Zen's pluggable functions or add your own.
 * Remember, do your best to stay accessible! :)
 *
 */
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

where only this part was implemented by me and is supposed to load my custom.script.js from the js/ folder

wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );

Unfortunately it doesn't do so, can anybody help?

*Update 2

The Code looks now like this and it works, it did not work when I just added the function to the other add_action. Thanks everybody for the help! Still I wonder if there isnt a way to cut this code a little bit.

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

/*add my custom jquery script*/
add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom-script.js',
    array( 'jquery' )
);
        }

What is this line for ?

wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

Is it necessary?

Answer 1

Here's a working example:

add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom_script.js',
    array( 'jquery' )
);
        }

Or like this which apparently loads faster:

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Source http://codex.wordpress.org/Function_Reference/wp_enqueue_script

get_template_directory_uri() will only work in a parent theme.

Answer 2

Check your handles! The script can fail to load if you pick a handle that has been used elsewhere. If all looks correct with no errors but no script load, check the installation for something else using the same handle.

In my case, as I'm extending a parent via a child theme, I (stupidly in hindsight!) stuck with the same naming convention of the parent. Lesson learnt!

Answer 3

I usually make it like that:

Go to the child theme

1. create js folder inside child theme
2. create script.js file inside js folder

and then paste this code inside script.js file:

add_action( 'wp_enqueue_scripts', 'custom_scripts', 10 );
function custom_scripts() {
    wp_enqueue_script('custom_javascript', get_stylesheet_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true );
}