How Do I Use jQuery UI In My Plugin

3 comments

1. Given that all of the libraries you need for the datepicker are bundled with WordPress and are registered with all of the appropriate dependencies, all you really need to do is:

   function enqueue_my_scripts_wpse_97533() {
     wp_enqueue_script('jquery-ui-datepicker');
   }
   add_action('wp_enqueue_scripts','enqueue_my_scripts_wpse_97533');
   

   If you then look at the source of the page you will see that jQuery, jQuery-UI, and jQuery-UI-Datepicker are all loaded.

   Of course, you will need to load any other scripts yourself in pretty mush the way you already are, though you should register them with their dependencies– third parameter.

   wp_register_script( $handle, $src, $deps, $ver, $in_footer ); 
   

   For example…

   wp_register_script(
       'maskedinput',
       SSM_PLUGIN_URL.'/includes/js/jquery.maskedinput.min.js',
       array('jquery')
   );
   

   That way, you could load that with…

   function enqueue_my_scripts_wpse_97533_v2() {
     wp_enqueue_script('maskedinput');
   }
   add_action('wp_enqueue_scripts','enqueue_my_scripts_wpse_97533_v2');
   

   … and know that the dependencies– jQuery– will get loaded as well.

   Log in to Reply

2. To complement @s_ha_dum’s excellent answer, here is an example showing how to use the built-in jQuery UI date picker on your plugin page.

   The result will look like this:

   

   The most important parts:

   • Use your option page slug to enqueue the scripts and stylesheets on your page only, not on all admin pages (background).
   • Make sure to set datepicker({ dateFormat: "yy-mm-dd" }), so you know what to expect in your callback handler.
   • There is no built-in style for the date picker in WordPress, so you have to enqueue a separate stylesheet. But there is also a nice demo plugin from @helenhousandi with CSS that fits nicely into the core styles.

   I built a base class first to have something I can use in other answers too and to keep the actual code for the date picker script specific and simple.

   Base class Wpse_Plugin_Options_Page

   /**
    *
    * We do not use the so called Settings API here, because that is way too
    * complicated.
    * admin-post.php is used instead: simple, clean markup, works.
    */
   class Wpse_Plugin_Options_Page
   {
       protected static $instance = NULL;
       protected $slug      = '';
       protected $menu_slug = 'wpse_demo';
       protected $option    = 'wpse_option';
       protected $title     = 'WPSE Demo';
       protected $styles    = array();
       protected $scripts   = array();
   
       public static function get_instance()
       {
           NULL === self::$instance and self::$instance = new self;
           return self::$instance;
       }
   
       public function wp_loaded()
       {
           add_action(
               "admin_post_update_$this->option",
               array ( $this, 'admin_post' )
           );
           add_action(
               'admin_menu',
               array ( $this, 'admin_menu' )
           );
       }
   
       public function admin_menu()
       {
           $slug = add_options_page(
               $this->title,                       // page title
               $this->title,                       // menu title
               'manage_options',                   // capability
               $this->menu_slug,                   // menu slug
               array ( $this, 'render_page_base' ) // callback function
           );
   
           $this->slug = $slug;
   
           add_action( "admin_print_styles-$slug",  array ( $this, 'enqueue_style' ) );
           add_action( "admin_print_scripts-$slug", array ( $this, 'enqueue_script' ) );
           add_action( "page_content_$slug",        array ( $this, 'render_page_content' ) );
       }
   
       public function render_page_base()
       {
           $this->print_message();
   
           printf(
               '<div class="wrap"><h2>%1$s</h2><form method="post" action="%2$s">',
               $GLOBALS['title'],
               admin_url( 'admin-post.php' )
           );
   
           printf(
               '<input type="hidden" name="action" value="%s"/>',
               "update_$this->option"
           );
           wp_nonce_field( "update_$this->option" );
   
           do_action( 'page_content_' . $this->slug );
   
           print '</form></div>';
       }
   
       protected function print_message()
       {
           if ( ! isset ( $_GET['msg'] ) )
               return;
   
           $text = $this->get_message_text( $_GET['msg'] );
   
           if ( ! $text )
               return;
   
           print "<div id='message' class='updated fade'><p>$text</p></div>";
       }
   
       protected function get_message_text( $id )
       {
           $messages = $this->get_messages();
   
           if ( isset ( $messages[ $id ] ) )
               return $messages[ $id ];
   
           return FALSE;
       }
   
       protected function get_messages()
       {
           return array();
       }
   
       public function render_page_content()
       {
           echo $this->slug;
       }
   
       public function enqueue_style()
       {
           foreach ( $this->styles as $style )
               wp_enqueue_style( $style );
   
           do_action( 'base_styles_loaded_' . $this->slug );
       }
   
       public function enqueue_script()
       {
           foreach ( $this->scripts as $script )
               wp_enqueue_script( $script );
   
           do_action( 'base_scripts_loaded_' . $this->slug );
       }
   
       public function admin_post()
       {
           if ( ! check_admin_referer( "update_$this->option" ) )
               die( 'nope' );
   
           if ( ! isset ( $_POST[ $this->option ] ) )
               die( 'something is missing' );
   
           $msg = $this->save_option( $_POST[ $this->option ] );
   
           $url = add_query_arg( 'msg', $msg, $_POST[ '_wp_http_referer' ] );
   
           wp_safe_redirect( $url, 303 );
           exit;
       }
   
       protected function save_option( $data )
       {
           return (bool) update_option( $this->option, $data );
       }
   }
   

   Now we have to redefine only the most important pieces. Nice and short.

   Special class Wpse_Datepicker_Example

   class Wpse_Datepicker_Example extends Wpse_Plugin_Options_Page
   {
       protected $title     = 'jQuery Date Picker';
       protected $menu_slug = 'wpse_datepicker';
       protected $option    = 'wpse_datepicker';
       protected $scripts   = array ( 'jquery-ui-datepicker' );
   
       // not inherited
       public static function get_instance()
       {
           NULL === self::$instance and self::$instance = new self;
           return self::$instance;
       }
   
       public function render_page_content()
       {
           $value = esc_attr( get_option( $this->option ) );
           printf(
               '<p style="margin:100px auto;width:30em"><label for="%1$s">Pick a date
                   <input type="text" id="%1$s" name="%2$s" value="%3$s" />
               </label> %4$s</p>',
               'datepicker',
               $this->option,
               $value,
               get_submit_button( 'Save', 'primary', 'submit', FALSE )
           );
   
           add_action(
               "admin_footer-$this->slug",
               array ( $this, 'print_footer_script' )
           );
       }
   
       public function enqueue_style()
       {
           wp_register_style(
               'jquery-ui-datepicker',
               'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css'
           );
           wp_enqueue_style( 'jquery-ui-datepicker' );
       }
   
       public function print_footer_script()
       {
           ?>
   <script>
   jQuery( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
   </script>
           <?php
       }
   
       protected function get_messages()
       {
           return array (
               1 => 'Date saved.'
           );
       }
   }
   

   There is still much room for improvements, but as a start it should be useful.

   Log in to Reply

3. There are several ways to include jQuery into a theme. I always use WP bundled version which I find very simple. To properly set things up, we need to make sure WP page will have following files to be included in page load. For loading bellows script & style add bellows code on theme functions.php file.

   Script for front-end use

   function add_e2_date_picker(){
   //jQuery UI date picker file
   wp_enqueue_script('jquery-ui-datepicker');
   //jQuery UI theme css file
   wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
   }
   add_action('wp_enqueue_scripts', 'add_e2_date_picker'); 
   

   Script for back-end use

   function add_e2_date_picker(){
   //jQuery UI date picker file
   wp_enqueue_script('jquery-ui-datepicker');
   //jQuery UI theme css file
   wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
   }
   add_action('admin_enqueue_scripts', 'add_e2_date_picker'); 
   

   We can write a function to be hooked for specific pages, such as single.php, page or plugin page. I have add or hooked on ‘options-general.php’ for display on Settigns->Date Picker. Just put this code also funtions.php file or bellow those code.

   function register_datepiker_submenu() {
       add_submenu_page( 'options-general.php', 'Date Picker', 'Date Picker', 'manage_options', 'date-picker', 'datepiker_submenu_callback' );
   }
   
   function datepiker_submenu_callback() { ?>
   
       <div class="wrap">
   
       <input type="text" class="datepicker" name="datepicker" value=""/>
   
       </div>
   
       <script>
       jQuery(function() {
           jQuery( ".datepicker" ).datepicker({
               dateFormat : "dd-mm-yy"
           });
       });
       </script> 
   
   <?php }
   add_action('admin_menu', 'register_datepiker_submenu');
   
   ?>
   

   After adding this code, you’ll got a date picker on Admin Menu->Settigns->Date Picker. If you need any help for getting this option ask any query throw comments on Add a jQuery DatePicker to WordPress Theme or Plugin.

   Log in to Reply