title: load jQuery UI .datepicker for a WP frontend plugin
body: <p>First, I feel like I've read the whole stack of posts in this category about a 100 times. While the title sounds like a duplicate, I really mean I've tried all solutions I read to the questions asked around up to the whole concatenate thing with WP 3.5+.</p>
  
  <p>My script works great in WP when I reference the actual jquery script &amp; url. I'm reading everywhere this is a terrible way to implement so I've been trying to use the built-in WP libraries and no-conflict wrapper. I run WP 3.6 on a barebone local InstandWP install with default twentythirteen theme and no other plugin.</p>
  
  <pre><code>\\ Works great if I use these in WP 3.6
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>As I said earlier, I'm trying to do the right thing, so I've made experiments with a number of enqueue and/or (de)register options. So far none succeeded:</p>
  
  <ul>
  <li>Concatenate_scripts = false</li>
  <li>(de)register jQuery</li>
  <li>Enqueue (with the proper jQuery hooks as referenced in the Codex)</li>
  </ul>
  
  <p>Of course I re-write the $ into jQuery and so on; but my issue seem to be up-hill, as the firebug console tells me :
      Uncaught ReferenceError: jQuery is not defined</p>
  
  <p>So here I am. My code is good outside of WP, but I can't seem to get it to use it for a front-end plugin in WP with good coding practices.</p>
  
  <pre><code>\\ Loading the JS library &amp; CSS
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/redmond/jquery-ui.min.css" /&gt;
  
  \\ Definition of the datepicker rule
  &lt;script&gt;
  $(".full_date").datepicker({
  showOn: 'button',
  buttonText: 'Here',
  dateFormat: 'DD, dd MM yy',
  altFormat: "yy-mm",
  altField: ".year-month",
  onClose: function (dateText, picker) {
      // getDate returns a js Date object
       var dateObject = $(this).datepicker("getDate");
      console.dir(dateObject);
      // Call Date object methods
      $("#date input").val(dateObject.getDate());
      $("#month input").val(dateObject.getMonth());
      $("#day input").val(dateObject.getDay());
      $("#year input").val(dateObject.getFullYear());
  }
  });
  &lt;/script&gt;
  
  \\ Some HTML
  &lt;h1&gt;Date Picker&lt;/h1&gt;
  
  &lt;form class="date-picker"&gt;
  &lt;label&gt;full date&lt;/label&gt;
  &lt;input type="text" class="full_date" value="" /&gt;
      &lt;label&gt;year month&lt;/label&gt;
  &lt;input type="text" class="year-month"/&gt;
  &lt;/form&gt;
  &lt;p id="day"&gt;Day of the week: &lt;input name="day" type="text"&gt;&lt;/input&gt; &lt;/p&gt;
  &lt;p id="month"&gt;Month: &lt;input name="month" type="text"&gt;&lt;/input&gt;&lt;/p&gt;
  &lt;p id="date"&gt;Date: &lt;input name="date" type="text"&gt;&lt;/input&gt;&lt;/p&gt;
  &lt;p id="year"&gt;Year: &lt;input name="year" type="text"&gt;&lt;/input&gt;&lt;/p&gt;
  </code></pre>
  
  <p>If that helps, I have the whole thing on <a href="http://jsfiddle.net/toutgreg/4kzEJ/" rel="nofollow">jsFiddle</a></p>
  
  <p>Pretty please, could you just help on the syntax to get the code set the right way in WP 3.6+ ?</p>
  
  <p>Thank you very much for taking the time to read through this.
  Greg</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here's the updated code. I still have an error :
      "Uncaught ReferenceError: jQuery is not defined".</p>
  
  <pre><code>&lt;?php
  add_action('wp_enqueue_scripts', 'load_my_scripts');
  
  function load_my_scripts(){
  wp_enqueue_script('jquery-ui-datepicker', '/wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js', array('jquery'));    
  wp_register_style('date-picker', plugins_url('includes/jquery-ui-1.10.3.custom.min.css',__FILE__), true);
  }
  ?&gt;
  &lt;script type="text/javascript"&gt;
  (function($) {
      $(document).ready(function($){
          $("#datepicker").datepicker();
      });
  });
  &lt;/script&gt;
  &lt;p&gt;Date: &lt;input type="text" id="datepicker" /&gt;&lt;/p&gt;
  </code></pre>
  
  <p>You can see it live here:</p>
  
  <blockquote>
    <blockquote>
      <p><a href="http://s146485761.onlinehome.fr/wp_dev/debugging-test/" rel="nofollow">http://s146485761.onlinehome.fr/wp_dev/debugging-test/</a></p>
    </blockquote>
  </blockquote>
  
  <p>The full plugin is here</p>
  
  <blockquote>
    <blockquote>
      <p><a href="http://s146485761.onlinehome.fr/wp_dev/plugin_archive.zip" rel="nofollow">http://s146485761.onlinehome.fr/wp_dev/plugin_archive.zip</a></p>
    </blockquote>
  </blockquote>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>After a good while I just realized there was nothing wrong with the code, it only needed to be placed 1 level higher in my plugin folder. I created this "bulletproof" example as a dummy plugin I figured out from there the function &amp; add_action snippets needed to be on the root of th eplugin folder.</p>
  
  <p>In case that helps anyone, here's the test code I used :</p>
  
  <pre><code>&lt;?php
     /*
     * Plugin Name: Hello World
     */
     add_filter( 'the_content', 'tfr_the_content' );
     function thisisonlyatest() {
        wp_enqueue_script('jquery-ui-datepicker');
        wp_enqueue_style('jquery-ui-datepicker','http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/redmond/jquery-ui.min.css' );
     }
     add_action("wp_enqueue_scripts","thisisonlyatest");
     function tfr_the_content( $content ) {
        return $content . '&lt;p&gt;&lt;input type="text" id="datepicker" value=""/&gt;&lt;/p&gt;';
     }
     ?&gt;
     &lt;script type="text/javascript"&gt;
     jQuery(document).ready(function() {
     jQuery('#datepicker').datepicker({
     dateFormat : 'yy-mm-dd'
     });
     });
     &lt;/script&gt;
  </code></pre>
  
  <p>Create a folder in your plugin folder. Create a blank php file in there and paste that code. Fire up your test wordpress instance and customize to your needs from there.</p>
  
  <p>Thanks all for your help, hope this will help others too</p>
  
  <p>Greg</p>