There are many possible reasons you might need form field to store date and to improve the user experience a datepicker is a nice addition. The jQuery UI datepicker is prefect for this application because it easy to use and highly customizable. We will take this datepicker and add it to a metabox, a section of content within WordPress UI.

Requirements

• WordPress 3.0 or higher
• jQuery UI download including the datepicker widget
• Basic knowledge of object oriented OO PHP
• Understand the basics on how to create a WordPress plugin

Step One – Create a Plugin

To add the datepicker, we are going to use the plugin API. It begins with creating a new plugin within the wp-plugin directory. The plugin will be called “datepicker-metabox” and a new folder will be added to this directory with this name. Also, two folders were added within the main plugin folder. The first folder called “js”, will contain any JavaScript files and the second, named “css”, will contain any of the needed stylesheets and images.

I also create a PHP file named same as the main folder, datepicker-metabox.php. This will be our main plugin file and will contain the majority of the code written. But to begin, we just need to register the plugin, so we add this to the main plugin file, datepicker-metabox.php:

/*
Plugin Name: Date Picker MetaBox
Plugin URI:
Description: Adds a new meta box to post edit screen containing a datepicker
Author: Kyle G
Version: 1.0
*/

The plugin should now be recognized by WordPress and we can activate it.

Step Two – Create our plugin class

As mentioned above you are going need to understand OO PHP and if you don’t you should continue anyway because the plugin we are going to create is pretty straight forward and uses only the basic concepts of OOP PHP. Just remember that the functions within our class will be called methods as seen below.

We start our PHP code by creating the main class “metabox_datepicker” within our main plugin file:

class metabox_datepicker {

}

$metabox_datepicker = new metabox_datepicker();

After creating our class, we need to call a new instance of the class to include the functionality.

Step Three – Adding the constructor function and registering the meta box

When creating a plugin using the OO PHP concepts the majority of the hooks called will be in the constructor method. We are going to create the constructor method and adding an action hook for ‘add_meta_boxes’. The “add_meta_boxes” action hook is call when the We then need to use a reference of the class method we are going to create called ‘register_datepicker_metabox’.

function  __construct() {
    add_action('add_meta_boxes', array( &$this, 'register_datepicker_metabox') );
}

We also need to create this method and within this method we are going use the WordPress function add_meta_box().

Add_meta_box() accepts several variables:

• $id – This is the HTML ID of the metabox being created
• $title – This is the title of the metabox
• $callback – This is the callback function that will be called to generate the content within the meta box
• $post_type – This determines what post type will display the metabox such as post, page, or some other custom post type
• $context – this determines which column the metabox will be displayed: normal, advanced, or side
• $priority – This determines how high on the page the metabox will be displayed

Here is the method register_datepicker_metabox:

function register_datepicker_metabox() {
    add_meta_box(
        'datepicker_section', //section ID
        __( 'The Datepicker', 'myplugin_textdomain'), //The metabox title
        array(&$this, 'datepicker_metabox_content'), // the metabox callback function
        'post', //the post type where it will apprear
        'side', //where on the page it will appear
        'core' //how high on the page it will appear
    );
}

Step Four – Create the metabox callback method within the class

We now need to create a new class method that will be the callback function displaying the content within the metabox. We need to include a WordPress nonce for security. We also need to add the label and the input field.

function datepicker_metabox_content( $post ){

    wp_nonce_field( plugin_basename( __FILE__ ), 'datepicker_nonce' );

    echo "" . __('Datepicker', 'myplugin_textdomain') . "";
    echo "";
}

This uses the I18n function and the get_post_meta to create the content. Get_post_meta will return what we have previously saved or it will return empty. The input field is assigned the class of datepicker. This class will late be used to call the datepicker.

Step Five – Save the date

We have created the date field and it is displayed on the page, we now need to save the data inputted. We are going to save the date in the post_meta table. We named our input the same as the key being used in the post meta table. This is appended with an underscode. Adding the underscore prevents this being used in the content meta in the custom fields metabox.

function save_date( $post_id ){
    // verify if this is an auto save routine.
    // If it is our form has not been submitted, so we dont want to do anything
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
        return;

    // verify this came from the our screen and with proper authorization,
    // because save_post can be triggered at other times

    if(!isset($_POST['datepicker_nonce']))
        return;

    if ( !wp_verify_nonce( $_POST['datepicker_nonce'], 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;
    }

    //finally save the date
    update_post_meta($post_id, '_datepicker', $_POST['_datepicker'], get_post_meta($post_id, '_datepicker', TRUE));
}

The method above includes several levels of security. It checks to see if there is a valid WordPress nonce, if the user is allowed to update this date, and if this is the correct post type. If everything checks out then the data is saved using update post meta.

Step Six – Adding the CSS and JS

Right now, we have a functioning input and the next step is to add the jQuery UI CSS and JavaScript. You will need to download the jQuery UI with the datapicker widget. I just stuck with the default theme UI lightness. This download is then divided into the appropriate folders we created in the beginning for JavaScript and CSS.

We want to JavaScript and CSS only to the pages where the meta box appears. We don’t want the scripts and css added to every page in the admin and there are several methods we could use to accomplish this. We are add a action hook to the register metabox function that we created early to accomplish this.

We begin be calling into the global variables of $hook_suffix and $post_type. The post type will let us know if this is a “post” or not and then we can use $hook_suffix with a variable hook to call the action to add the styling and scripts. If you are not familiar with variable hooks, they are a way to hook in with targeting a specific page, category, taxonomy, or in this case a specific page of the admin.

We use the variable hook admin_print_script-{$hook_suffix}, which will allow us to add the JavaScript and CSS on the specific page or pages. It is somewhat confusing that we would use this hook to add both the CSS and JavaScript, but this is correct.

//add the css and js only on the pages where we need it
global $post_type, $hook_suffix;

if($post_type == 'post'){
    add_action("admin_print_scripts-{$hook_suffix}", array(&$this, 'add_datepicker_scripts'));

}

You see that there is a new class method ‘add_datepicker_scripts’:

function add_datepicker_scripts(){
    wp_enqueue_script('datepicker', plugins_url('js/jquery-ui-1.8.20.custom.min.js', __FILE__), array('jquery'), '', TRUE);
    wp_enqueue_script('datepicker-options', plugins_url('js/call_datepicker.js', __FILE__), array('datepicker'), '', TRUE);
    wp_enqueue_style('datepicker', plugins_url('css/ui-lightness/jquery-ui-1.8.20.custom.css', __FILE__));
}

If you take a closer look, I also added a second script named call_javascript.js. This file simply contains:

jQuery(document).ready(function($) {
    $('.datepicker').datepicker();
});

This simply does the work of call the jQuery UI widget on the class we assign to the input. You can also add your own options to the datepicker. Also, note the method used to instantiate jQuery. This will prevent any conflicts with other scripts by using $ sign.

We have successfully added a new metabox to WordPress that saves a date and adds to the user experience with a datepicker.

Download Plugin