trouble enqueueing built-in jquery-ui scripts in wordpress

Question

I was able to register and enqueue my own downloads of jquery-ui plugins with errors all over the console about it. The jquery-ui-core I couldnt get to load using the same method for some reason.

The console also complained that my $ was not a function for the $(document).ready(function) initial jquery wrapper. I get this even though wp is calling in its own version of jquery built into the core.

Hunting the docs shows that wp also includes a huge assortment of jquery-ui scripts. So I went that route but they are not being called using their handle.

what am I doing wrong?

        wp_enqueue_script('jquery-core');
        //wp_register_script( 'jquery-core', get_template_directory_uri() . '/js/jquery.ui.core.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-core');
        //wp_register_script( 'jquery-draggable', get_template_directory_uri() . '/js/jquery.ui.draggable.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-draggable');
        //wp_register_script( 'jquery-droppable', get_template_directory_uri() . '/js/jquery.ui.droppable.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-droppable');
       // wp_register_script( 'jquery-mouse', get_template_directory_uri() . '/js/jquery.ui.mouse.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-mouse');
       // wp_register_script( 'jquery-sortable', get_template_directory_uri() . '/js/jquery.ui.sortable.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-sortable');
        //wp_register_script( 'jquery-widget', get_template_directory_uri() . '/js/jquery.ui.widget.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-widget');

currently I have my register_script function call commented out that did work when I added the enqueue_script to call it by its handle, but the console was throwing me errors about these files (downloaded from jquery-ui) I figure its bc jquery is not being recognized, hence the error about $ not being defined.

if I call the scripts using wp_register_script first it does in fact load, but throws a lot of console errors pointing to the jquery-ui libraries. Finally the last error will actually be my code saying $(...).accordion(); is not a function. I pulled this code from a jquery-ui demo. I can unit test my jquery-ui build in jsfiddle and it all works great. I didnt manually call jquery-ui libraries there as they have a drop down to select it, but the html and js demo code I dropped in.

Any thoughts?

Answer 1

The error about $ not being defined is because jQuery is loaded in no conflict mode in WP.

Replace:

$(document).ready(function(){

With:

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

Also just to make sure here's your PHP inside a function with the enqueue scripts hook.

function wpse_load_js() {
   wp_enqueue_script('jquery-ui-core');
   wp_enqueue_script('jquery-ui-draggable');   
   wp_enqueue_script('jquery-ui-droppable');      
   wp_enqueue_script('jquery-ui-mouse');
   wp_enqueue_script('jquery-ui-sortable');
   wp_enqueue_script('jquery-ui-widget');
}
add_action( 'wp_enqueue_scripts', 'wpse_load_js' );