Calling a WordPress Custom JavaScript file

Question

// Creates the function
function my_custom_javascript()
{ 
  // Loads the script into the function
  wp_enqueue_scripts('my_custom_javascript', plugin_dir_url(__FILE__) . '/assets/js/custom.js', array('jquery')); 
}
// calls the function where the script is located
add_action('wp_enqueue_scripts', 'my_custom_javascript'); 

I think this is written right. I am calling this script in the functions.php file in my theme but it's not loading, so I was hoping I could get some suggestions.

Answer 1

You're using the function wp_enqueue_scripts() where you should be using wp_enqueue_script().

function my_custom_javascript(){ // Creates the function
    wp_enqueue_script(
        'my_custom_javascript',
        plugin_dir_url(__FILE__) . '/assets/js/custom.js',
        array('jquery')
    ); // Loads the script into the function
}
add_action('wp_enqueue_scripts', 'my_custom_javascript'); 
// calls the function where the script is located

wp_enqueue_script() enqueues the script; wp_enqueue_scripts() is a wrapper for do_action( 'wp_enqueue_scripts' ).

Answer 2

function my_custom_javascript() {
    wp_enqueue_scripts('my_custom_javascript', plugin_dir_url(__FILE__) . 'assets/js/custom.js', array('jquery'));
add_action('wp_enqueue_scripts', 'my_custom_javascript'); 

** You don't need to use trailing slash before assets/js/custom.js because plugin_dir_url outputs it. Instead you can use plugins_url and you should use wp_enqueue_script NOT wp_enqueue_scripts while enqueuing file

I think this will help you: plugins_url vs plugin_dir_url

Answer 3

To cue your script you want to use wp_enqueue_script() instead of wp_enqueue_scripts() like so.

function my_custom_javascript() {
    wp_enqueue_script('my_custom_javascript', plugin_dir_url(__FILE__) . 'assets/js/custom.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'my_custom_javascript'); 

You don't need to add the / slash before assets/js/custom.js because plugin_dir_url uses trailingslashit() to include it.

If you really want to add the / yourself, you use plugins_url() which gets called anyway minus the trailingslashit()