Как использовать jQuery UI в моем плагине WordPress

В дополнение к отличному ответу @s_ha_dum, вот пример, показывающий, как использовать встроенный jQuery UI date picker на странице вашего плагина.

Результат будет выглядеть так:

Самые важные моменты:

• Используйте слаг вашей страницы настроек для подключения скриптов и стилей только на вашей странице, а не на всех страницах админки (подробнее).
• Убедитесь, что установили datepicker({ dateFormat: "yy-mm-dd" }), чтобы знать, что ожидать в обработчике обратного вызова.
• В WordPress нет встроенного стиля для выбора даты, поэтому вам нужно подключить отдельную таблицу стилей. Но есть также отличный демонстрационный плагин от @helenhousandi с CSS, который хорошо сочетается с основными стилями.

Сначала я создал базовый класс, чтобы иметь что-то, что можно использовать и в других ответах, а также чтобы оставить фактический код для скрипта выбора даты простым и специфичным.

Базовый класс Wpse_Plugin_Options_Page

/**
 *
 * Мы не используем здесь так называемый Settings API, потому что он слишком
 * сложный.
 * Вместо этого используется admin-post.php: просто, чистая разметка, работает.
 */
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,                       // заголовок страницы
            $this->title,                       // заголовок меню
            'manage_options',                   // права доступа
            $this->menu_slug,                   // слаг меню
            array ( $this, 'render_page_base' ) // функция обратного вызова
        );

        $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( 'нет' );

        if ( ! isset ( $_POST[ $this->option ] ) )
            die( 'что-то отсутствует' );

        $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 );
    }
}

Теперь нам нужно переопределить только самые важные части. Красиво и коротко.

Специальный класс 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' );

    // не наследуется
    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">Выберите дату
                <input type="text" id="%1$s" name="%2$s" value="%3$s" />
            </label> %4$s</p>',
            'datepicker',
            $this->option,
            $value,
            get_submit_button( 'Сохранить', '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 => 'Дата сохранена.'
        );
    }
}

Здесь еще много возможностей для улучшений, но для начала это должно быть полезным.

Существует несколько способов подключения jQuery в тему. Я всегда использую встроенную в WordPress версию, так как считаю это самым простым вариантом. Для правильной настройки необходимо убедиться, что на странице WordPress будут загружены следующие файлы. Чтобы загрузить указанные скрипты и стили, добавьте следующий код в файл functions.php вашей темы.

Скрипт для фронтенда

function add_e2_date_picker(){
//Файл jQuery UI date picker
wp_enqueue_script('jquery-ui-datepicker');
//CSS-файл темы jQuery UI
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'); 

Скрипт для бэкенда

function add_e2_date_picker(){
//Файл jQuery UI date picker
wp_enqueue_script('jquery-ui-datepicker');
//CSS-файл темы jQuery UI
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'); 

Мы можем написать функцию, которая будет подключена только для определенных страниц, таких как single.php, page или страница плагина. Я добавил (захукал) на 'options-general.php' для отображения в Настройки->Date Picker. Просто добавьте этот код также в файл functions.php или ниже предыдущего кода.

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');

?>

После добавления этого кода вы получите date picker в разделе Меню админки->Настройки->Date Picker. Если вам нужна помощь по настройке, задавайте вопросы в комментариях к статье Добавление jQuery DatePicker в тему WordPress или плагин.