title: Including jquery UI in Wordpress
body: <p>I have tried to get jquery-ui working with wordpress with no luck. Can someone point me in the right direction? I've dug up a ton of SO resources and blogs explaining it, but so far can't get this working. However when I include the scripts directly in the page itself I can get the datepicker to function properly. I'm trying to make the table rows draggable (and eventually droppable).</p>
  
  <p>Here is what I currently have-</p>
  
  <p>In /themes/twentysixteen/functions.php</p>
  
  <p>I followed the steps here and enqueued jquery-ui functions <a href="http://xl-websites.com/how-to-enqueue-jquery-or-jquery-ui-correctly-in-wordpress/" rel="nofollow noreferrer">Correctly enqueue jquery-ui</a>. I then added a couple of my own scripts based on the information here <a href="https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/?nhtz=b&amp;utm_expid=3606929-91.15T0nlf8TFCqo1W_BlZjGg.1&amp;utm_referrer=https%3A%2F%2Fwww.google.com%2F" rel="nofollow noreferrer">Add jquery scripts</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>/* Used to include jquery-ui scripts
  *  Taken from http://xl-websites.com/how-to-enqueue-jquery-or-jquery-ui-correctly-in-wordpress/
  *
  */
  
  function add_jquery_ui() {
          wp_enqueue_script('jquery-ui-core');
          wp_enqueue_script('jquery-ui-widget');
          wp_enqueue_script('jquery-ui-mouse');
          wp_enqueue_script('jquery-ui-accordion');
          wp_enqueue_script('jquery-ui-autocomplete');
          wp_enqueue_script('jquery-ui-slider');
          wp_enqueue_script('jquery-ui-tabs');
          wp_enqueue_script('jquery-ui-sortable');
          wp_enqueue_script('jquery-ui-draggable');
          wp_enqueue_script('jquery-ui-droppable');
          wp_enqueue_script('jquery-ui-datepicker');
          wp_enqueue_script('jquery-ui-resize');
          wp_enqueue_script('jquery-ui-dialog');
          wp_enqueue_script('jquery-ui-button');
  }
  add_action( 'wp_enqueue_scripts', 'add_jquery_ui' );
  
  function custom_js() {
          wp_enqueue_script('date', get_template_directory_uri() . '/js/date.js', array('jquery'), false, true);
          wp_enqueue_script('drag', get_template_directory_uri() . '/js/drag.js', array('jquery'), false, true);
  }
  add_action('wp_enqueue_scripts', 'custom_js');</code></pre>
  </div>
  </div>
  </p>
  
  <p>With those addded, I created the scripts in my js folder-</p>
  
  <p>/js/drag.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>(function() {
          $(".drag").draggable({
                  helper: function(event) {
                          return $('&lt;div class="drag-row"&gt;&lt;table&gt;&lt;/table&gt;&lt;/div&gt;').find('table').append($(event.target).closest('tr').clone()).end();
                  },
          });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>And /js/date.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>( function() {
          $( "#datepicker" ).datepicker();
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>In my php page I added the date id to a calendar, and a class id to the table row as targets for the jquery scripts.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Date: &lt;input type="text" id="datepicker"&gt;&lt;/p&gt;
  
          echo "&lt;div id='table'&gt;";
          echo "&lt;table class='listing'&gt;";
                  echo "&lt;thead&gt;";
                          echo "&lt;tr&gt;";
                                  echo "&lt;th&gt;&lt;b&gt;Course Name&lt;/b&gt;&lt;/th&gt;";
                                  echo "&lt;th&gt;&lt;b&gt;Fiscal Year&lt;/b&gt;&lt;/th&gt;";
                                  echo "&lt;th&gt;&lt;b&gt;Course Number&lt;/b&gt;&lt;/th&gt;";
                                  echo "&lt;th&gt;&lt;b&gt;Start Date&lt;/b&gt;&lt;/th&gt;";
                                  echo "&lt;th&gt;&lt;b&gt;End Date&lt;/b&gt;&lt;/th&gt;";
                          echo "&lt;/tr&gt;";
                  echo "&lt;/thead&gt;";
                  echo "&lt;tbody&gt;";
                          foreach($courses as $course){
                                  echo "&lt;tr class='drag'&gt;";
                                          echo "&lt;td&gt;".$course-&gt;course_name."&lt;/td&gt;";
                                          echo "&lt;td&gt;".$course-&gt;fy."&lt;/td&gt;";
                                          echo "&lt;td&gt;".$course-&gt;course_number."&lt;/td&gt;";
  
                                          $date = $course-&gt;course_date_start;
                                          $date = strtotime($date);
  
                                          if ($date){
                                                  echo "&lt;td&gt;".date("m/d/Y", $date)."&lt;/td&gt;";
                                          } else {
                                                  echo "&lt;td&gt;&lt;/td&gt;";
                                          }
  
                                          $date = $course-&gt;course_date_end;
                                          $date = strtotime($date);
  
                                          if ($date){
                                                  echo "&lt;td&gt;".date("m/d/Y", $date)."&lt;/td&gt;";
                                          } else {
                                                  echo "&lt;td&gt;&lt;/td&gt;";                                               }
                                          echo "&lt;/tr&gt;";
                          }
                  echo "&lt;/tbody&gt;";
          echo "&lt;/table&gt;";</code></pre>
  </div>
  </div>
  </p>
  
  <p>When my page loads, the scripts are all there (including jquery, I put spaces since the jquery lines are at line 350, and the jquery-ui lines are at line 500), but the ui isn't functional. Anyone have any insights?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type='text/javascript' src='##/wp-includes/js/jquery/jquery.js?ver=1.12.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'&gt;&lt;/script&gt;
  
  
  
  
  &lt;script type='text/javascript' src='##/wp-content/themes/twentysixteen/js/functions.js?ver=20160816'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/core.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/widget.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/mouse.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/accordion.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/position.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/menu.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/wp-a11y.min.js?ver=4.6.1'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
  /* &lt;![CDATA[ */
  var uiAutocompleteL10n = {"noResults":"No search results.","oneResult":"1 result found. Use up and down arrow keys to navigate.","manyResults":"%d results found. Use up and down arrow keys to navigate."};
  /* ]]&gt; */
  &lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/autocomplete.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/slider.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/tabs.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/sortable.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/draggable.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/droppable.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
  jQuery(document).ready(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Close","currentText":"Today","monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Previous","dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"dateFormat":"MM d, yy","firstDay":1,"isRTL":false});});
  &lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/resizable.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/button.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/jquery/ui/dialog.min.js?ver=1.11.4'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-content/themes/twentysixteen/js/date.js?ver=4.6.1'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-content/themes/twentysixteen/js/drag.js?ver=4.6.1'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='##/wp-includes/js/wp-embed.min.js?ver=4.6.1'&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>