How Do I Use jQuery UI In My Plugin

Question

It's a sad day in the world when I Google something and it returns nothing. I am trying to use the default datepicker (or ANY datepicker at this point) and am unable to because of my lack of knowledge with Wordpress/PHP. In my plugin, I am attempting to register jquery and the ui and apparently am breaking other parts of WordPress in the process. Can someone please tell me what I'm doing wrong and if they can provide a working solution, I will scrap all of my code:

add_action('init', 'add_styles');

function add_styles(){
    wp_deregister_style('simpleschoolstyles');
    wp_register_style('simpleschoolstyles', SSM_STYLEFILE);

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js');

    wp_deregister_script( 'jquery-ui' );
    wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js');

    wp_deregister_style( 'jquery-ui' );
    wp_register_style( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css' );

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

    wp_deregister_script('simpleschool');
    wp_register_script('simpleschool', SSM_PLUGIN_URL . '/includes/js/simpleschool.js');
}

add_action('wp_enqueue_scripts', 'load_scripts');
add_action('admin_enqueue_scripts', 'load_scripts');

function load_scripts()
{
    wp_enqueue_style('jquery-ui');    
    wp_enqueue_style('simpleschoolstyles');
    wp_enqueue_script('jquery');       
    wp_enqueue_script('jquery-ui');
    wp_enqueue_script('maskedinput');
    wp_enqueue_script('simpleschool');
}

I need jQuery to be available in the admin area as well as the front-end for user data-entry. Please someone help. I am near pulling my toenails off as I have ripped all of my hair out already...I am assuming that I must be enqueueing at the wrong point in time, but again, due to my limited knowledge of WordPress, I have dug myself a grave quickly.

UPDATE: I modified my script and now only loading jQuery UI and have tested that jQuery and the UI are both loaded and have success for those two, but not an existing object in the DOM:

add_action('init', 'init_scripts');

function init_scripts(){
    wp_deregister_style('simpleschoolstyles');
    wp_register_style('simpleschoolstyles', SSM_STYLEFILE);

    //wp_deregister_script( 'jquery-ui' );
    wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js');

    //wp_deregister_style( 'jquery-ui' );
    wp_register_style( 'jquery-ui-pepper-grinder', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css' );

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

    //wp_deregister_script('simpleschool');
    wp_register_script('simpleschool', SSM_PLUGIN_URL . '/includes/js/simpleschool.js');

    wp_enqueue_style('jquery-ui-pepper-grinder');
    wp_enqueue_style('simpleschoolstles');
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui' );
    wp_enqueue_script('simpleschool');
}

My Test:

jQuery(document).ready(function(){
    //jQuery('.datepick').mask("99/99/9999");
    //jQuery('.phone').mask("(999) 999-9999");
    jQuery( '.datepick' ).datepicker( 'option', 'dateFormat', 'yyyy-mm-dd' ); // <-- this fails ????    
    alert('jQuery BETTER BE LOADED!!!'); // <---this worked
    jQuery('<div>crazy wordpress and their php</div>').dialog(); // <--- this worked too
});

Answer 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.

Answer 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.

Answer 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.