Dealing with a library that depends on jQuery

Question

I am about to use the pikachoose.com library with wordpress. However, this library references jQuery, and uses the short form (using $). In WordPress documentation, it states that the short form should not be used, and instead I should use the long form to use jQuery functinality and to prevent conflict.

My problem is the library/object I am downloading is written in the short form. So how can I use it with WordPress. The documentation in WordPress states I should wrap it like this:

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

or like this:

(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
})(jQuery);

however, it is not clear on how to include the external file. Please explain with an example. Thanks.

Answer 1

First of all if you investigate PikaChoose source code, then you will see that it wraps the code with self invoking closure:

(function($) {
    // ...
})(jQuery);

It means that they use short form properly. In the same time it means that all you need to do is to enqueue jQuery and PikaChoose scripts and it will work fine. You can do it by writing your own hook for wp_enqueue_scripts action:

add_action( 'wp_enqueue_scripts', 'wpse8170_enqueue_scripts' );
function wpse8170_enqueue_scripts() {
    wp_register_script( 'pikachoose', '/path/to/pikachoose.js', array( 'jquery' ), null, true ); // register pikachoose script
    wp_enqueue_script( 'wpse8170-my-custom-js', '/path/to/my.js', array( 'pikachoose' ), null, true ); // enqueue my.js and pikachoose scripts
}

Pay attention: do not enqueue 3rd party libraries, just register it and use it as dependent library when you enqueue your custom javascript file.

Your my.js should look like this:

(function($) {
    $(document).ready(function() {
         $("#divID").PikaChoose();
    });
})(jQuery);