Question

I’m running into a strange issue. The code below loads both the WP jQuery library and my own JS file. I clicked the path and they load the file. They are both loading at the bottom of the page (above ) and the jQuery library is before my file.

I’m using the Date Picker from jQuery UI but it won’t load. Does jQuery need to be up top? If so, How can I get it in head? I tried overriding $in_footer with no luck.

I am new to creating plugins so am I missing something completely?

Any help would be appreciated.

<?php
 add_action('admin_init', 'ps_events_admin_init');
 add_action('admin_menu', 'ps_events_admin_menu'); 

 function ps_events_admin_init(){
    wp_register_script('ps-events-script', plugins_url('/js/psevents.js', __FILE__)); 
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_script('ps-events-script');  
 }

 function ps_events_admin(){        
    include('psevents-admin_view.php');
 } 

 function ps_events_admin_menu(){  
     add_menu_page("PS Events", "PS Events", 1, "PS Events", "ps_events_admin");  
 }
 ?>

HTML output

 <script type='text/javascript' src='http://localhost:8888/mysite/wp-admin/load-scripts.php?c=1&amp;load%5B%5D=admin-bar,hoverIntent,common,jquery-ui-core,jquery-ui-datepicker,jquery-ui-widget,jquery-ui-position,wp-pointer&amp;ver=3.5.1'></script>
 <script type='text/javascript' src='http://localhost:8888/mysite/wp-content/plugins/psevents/js/psevents.js?ver=3.5.1'></script>
 </body>

Answer 1

You should load jQuery before your javascript files

 function ps_events_admin_init(){
    wp_register_script('ps-events-script', plugins_url('/js/psevents.js', __FILE__)); 
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_script('ps-events-script');  
 }

Note: Since you’re using the jQuery bundled with WordPress, jQuery is loaded in noConflict mode. USe jQuery instead of $.

Or use this alternative:

jQuery(document).ready(function($){
//use $ here
});