P. 1
How to AJAXify WordPress Comment Posting

How to AJAXify WordPress Comment Posting

Views: 141|Likes:
Published by markfoia

More info:

Published by: markfoia on Dec 14, 2011
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





About Us Archives Advertise Contact Us

Advertise Here











Aug 11th, 2009 - 12 Comments »

How To: AJAXify WordPress Comment Posting
Posted in AJAX jQuery Wordpress
Share: (28) Delicious Facebook 30 retweet



Advertise Here

Recent Articles
Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Powered by WP Greet Box WordPress Plugin

40 Fresh & Beautiful Examples of Websites With Large Backgrounds Quick & Easy Way to Implement Drag n Share With jQuery Tips to Write Better CSS Code 12 Lesser Known But Useful WordPress Hacks 25 Amazing & Free Flash Based Image Galleries 15 Ways to Improve CSS Techniques Using jQuery AJAX User Poll Using jQuery and PHP 25 New & Useful PHP Techniques & Tutorials

There are tons of WordPress Tutorials out there, but i haven’t found a single one that explains how to AJAX-ify WordPress comment posting on blog posts. Though there are some plugins for AJAX comments, but none seem to work with WordPress 2.8 or later versions. Today i will show you how to enable AJAX comments with client side JavaScript comment form validation on your WordPress blog step by step that should work with most versions of WordPress. We’ll be modifying the WordPress theme files to do that. In few days, i’ll be releasing a WordPress plugin that will automatically enable AJAX Comments. So, do subscribe to our RSS Feed or e-mail updates so that you are the first to know about it. Let’s start with it.

Functions.php file
Add the following lines of code to your theme’s functions.php file. If your theme doesn’t have one, then create a new file and add it to your theme folder.
view plain copy to clipboard print ?

13+ Fresh and High Quality Texture Sets & Collections 15 Time Saving CSS Tools You Should Be Aware Of

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

add_action('init', 'wdp_ajaxcomments_load_js', 10); function wdp_ajaxcomments_load_js(){ wp_enqueue_script('ajaxValidate', get_stylesheet_directory_uri().'/wdpajaxed-comments/js/jquery.validate.min.js', array('jquery'), '1.5.5'); wp_enqueue_script('ajaxcomments', get_stylesheet_directory_uri().'/wdpajaxed-comments/js/ajaxcomments.js', array('jquery', 'ajaxValidate'), '1.1'); } add_action('comment_post', 'wdp_ajaxcomments_stop_for_ajax',20, 2); function wdp_ajaxcomments_stop_for_ajax($comment_ID, $comment_status){ if(!emptyempty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER //If AJAX Request Then switch($comment_status){ case '0':

Levi's® - 597™ Jeans
All the latest styles now available on Levi.com. Shop now!

Designworks Flash Design
Professional Flash Designers Flash

converted by Web2PDFConvert.com

7. jQuery Validation plugin is used to validate comment form data. but since it is included in WordPress by default. 24.com The JavaScript Code You will need to add two JavaScript files jquery. jQuery Validation and ajaxcomments.php. Though jQuery is required to work. //Notify post author if ( get_option('comments_notify') && $commentdata['comment_approved' >post_author != $commentdata['user_ID'] ) wp_notify_postauthor($comment_ID. textStatus. Create the js directory and add files if it does not exist.12. If it is AJAX request then check the status of comment. what happens when you post a comment is that you are redirected back to the original post. Exp.. 18.js in the js directory of your theme(Files are available at the end of article). a message ‘success’ is output and moderator or post author is notified accordingly. $commentdata['comment_type' break. 20. Here’s the code and explanation for ajax-comments. Now rest is the job of JavaScript code. case '1': //Approved comment echo "success".serialize().ajax({ type: 'post'. 6. you can use any name here for your own custom JavaScript. Intros.ready(function($){ var commentform=$('form[action$=wp-comments-post. 12+ Yrs. 14.php]'). Third parameter is the array of name of handlers of JavaScript files. AWeber Software Send Emails & Autoresponders with Confidence. it will automatically be loaded as we specified it as a requirement while loading JavaScript files in functions. i stopped the script execution using exit statement so as to prevent the redirect. 17.validate.min. ARRAY_A). we load required JavaScript files jQuery. 19. 26.com . 18.</p>'). url: formurl.prepend('<div id="wdpajax-info" ></div>'). 5. 16. $commentdata=&get_comment($comment_ID.. Second parameter is path to JavaScript file. $post=&get_post($commentdata['comment_post_ID']). if it is unapproved or approved. 12. normally.html('<p>Processing. 16. 9. 10. The function wdp_ajaxcomments_stop_for_ajax() hooks onto the comment_post action which is triggered after a comment has been successfully added to the database.js. 13. Design-Works.js using the wp_enqueue_script() function. 22.com/Flash-Design of comment Advertise your Business Try AdWords Express locally on Google Search and Maps today Google. $1 Trial! www.org Code Explanation: Firstly. but for files that wordpress include by default like jQuery. } exit. wp_enqueue_script() accepts four parameters. 14.validate({ submitHandler: function(form){ //serialize and store form data in a variable var formdata=commentform. Last is the version number of JavaScript file which you should use in case you use caching on your blog. 3. data: formdata. 15. we don’t want a redirect but a message about the status of comment posted. eCards . which must be loaded before the specified file. //Extract action URL from commentform var formurl=commentform. 23. //Add a status message infodiv. First is the name of the handler for JavaScript file. //notify moderator of unapproved comment wp_notify_moderator($comment_ID). I used it to hook into comment_post and check whether it is AJAX request or normal request. jQuery('document'). 8.AWeber.. var infodiv=$('#wdpajax-info'). After identifying AJAX request. default: echo "error".com/awexpress Live Demo Try your AJAX code online! Demo -> ZK Explorer Zkoss. 13. error: function(XMLHttpRequest. view plain copy to clipboard print ? 1. //Post Form with data $. 15. but since we will be using AJAX. 21. commentform. 25.. 11. errorThrown){ converted by Web2PDFConvert.js and ajax-comments. I recently read a nice post from David Walsh where he told about how to identify AJAX requests using $_SERVER["HTTP_X_REQUESTED_WITH"] which is populated by most JavaScript frameworks like in our case jQuery. 2. } } Demos. there are prefixed handlers like ‘jquery’. 17. 4.attr('action'). commentform.

} }). 27.find('textarea[name=comment]'). Code Explanation: Firstly. 6. } label. uptill here. we are using jQuery Validation plugin. 20.php file. Then we intialize jQuery Validation on comment form and if validation is successful.</p>').wdpajax-error{ border:1px solid #f9d9c9. Customize the Styles of Messaages The error messages from validation use labels with CSS class error. 5. 2. While the AJAX post request status messages use two CSS classes. you’ll find that AJAX comment posting works but validation doesn’t.error{ float:none !important. you will have to now edit the theme’s comments. } }). infodiv. if you have followed along and worked as told. 31. 11. 22. success: function(data. } converted by Web2PDFConvert. Since. 26. padding:5px.</p>').html('<p class="wdpajaxerror" >You might have left one of the fields blank.val(''). else infodiv. 15. 10. 29. padding-left:5px. 7. add class="required" Now the comment form validation should work.com . color:#339933. Enable Comment Form Validation Open your theme’s comments. 25. 28. commentform. 14. color:#ff3311. }. we append a div to comment form that will show AJAX status messages. add class="required email" To comment author URL input.</p>'). } . color:#ff3311. 24.html('<p class="wdpajaxsuccess" >Thanks for your comment. 3. padding:5px. 23.html('<p class="wdpajaxerror" >Error in processing your form. We appreciate your response.wdpajax-success{ border:1px solid #339933. wdpajax-success for AJAX success and wdpajax-error for error message. 13.19. 21. . 12. Here’s what i have used: view plain copy to clipboard print ? 1. add class="required" To comment author email input.php and add some CSS classes to comment form input fields as described: To comment author name input. But it might be having awkward looks or styles. 30. Now. we will use jQuery AJAX to send the form data to the action URL of comment form and display a message accordingly. 8. textStatus){ if(data=="success") infodiv. add class="url" To the comment textarea. Define the styles for these classes in your theme’s stylesheet file. 9. 4. }). now the last step is to customize the looks of messages using CSS.

i have created a plugin named WDP AJAX Comments that will automatically add AJAX commenting to your blog.There you are with cool AJAX comments on your WordPress Blog. Enjoy! Tags: ajax comments wordpress hacks wordpress plugin Bookmark n Share 0 28 bookmarks so far 4 0 Subscribe to Full RSS Feed If you found this article useful. So. do let me know in comments.com . Click here If you find any problems or error. so. then consider subscribing to our RSS Feed or email updates to stay updated with latest Web Design/ Development articles. do subscribe to our RSS Feed or email updates so that you are among the first one to get the plugin. or if you regularly change your blog’s theme then it will be difficult for you to modify theme files every-time you apply a new theme. To download the required files. You can also follow @webdevplus on twitter for latest updates. Plugin If you find modifying theme file difficult. Click here to view the Live demo(Try commenting on one of the posts). converted by Web2PDFConvert.

Anyway. 2009 at 3:01 PM very … very good Comments are closed for this post.Related Posts New WordPress Plugin: WDP AJAX Comments 12 Lesser Known But Useful WordPress Hacks Ads by Google 10 Ways To Make Your Blog’s Comment Form Stand Out Create Post Only For Your RSS Subscribers in WordPress Ajax Wordpress 12 Responses (Add Your Comment) Marcell says: August 12. sarbartha says: September 7. It is always better to add these things directly to your WP blog templates instead of using a plugin. webdeveloperplus says: August 12. 2009 at 11:03 AM There is a problem in this. 2009 at 12:08 AM I’m going to try this with my next project…Makes things look a bit better Dalesh Kowlesar says: August 12. 2009 at 9:46 AM LOVELY WORK! I am trying to figure how to position the error dialog w/o touching the JS. Whenever submitting comment it’s not automatically showing in comment section. 2009 at 8:24 PM may be it helps speed up things as the overhead to manage and load the plugin might be prevented by coding directly into theme Trung LE says: September 1. converted by Web2PDFConvert. 2009 at 6:19 PM Awesome. How to solve this? James says: November 3. sooran says: September 15. Did you work out what the problem was? I have followed the instructions exactly but still do not see the Ajax processing in place when submitting. 2009 at 1:53 AM Hi Sabartha. I think that it helps pages load faster as well but I’m not 100% sure.com . I like building things directly into my blog templates.

2009 .30 Comments » 21 Brilliant jQuery Image Gallery/Slideshow Plugins Sep 14.com .Theme Designed By: Satbir Singh converted by Web2PDFConvert. 2009 .7 Comments » Copyright © 2011 Web Developer Plus .« Previous Post Next Post » 23+ Excellent Tutorials For WordPress Theme Developers New WordPress Plugin: WDP AJAX Comments Popular Articles 12 Lesser Known But Useful WordPress Hacks Oct 30.25 Comments » 25 New & Useful PHP Techniques & Tutorials Oct 13.Powered By WordPress . 2009 .17 Comments » Pages About Advertise Archives Contact Us Disclaimer Privacy Policy Terms 25 Incredibly Useful CSS Tricks You Should Know Sep 01. 2009 . 2009 . 2009 .71 Comments » 30+ Fresh & Amazing jQuery Plugins & Tutorials Aug 19.21 Comments » Cool Stuff (from around the web) 50 Fresh and Free WordPress 3 Series Compatible Themes 10 Important jQuery Selectbox/DropDown Plugins 15 Powerful jQuery Tips and Tricks for Developers 20 New Examples of Minimal Websites Building Tabbed Navigation using SpryTabbedPanels How to Create a Basic WordPress Theme with Gantry Framework 15 Fresh jQuery Menu Plugins and Tutorials Categories Share With Friends AJAX CSS Design Flash jQuery News Popular Wordpress Subscribe to RSS Follow on Twitter Stumble WebDeveloperPlus Bookmark on Delicious Favorite on Technorati 15 Ways to Improve CSS Techniques Using jQuery Oct 20.

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->