enqueue script won't work (enqueue style does work)

Question

To include a CSS file and a JS file I added to functions.php:

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'behavior', get_script_directory_uri() . '/behavior.js', array(), null, true );
}

add_action( 'wp_enqueue_style', 'my_theme_enqueue_styles' );
add_action( 'wp_enqueue_script', 'my_theme_enqueue_scripts' );

After doing so, I saved and closed the editor, went back to the same directory of functions.php (this is the child theme's directory), ad created a new file, behavior.js.

In behavior.js, I added, just for testing:

alert('Hi');

I saved, went back to my site, and did full refresh, but no alert appears. Why is that?

Answer 1

You're using the wrong hook. wp_enqueue_scripts is the correct hook for both:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

But since they're the same hook you can just enqueue both files in the same callback:

function my_theme_enqueue_assets() {
    wp_enqueue_style( 'parent-style', get_parent_theme_file_uri( 'style.css' ) );
    wp_enqueue_script( 'behavior', get_theme_file_uri( 'behavior.js' ), array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

I've also used the newer get_parent_theme_file_uri() and get_theme_file_uri() functions to get the file URLs. get_parent_theme_file_uri() will get the URI for the given file inside the parent theme only, while get_theme_file_uri() will get the file from the current theme, and if it's a child theme it will fall back to the parent theme if the file doesn't exist in the child theme.

Note that these still need the path to the file inside the theme if they're in a folder, eg. get_theme_file_uri( 'path/to/file.js' );