1. Code
  2. Plugins

Incorporating the jQuery Date Picker Into the Post Editor: Preparing the Plugin

Read Time:10 minsLanguages:
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: Save the Date

We cover a lot of topics on this blog - anything ranging from something as simple as how to include and require template files in WordPress projects to something such as an entire series on the Settings API, but I think there's always room to cover a straightforward How-To that covers a single, specific task within the context of WordPress.

So, in this two-part series, we're going to take a look at how to introduce a jQuery date picker into our post editor so that we can associate a date with a given post.

About the Plugin

We'll be doing all of this within the context of a plugin so that the source code will be easily downloadable via GitHub and will provide a working example of the tutorial.

The first thing to note is that incorporating the jQuery date picker is not meant to replace the publish date of the post. Instead, it's meant to provide an easy way to select a date, save it in the post meta data, and then display it for another purpose such as, say, when an event is going to occur.

Planning the Plugin

For anyone that's read any of my previous posts, you know that I'm a fan of planning the project from the outset, then implementing each step at a time to make sure we're clear on everything that's happening.

So let's do that now:

  • We'll provide the skeleton class for the plugin
  • We'll write the code responsible for generating the post meta box that allows the user to select the date
  • We'll implement the jQuery date picker so users can actually select a date
  • We'll save the data when the post is published and/or updated
  • We'll display the date on the front end of the post

Straightforward, right? With that said, let's get started.

Building the Plugin

At the end of this article, the entire plugin will be available in this GitHub repository, but I highly recommend following along and writing the code yourself to make sure you follow everything that we're doing.

The code will be commented so it should be easy to follow. If not, always feel free to leave comments after the post.

1. Stub Out the Plugin Class

Assuming that you've already created the WordPress-jQuery-Date-Picker directory in your wp-content/plugins directory, go ahead and create two files:

  • plugin.php
  • README.txt

We'll revisit the README file in a bit, but let's go ahead and stub out the class that serves as our plugin.

Here's the code with more explanations after the snippet:

Obviously, there's not much to it, yet. We've simply defined the class, set an empty constructor, and instantiated the plugin outside the class.

Before we move any further, let's go ahead and prepare the plugin for localization. To do this, we need to do several things:

  • Introduce a lang directory
  • Add lang/plugin.po
  • Set the text domain for the plugin within the constructor

Remember that localization is used to be sure that translators can make our plugin compatible with other languages, and that Poedit is the tool of choice.

The plugin.po file should contain something like the following (yours will obviously be different based on the date, the time, and the configuration of Poedit):

Next, we need to set the text domain in the constructor. First, include the following line in your constructor:

Next, add the following function to your file:

The most significant thing to note here is the use of the wp-jquery-date-picker key as this is what we'll be using to localize the strings throughout the remainder of the plugin.

Finally, we'll revisit this along with the README file later in the tutorial.

2. Create the Meta Box

At this point, we're ready to define the code that will render the meta box. This consists of several steps:

  • Defining the hook in the constructor
  • Register the meta box with WordPress
  • Defining a function used to render the actual meta box

In the constructor, add the following line of code. This is what we'll be using to register our post meta box:

In the function above, we're telling WordPress to look for our date meta box in a function called add_date_meta_box, so we need to define that now.

Within your class, add the following code:

We've covered meta boxes in depth in various tutorials and the WordPress Codex has a terrific article explaining what each parameter does, so I don't want to belabor the point here.

That said, there's one specific thing that we need to notice in the call above. Note that the meta box is looking to register its display using a function called the_date_display.

As such, we need to define this function. Luckily, the meta box can be very simple: In order to trigger the date picker, we only need a single element. Since we're going to be rendering the date, let's opt to use a simple input box.

Next, add the following function to your class:

Easy to understand, right?

We define a nonce value for security purposes giving us the security features we need to make sure that the user has permissions to save values for this field, and then we render an input element to the screen.

Note that the input element includes an ID of "datepicker" and a name of "the date." This will be imported later, but for now save your work.

If you activate the plugin right now, you should see something like the following:

Initial Date PickerInitial Date PickerInitial Date Picker

Obviously, this needs some light styling to make it look just a little bit better. So, let's do the following:

  • Create a css directory
  • Add a css/admin.css file

In the file, include the following code:

Then, in the constructor, add this line:

After that, add this function to your plugin:

At this point, the width of the input box for the date picker should span the width of the meta box's container. Makes it look just a little bit nicer, in my opinion.

3. Save the Date

Before we actually begin implementing the date picker, let's go ahead and make sure that our new post meta box can properly save information. Right now, it's not possible because we haven't written the code for it.

This particular step will entail the following:

  • Defining a function for saving the data
  • Making sure that the user has the ability to save the data
  • Actually saving the data

First, we need to define the hook for saving the data. To this, add the following line to your constructor directly under the line where we defined the hook for creating the meta box:

This function works by basically checking to see if this user can save. If so, then it will delete any existing post meta so as not to clutter the database, then add the date specified to this post.

But there's a catch: We're making a call to a function called user_can_save. This particular function is a helper function that we need to define as it simplifies a lot of the boilerplate code necessary for making sure the user has permission to save the file.

So in the "Helper Functions" area of your class, add the following function:

Notice that this function takes in the current Post ID and the nonce value (which we set earlier in this post). Finally, this function returns true if this is not an autosave, a post revision, and that the nonce is valid.

If it's true, then the user has permission to save.


At this point, let's try out what we have. Activate the plugin, and you should see the meta box on the Post Editor dashboard. Right now, you should be able to save any value that you'd like in that particular field.

You can grab a copy of the plugin in its current version for this post using this link.

In the next article, we're going to take a look at actually implementing the date picker. This will include importing the necessary JavaScript dependencies, writing a little bit of our own JavaScript, and then rendering the date on the front end of the post.

Finally, we'll prepare the plugin for release by generating the localization files and then preparing the README.

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