In this series, we are working on a plugin for the simple purpose of introducing a jQuery date picker into the post editor using a post meta box and then displaying it on the site front end.

Rather than do an extensive, detailed series on a deep topic in WordPress - the purpose of this series is to focus on a very niche topic.

In the first article in the series, we accomplished the following:

1. Stubbed out the plugin
2. Created and styled the meta box
3. Saved the date

In this article, we'll resume work by implementing the jQuery Date Picker, storing the date in the post, and then preparing the plugin for release.

Completing the Plugin

We've already completed three of the six steps needed to implement our plugin. Now it's a matter of incorporating all of the necessary JavaScript to display the color picker and retrieve the data.

But thanks to WordPress, this really isn't all that difficult as much of what we need is already bundled with the core application.

4. Implement the Date Picker

To implement the jQuery date picker, we need several dependencies:

• The jQuery Date Picker plugin JavaScript
• The jQuery Date Picker styles
• Some custom JavaScript to display the color picker when the user clicks on the meta box

First, add the following line to your constructor:

add_action( 'admin_enqueue_scripts', array( $this, 'register_admin_scripts' ) );

Next, we need to actually define the function that will enqueue the jQuery date picker library as well as our own custom JavaScript file.

So go ahead and define register_admin_scripts and the line for including the jQuery date picker:

/**
 * Registers and enqueues admin-specific JavaScript.
 *
 * @version		1.0
 * @since 		1.0
 */
public function register_admin_scripts() {
	wp_enqueue_script( 'jquery-ui-datepicker' );
} // end register_admin_scripts

Next, introduce a js directory into your plugin and then add an admin.js file to that directory.

The file should contain the following JavaScript:

(function($) {
	$(function() {

		// Check to make sure the input box exists
		if( 0 < $('#datepicker').length ) {
			$('#datepicker').datepicker();
		} // end if

	});
}(jQuery));

Simply put, this file will execute the JavaScript for each page the dashboard is loaded. There is an alternative way to handle this, but it's beyond the scope of this article.

Instead, we have our JavaScript check for the existence of the element. If it does exist, then it applies the datepicker plugin to the element.

Finally, we need to register the jQuery Date Picker stylesheet with our plugin. To do this, add the following line to your register_admin_styles function:

wp_enqueue_style( 'jquery-ui-datepicker', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css' );

At this point, refresh the plugin and you should be able to click on the input element and see something like this:

Pretty cool, isn't it? Notice that when you select a date it will automatically apply the date to the input element. If you're interested in customizing the date format (or other aspects of the date picker) even more, be sure to check out its API docs.

5. Display the Date on the Post

At this point, we're ready to display the date on the actual post. For the purpose of our plugin, we're going to be prepending this to the content.

To do this, define the following hook in the constructor of your plugin:

add_action( 'the_content', array( $this, 'prepend_the_date' ) );

Next, we need to actually define the function. It's really simple, though. Check it out, then I'll explain it after the code snippet:

 /**
  * Saves the project completion data for the incoming post ID.
  *
  * @param		int		The current Post ID.
  * @version	1.0
  * @since 		1.0
  */
  public function prepend_the_date( $content ) {

	// If the post meta isn't empty for `the_date`, then render it in the content
	if( 0 != ( $the_date = get_post_meta( get_the_ID(), 'the_date', true ) ) ) {
		$content = '<p>' . $the_date . '</p>' . $content;
	} // end if

	return $content;

} // end prepend_the_date

In this function, we're checking the post meta data for the current post. Since this function fires within the context of The Loop, we're able to use get_the_ID().

If the date string - that is, the post meta keyed by the_date - isn't empty, then we'll wrap it in a paragraph tag and prepend it to the $content; otherwise, we just return the $content as it is.

6. Prepare the Plugin for Release

At this point, there's only two things left to do:

1. Provide the localization file for translation
2. Create the README.

Creating the localization file is simple. Since we defined the plugin.po file in the first article, all that we need to do is open the file with Poedit, click 'Update', then save the file. This will generate a plugin.mo file in the lang directory.

Next, we need to create a README file that follows the WordPress Readme conventions. Though you can be as creative as you like, I've shared mine below.

=== WordPress jQuery Date Picker ===
Contributors: tommcfarlin
Tags: date, post
Requires at least: 3.5
Tested up to: 3.5.1
Stable tag: 1.0

A sample plugin used to demonstrate how to include the jQuery Date Picker into the post editor.

== Description ==

WordPress jQuery Date Picker is a simple plugin used to demonstrate how to take advantage of custom post meta boxes, meta data, and jQuery plugins to allow users to select dates to be displayed within their posts.

== Installation ==

= Using The WordPress Dashboard =

1. Navigate to the 'Add New' Plugin Dashboard
2. Select `wordpress-jquery-date-picker.zip` from your computer
3. Upload
4. Activate the plugin on the WordPress Plugin Dashboard

= Using FTP =

1. Extract `wordpress-jquery-date-picker.zip` to your computer
2. Upload the `wordpress-jquery-date-picker` directory to your `wp-content/plugins` directory
3. Activate the plugin on the WordPress Plugins dashboard

== Frequently Asked Questions ==

= Right now, the date only appears at the top of the post. Can I change it's position? =

No.

== Changelog ==

= 1.0 =
* Initial release

Nothing groundbreaking - just says exactly what it does.

Conclusion

If you haven't already, be sure to grab the latest version of the plugin from GitHub, read the comments, and follow along to make sure you understand everything that's happening in the plugin.

And that's all - easy enough, right?

As usual, please leave comments and questions in the comment form below.