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:
- Stubbed out the plugin
- Created and styled the meta box
- 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
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 styles
First, add the following line to your constructor:
add_action( 'admin_enqueue_scripts', array( $this, 'register_admin_scripts' ) );
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.
(function($) $(function() // Check to make sure the input box exists if( 0 < $('#datepicker').length ) $('#datepicker').datepicker(); // end if }); }(jQuery));
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
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
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:
- Provide the localization file for translation
- 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.
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.
Jump to original: