Adding datepickers is a great way to improve your a WordPress Plugin you are building. This post will go through everything you will need to do to add a Jquery UI Datepicker to your custom meta box.

What you will need to know before you move on

• Plugin Basics such as registering a plugin and nounces
• Basic understanding of WordPress Action and Filter Hooks
• Object Oriented PHP

Today we won’t be covering how to register a plugin or how to write a plugin in the form of a PHP class. You will need to understand these concepts to really get what we are doing.

Getting the jQuery UI Datepicker

Before we get started we need to select a javascript datepicker. There are many out but one of the easiest to setup and user is the jQuery UI datepicker. If you have not seen this great little widget before, you can check some examples on the jQuery UI website. Next, we need to head over to the download page and select what we will need to download. This page is divided into 4 major sections and we will not need to download everything in our package. The first is the UI core which I leave all selected. The next is interactions which I uncheck everything. Next is widgets which I uncheck everything but the datepicker. The last section, effects I uncheck everything as well. Now just download it.

Setting Up Your Plugin Files

To start off I create a new folder in my wp-content/plugins that will contain our code. I name that folder refactord-datepicker and I also create two folders inside of our new plugin folder called “css” and “js”. I then take the jQuery UI custom download and place the custom stylesheet and images directory in the css folder of my new plugin. I do the same for the JavaScript placing it in the js folder. Usually, the names of these files are long and if you are going to change the name this is the time. For this tutorial I will leave them the same name. Here is a shot of the setup:

Coding the Datepicker and Metabox Plugin

Like mentioned above this will be done in the form of a PHP class. If you are not familiar with coding plugins this way, you should definitely check it out. To begin I will create a basic class and call the class.

/*
Plugin Name: datepicker
Plugin URI:
Description:
Author:
Version: 1.0
*/

class Refactord_Datepicker {

}

$refactord_Datepicker = new Refactord_Datepicker;

The constructor function

Nothing special so far but the real meat is done in the constructor function which will first establish some class variable representing the file path to the plugin and the URL to the plugin. Both of these will come in handy when we create our methods to add JavaScript and CSS. Also, in the constructor function, all of the hooks with their corresponding methods will be called. There will be 5 action hooks we will use to add our stylesheets, add our scripts, add the meta box, create the meta box content, and save the data when the post is updated/added. Here is the code:

class Refactord_Datepicker {

    var $plugin_dir;
    var $plugin_url;

    function  __construct() {

        $this->plugin_dir = WP_PLUGIN_DIR . "/refactord-datepicker";
        $this->plugin_url = WP_PLUGIN_URL . "/refactord-datepicker";

        add_action( 'admin_print_styles', array($this, 'add_stylesheets') );
        add_action( 'admin_enqueue_scripts', array($this, 'add_js') );
        add_action( 'add_meta_boxes', array( $this, 'datepicker_meta_box' ) );
        add_action( 'admin_head', array($this, 'call_js') );
        add_action( 'save_post', array($this, 'save_data') );
    }

Add the datepicker Stylesheets

The first method we will create is add_stylesheets. This will do just exactly that. Here is the method I created:

function add_stylesheets(){
        global $post;
        $styleFile = $this->plugin_dir . "/css/jquery-ui-1.8.13.custom.css";

        if(file_exists($styleFile) && $post->post_type == 'post'){
            wp_register_style('datepicker-css', $this->plugin_url . "/css/jquery-ui-1.8.13.custom.css");
            wp_enqueue_style( 'datepicker-css');
        }
}

If you look at this function, we use those class variables to get the URL and file paths to the stylesheet we need to add. Also, we call in the global for post and test to see if this is a post type we want to add the stylesheet too. There is no sense in adding this stylesheet to every page of the admin panel.

Add the Datepicker JavaScript

This method is almost the same as the one we used for adding the datepicker stylesheet. The only changes you will notice is the names of the WordPress functions that we use. As well as the change in the file name we are calling.

function add_js(){
        global $post;
        $jsFile = $this->plugin_dir . "/js/jquery-ui-1.8.13.custom.min.js";

        if(file_exists($jsFile) && $post->post_type == 'post'){
            wp_register_script('datepicker-js', $this->plugin_url . "/js/jquery-ui-1.8.13.custom.min.js");
            wp_enqueue_script( 'datepicker-js');
        }
    }

Calling the Datepicker JavaScript

Now that we have both methods to add the needed CSS and JavaScript, we need to now call the JavaScript on the input we will create. I already know the input ID that we will use: “#datepicker-field”, so I simply just call the datepicker function on that field ID. I don’t even pass any options.

function call_js(){
        global $post;
        if($post->post_type == 'post'){

            echo    '';
        }
    }

Notice, how we omit the $ for jQuery. This helps prevent any conflicts the dollar sign might create with other loaded scripts.

Adding the meta Box

Next need to actually create out meta box. We do that by calling this method that is made of really just one function:

function datepicker_meta_box(){
        add_meta_box(
             'refactord-datepicker'
            ,'Refactord Datepicker'
            ,array( &$this, 'meta_box_content' )
            ,'post'
            ,'side'
            ,'high'
        );
    }

If you are not familiar with this function you definitely need to read the codex on it.

The meta box content

This function fills the meta box we just created with the content it will display.

function meta_box_content(){
        global $post;
        // Use nonce for verification
        wp_nonce_field( plugin_basename( __FILE__ ), 'refactord_nounce' );

        // The actual fields for data entry
        echo '';
           _e("Pick A date", 'myplugin_textdomain' );
        echo ' : ';
        echo '
';
    }

We are doing a few things in this function. One is the use of a WordPress Nounce. This helps maintain a high level of security for our meta box. Also, you see the we are use the get_post_meta to get the data we will display in our input field. This is the give away we will be saving this data to the post meta table. You also see the ID of datepicker-field, which will allow us to call our js. Actually if we want we can load this plugin now and it would display our datepicker. But it wouldn’t save.

Saving the Datepicker data

Lastly, we need to save the data.

function save_data($post_id){
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
            return;

        if ( !wp_verify_nonce( $_POST['refactord_nounce'], plugin_basename( __FILE__ ) ) )
            return;

        // Check permissions
        if ( 'page' == $_POST['post_type'] ){
            if ( !current_user_can( 'edit_page', $post_id ) )
                return;
        }else{
            if ( !current_user_can( 'edit_post', $post_id ) )
                return;
        }

        $data = $_POST['datepicker-field'];

        update_post_meta($post_id, 'refactord-datepicker', $data, get_post_meta($post_id, 'refactord-datepicker', TRUE));

        return $data;
    }

You notice there are several security checks and also a check to see if an ajax save is be done. Also, you will see the post meta is saved using an underscore before the actual name of meta key. If you do this it prevents this option populating in the custom field box.

The completed Datepicker class

That is it. We are finished and if you load this up in a WordPress install you will get this: