how do i use wp_enqueue_script?

Question

OK, so this is in my functions.php file: (the following is the edited version to utilize cool's answer below. I'm leaving the original afterward:

function mdg_setup_scripts() {
  wp_register_script( 'hoverIntent', get_bloginfo('template_url').'/js-custom/hoverIntent.js', array( 'jquery' ));
  wp_enqueue_script( 'hoverIntent' );
  wp_register_script( 'mdMenuAnimation', get_bloginfo('template_url').'/js-custom/mdMenuAnimation.js', array( 'jquery' ));
  wp_enqueue_script( 'mdMenuAnimation' );
}
add_action( 'wp_enqueue_scripts', 'mdg_setup_scripts' );

Here's what I originally had:

function mdg_setup_scripts() {
  wp_register_script( 'hoverIntent',
    get_bloginfo( 'template_url' ) . '/js/hoverIntent.js',
    array( 'jquery' ),
    false,
    true );
  wp_register_script( 'mdMenuAnimation',
    get_bloginfo('template_url') . '/js/mdMenuAnimation.js',
    array( 'jquery', 'hoverIntent' ),
    false,
    false );
  if (!is_admin()) {
    wp_enqueue_script( 'mdMenuAnimation' );
  }
}
add_action( 'init', 'mdg_setup_scripts' );

The js files are present in the indicated folder. But no JavaScript at all is loading on the front end. I'm doing something wrong, but what? Do I need to register jquery (I thought WP had jquery in it, though)? Do I need to separate the enqueue call? Do I need to add something to my header.php?

Note: I apologize it took me a week to put more here, I had to migrate the server it was on and look for a job in the mean time. — The E
– The E, Commented Jun 4, 2012 at 14:16

cool · Accepted Answer · 2012-05-26 17:13:56Z

4

You dont need to add jquery. If it is not added, and if your custom script depends on it (like you wrote in code) it will be added by wordpress. This code will work (i just tested it) but..

Instead of this:

if (!is_admin()) {
    wp_enqueue_script( 'mdMenuAnimation' );
}

wordpress recomed that you use hooks:

Wordpress-codex: Use the wp_enqueue_scripts action to call this function, or admin_enqueue_scripts to call it on the admin side.

So it should be something like this:

function my_scripts_method() {
   wp_register_script( 'somehover', get_bloginfo('template_url').'/js-custom/hoverIntent.js', array( 'jquery' ));
   wp_enqueue_script( 'somehover' );
}  

add_action('wp_enqueue_scripts', 'my_scripts_method');

Wordpress-codex: by using the wp_enqueue_scripts hook (instead of the init hook which many articles reference), we avoid registering the alternate jQuery on admin pages, which will cause post editing (amongst other things) to break after upgrades often.

answered May 26, 2012 at 17:13

cool

3,5453 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

The E Over a year ago

OK, but even when I use that format, the script never gets loaded in the front end and the actions in mdMenuAnimation.js never take place

Collectives™ on Stack Overflow

how do i use wp_enqueue_script?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related