1. Code
  2. Plugins

Incorporating the jQuery Date Picker Into the Post Editor: Save the Date

This post is part of a series called Incorporating the jQuery Date Picker Into the Post Editor.
Incorporating the jQuery Date Picker Into the Post Editor: Preparing the Plugin

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:

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:

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:

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:

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

jQuery Date Picker

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:

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:

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

Nothing groundbreaking - just says exactly what it does.


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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.