Wordpress - How to include jQuery and JavaScript files correctly?

First rule of thumb: do not deregister core-bundled scripts and replace with other versions, unless you are absolutely certain that no Theme, Plugins, or core itself will break due to the version change. Really, unless you absolutely need an alternate version of a core-bundled script, just use what is bundled with core.

Second, I strongly recommend hooking into wp_enqueue_scripts for script registering and enqueueing, rather than init. (It works at init, but from a play-nicely-with-others perspective, it's best to use the most semantically correct hook.)

Third, to enqueue your own custom scripts, you use the same methods as above:

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

Just add whatever scripts you need to enqueue.


Hope this helps, look up the codex for wp_enqueue_scripts for more information.

  1. Dont use init to enqueue. Use wp_enqueue_scripts for front-end stuff and admin_enqueue_scripts for admin side. You can use init to register scripts though.
  2. The hook wp_enqueue_scripts only fires on the front-end (and not on the log-in page) - so you don't have to check is_admin().
  3. Unless you have a specific reason to do otherwise, I would suggest registering and queuing scripts using functions.php for themes or in a plug-in otherwise. You simply put:

     function myprefix_load_scripts() {
       // Load scripts here
     }
     add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );
    
  4. If the aim is to enqueue a script when a shortcode is used, you may wish to use wp_enqueue_script in the shortcode callback to queue it only when needed (this will print it in the footer since 3.3).

  5. You shouldn't re-register the existing jQuery on the admin side. You may break something :D.

  6. Plug-ins should not re-register the existing jQuery.

  7. You should weigh up the pros and cons of re-registering jQuery. For instance it may break some plug-ins if you register an old version (maybe not now, but in the future...)


Fair warning: deregistering WP's packaged version of jQuery in favor of your own can cause problems, especially if you aren't extra careful to make sure that you change the version you're pointing toward whenever WP updates its version. This goes doubly for plugins, which often (or often should, at least) write their plugins for maximum compatibility with the WP version of jQuery.

That said, your first version is correct - it's hooked to wp_enqueue_scripts. Your second function is hooked to init, which may be why it's not working properly.

Add your own scripts in a similar manner:

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

I'm assuming here that you are loading scripts from a js directory in your current theme directory; change the URI parameter if that's not true. The third parameter array( 'jquery' ) says that bbg-scripts depends on jquery, and so should be loaded afterward. See https://codex.wordpress.org/Function_Reference/wp_enqueue_script for more details.