jQuery issue and wp_enqueue_script

Question

Best practise while developing a WordPress theme is to always use the jquery included in WP. So deregister it and use a cdn hosted version should be avoided.

This is a required practise, e.g. to include themes in wordpress repository and also some famous themes marketplaces (like themeforest) at this time do not accept themes that use a cdn hosted version of jQuery.

After that, your code:

wp_enqueue_script('jquery-cycle',  TEMPLATE_PATH . '/js/jquery.cycle.all.js', array('jquery'), null );

is a bit wrong, because TEMPLATE_PATH return the path of the theme, but wp_enqueue_script need the url. Another problem is that wp_enqueue_script should be called using the wp_enqueue_scripts action hook (admin_enqueue_scripts for backed). See here

So you should replace previous code with:

add_action('wp_enqueue_script', 'enqueue_my_scripts');

function enqueue_my_scripts() {
  wp_enqueue_script('jquery-cycle',  get_template_directory_uri() . '/js/jquery.cycle.all.js', array('jquery'), null );
}

Note how I’ve used the add_action function to hook into wp_enqueue_script action and how inside the function I’ve used get_template_directory_uri function to retrieve the url of the theme root folder.

See here docs for add_action, here docs for the wp_enqueue_script hook and here docs for get_template_directory_uri.

From codex, in the wp_enqueue_script docs page (link) you can read

The jQuery library included with WordPress is set to the noConflict()
mode (see wp-includes/js/jquery/jquery.js). This is to prevent
compatibility problems with other JavaScript libraries that WordPress
can link.

So every script that use jquery in wordpress must be wrapped in one of the noConflict wrappers. For example, if you want ot use this code (example taken from jquery cycle docs):

$('#shuffle').cycle({ 
    fx:     'shuffle', 
    easing: 'easeOutBack', 
    delay:  -4000 
})

you need to wrap it with noConflict wrapper, so it should be:

jQuery(document).ready(function($) {

    $('#shuffle').cycle({ 
        fx:     'shuffle', 
        easing: 'easeOutBack', 
        delay:  -4000 
    })

});

Probably in your code you have used, the $ jQuery shortcut directly and for this reason it doesn’t work.

Related Posts: