New WordPress Plugin: WDP AJAX Comments
Aug 13th, 2009 - 41 Comments »
Today, I am proud to release my first WordPress plugin named “WDP AJAX Comments”. This plugin will enable AJAX Comments on your WordPress Blog and enhance the user experience using nifty on page comment form submission and validation of input before submission.
- Enable AJAX Commenting
- Client Side Form Validation
- Easily rolls back if JS disabled
- Easily configure custom styles for messages
Download the Plugin from official WordPress Plugin repository.
Installing & Activating
Here’s how to install and use this plugin to its full potential:
1. Firstly, go to Add New Plugin in your WordPress admin panel, and search for wdp ajax comments and you’ll see the listing, install the plugin by clicking on ‘Install’. Or you can go to WordPress plugin repository page and download the plugin and extract it in your wp-content/plugins folder.
2. Now activate this plugin, and your blog is ready with AJAX comment posting, but one thing you still need to do is enabling the client side comment form validation.
3. To enable form validation, refer to the below section.
Enabling Comment Form Validation
This plugin makes use of jQuery Validation plugin to validate comment form, so you will need to add some css classes to your comment form. Here’s how to do that:
1. Open up your theme’s comments.php file in an editor.
2. Find out the code lines where comment form starts.
3. Now, you need to add following CSS classes to comment form inputs:
- To comment author name input, add
- To comment author email input, add
- To comment author URL input, add
- To the comment textarea, add
4. Save the file and now your comment form validation will work.
Styling The Messages
WDP AJAX Comments provides you with full control over the looks of various messages using CSS. To define your own styles, create a new stylesheet file named wdp-ajax-styles.css in your theme’s folder and define styles for these classes:
.wdpajax-errorThis class is used for the message shown when AJAX error is encountered.
.wdpajax-successThis class is used for success message shown after successful comment submission.
.wdpajax-loadingThis class is used to show the ‘Processing..’ message while performing AJAX request. You can add animated loading gif’s as background to give a nice AJAX effect.
label.errorThis class is used to show validation errors.
If your theme folder does not contain wdp-ajax-styles.css file, the default stylesheet of the plugin will be used.
If you would like to see the demo, go to the demo page.
What to Expect in Coming Versions
Currently, this plugin just AJAXifies comment submission and does not update the comments displayed automatically. So, this is one of the feature you should expect in coming editions. Another feature i have thought is giving you control over the messages displayed on AJAX requests.
If you would like to suggest a new feature, feel free to comment below, just prepend your comment with Suggestion.
If you have used this plugin on your blog, post the address of your blog too, so that other can have a look.
In case you need any assistance, feel free to use the comment section below
Subscribe to Full RSS Feed
If you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.