Wordpress & Web Development

How To AJAX-ify Your WordPress Comments

James Bruce 15-04-2012

ajax wordpress commentsBy default, the WordPress commenting system is woefully inadequate – one my biggest objections being that to post a comment, the page needs to refresh. You could switch to a third party system like Livefyre [Broken URL Removed] or Disqus 3 Ways to Encourage Comments on Your Wordpress Blog Getting comments on your blog is a great motivator to keep you going on with the long haul that is blogging. Just knowing that someone is out there, appreciating your work feels great, but not... Read More , but if you’d prefer to keep everything in house or do some other kind of customization, then posting comments by AJAX is the least you should do.


You can see an example of this working here on MakeUseOf – when you post a comment, you won’t leave the page – instead we’ll send it through an AJAX call, and then send a quick “thank you” note back. Read on for a full tutorial.

For using non-WordPress functions as AJAX, please read my previous tutorial A Tutorial On Using AJAX In WordPress AJAX is a remarkable web technology that moved us beyond the simple “click link, go to another page” structure of The Internet 1.0. It enables websites to dynamically fetch and display content without the user... Read More , and be sure to check out all the WordPress related articles.


There are a two separate parts needed to get AJAX WordPress comments working, so lets explain those first to give you an overview of the whole process.

  • Some Javascript on the page that intercepts the user clicking the Add Comment submit button, that also makes it an AJAX call and also handles the response.
  • A PHP handler that hooks into the comment_post action


First off, this is going to need jQuery, as does anything remotely exciting in web development nowadays. If you’re not sure if it’s already being loaded, go ahead and skip down to the Javascript code and try it anyway – if you have Firebug and the console log says “jQuery is undefined” when you refresh the page, then add this line to your functions.php file to ensure it’s being loaded.

function google_jquery() {
if ( !is_admin() ) { wp_deregister_script('jquery'); wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"), false);
wp_enqueue_script('jquery'); } } 

add_action('wp_print_scripts ', 'google_jquery');

Note, that’s an elaborate way of loading jQuery because we’ll be using the latest version from Google CDNs, which is faster and more up to date than the one included by default with WordPress – so it might be a good idea to add that anyway even if jQuery is already loaded elsewhere.


Now, for the actual Javascript that will handle the comment form, we have a few options. The easiest is to just paste the code into your single.php template – assuming you don’t have commenting enabled for pages as well.

Alternatively, you could paste into an existing .js file used by your theme, or create a new .js file in your theme directory. If you choose to put it into your own separate .js file and not paste it directly into your theme template, be sure to add the following lines to your functions.php, and note the filename is assumed to be ajaxcomments.js in the root of your theme folder.

add_action('init', 'ajaxcomments_load_js', 10);
function ajaxcomments_load_js(){
		wp_enqueue_script('ajaxcomments', get_stylesheet_directory_uri().'/ajaxcomments.js');

Here is the Javascript to handle the comment form (or you can view it on pastebin):

<script type="text/javascript">
// AJAXified commenting system
var commentform=$('#commentform'); // find the comment form
commentform.prepend('<div id="comment-status" ></div>'); // add info panel before the form to provide feedback or errors
var statusdiv=$('#comment-status'); // define the infopanel

//serialize and store form data in a variable
var formdata=commentform.serialize();
//Add a status message
//Extract action URL from commentform
var formurl=commentform.attr('action');
//Post Form with data
type: 'post',
url: formurl,
data: formdata,
error: function(XMLHttpRequest, textStatus, errorThrown){
statusdiv.html('<p class="wdpajax-error" >You might have left one of the fields blank, or be posting too quickly</p>');
success: function(data, textStatus){
statusdiv.html('<p class="ajax-success" >Thanks for your comment. We appreciate your response.</p>');
statusdiv.html('<p class="ajax-error" >Please wait a while before posting your next comment</p>');
return false;


To break the code down, we’re first creating jQuery objects of the comment form (which assumes your comment form has the default css ID of “commentform”), and adding an empty info panel above it which we’ll later use to display messages to the user about the progress of posting their comment.


commentform.submit is used to ‘hijack’ the submit button. We then serialize the form data (turn it into one long line of data), give a “Processing” message to the user in that info panel, and go ahead with an AJAX request. The AJAX request is a standard format, but not really in the scope of this tutorial today – suffice to say it reacts to either a success or error, and blanks out the form if successful to prevent the same comment being accidentally posted twice. Adjust the messages and errors as appropriate, or add some suitable styling to your theme’s stylesheet if you’d like the error messages to stand out somehow. The last line – return false – prevents the form from completing it’s default action.

PHP Handler

Lastly, we need something to prevent the page refresh and send the appropriate response back to the user as well as notifying the admin if the comment needs moderating, or notifying the author of a new comment. For this, we hook into the comment_post action which occurs just after it’s added to the database, and detect if it was an AJAX request. Add this to your functions.php file:

(Also available at this pastebin)

add_action('comment_post', 'ajaxify_comments',20, 2);
function ajaxify_comments($comment_ID, $comment_status){
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
//If AJAX Request Then
case '0':
//notify moderator of unapproved comment
case '1': //Approved comment
echo "success";
$commentdata=&get_comment($comment_ID, ARRAY_A);
wp_notify_postauthor($comment_ID, $commentdata['comment_type']);
echo "error";

Spot Problems

If the page is still refreshing instead of posting through AJAX, it’s likely to be one of two problems. One – you might not have jQuery loaded. Install Firebug How To Install Firebug on IE, Safari, Chrome & Opera Read More , or enable Chrome developer tools, and check the console log for errors. If jQuery isn’t found, go back up to the JavaScript section and read the first bit on adding jQuery to your theme. The second possibility is that your theme does something special to the comment form and it’s ID is no longer “commentform”. Check the source code, then adjust the var commentform=$(‘#commentform’) line in the JavaScript to be the correct ID – that might work.


As ever, I’m around to help out further as much as I can, but please post links to an example URL where I can take a quick look.

Related topics: Online Commenting, Programming, Web Development.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Nai
    February 24, 2019 at 7:31 pm

    Really appreciate this. Thanks!

  2. Dominic Desbiens
    February 2, 2019 at 8:01 pm

    Hi. Really nice and useful post. I added this code to my web site some months ago. All worked fine. Then, I updated my WordPress to version 5 (5.0.3). I also changed the PHP version in my cPanel to 7.2. I dont know which of two has caused this problem :

    When I receive new comment, i'm notfied by mail. Thats OK. But if its my reply to a comment, I receive several identical mails with html tags in the body.

    I have to say that I've modified your code by adding a condition like this to not receive notifications if the comment was posted by me :
    if ( (!is_admin()) && is_singular()) { }

    I really dont know why it send me these multiple mails and dont know if its WordPress 5 or PHP 7.2 that caused that. Any idea ??


    • Dominic Desbiens
      February 2, 2019 at 8:23 pm

      Hi again. I've just seen that all emails that I receive is a copy of the emails sent to all commenters who subscribed to the post with the plugin « subscribe to comment ».
      So I think the problem come from this plugin. Sorry...

    • Dominic Desbiens
      February 2, 2019 at 8:31 pm

      Ok, my latest comment. It really was this plugin. An option that send a copy of all notifications to the administrator. And an option for html emails was checked too (maybe there is a bug in their html template).


  3. David
    April 18, 2018 at 8:13 am

    James, what a great article, much appreciated, easy to follow even for those without a BSc in Artificial Intelligence, or IT for that matter.
    Re/ the other reply of yours: Yes, old article, but you can be proud it's still being found and read, right? Maybe, if you find "it's old" AND also sort of out-of-date, better you update it a bit than putting your articles down in any way ;-)
    You've built a truly great website here, congratulations.

    (unless I repost right after this, with thumbs up, you may correctly assume that your commenting system still has that error I mentioned)

  4. vsync
    April 15, 2018 at 1:15 pm

    What is the URL used in the element? ("action" attribute)

  5. set tv iptv service
    April 10, 2018 at 6:49 pm

    my followers! Great blog and terrific style and design.|

  6. Jack
    October 11, 2017 at 5:06 am


  7. mauro
    June 28, 2017 at 3:58 pm

    nice tutorial

  8. abs
    November 23, 2016 at 1:51 pm


  9. Andrew
    July 22, 2016 at 10:07 am

    Hi James. Useful snippet! Just one question: why are you passing `$commentdata=&get_comment($comment_ID, ARRAY_A);` by reference? It generates warnings if you have PHP's strict standards enabled (as only variables can be passed by reference).


  10. Alexgd12
    May 1, 2016 at 6:12 pm

    Really useful. Thank you

    • jh
      July 27, 2016 at 4:17 pm


  11. Rick
    February 25, 2016 at 4:38 am

    Hmm, very useful indeed.

  12. Sacha
    January 23, 2016 at 11:50 pm

    Just to point out, there are a number of good plugins which do this in one click. Try 'WP Ajaxify Comments'.

  13. Code Monkey
    January 20, 2016 at 7:08 pm

    does this still work?

  14. Steve
    December 28, 2015 at 11:51 pm

    The args on wp_notify_postauthor() were depricated in v3.8:

    Should be:
    echo "success";
    $commentdata=get_comment($comment_ID, ARRAY_A);

    Ran into a bug replying to posts through the dashboard. The comment-reply editor panel does not disappear, hence the 'success' echo.

  15. Tai
    December 25, 2015 at 3:04 am

    Thank you

  16. Anonymous
    October 28, 2015 at 1:10 am

    Is anyone getting a 500 Internal Server Error.

    I am and it seems to be because it's redirecting to the Post page.
    I commented that line out in the WP core and it works, but I'd really like a better solution.

    Not sure what's up. BTW this is only working for me with that line commented out and with none of the above PHP script.

    • Anonymous
      October 28, 2015 at 1:22 am

      While I didn't figure out the exact problem. I did have slightly different jQuery. I thought it wouldn't matter. Seems I was wrong. Working now! :)

  17. Anonymous
    October 25, 2015 at 1:55 pm

    it's amazing thank you so much
    i love this website :X

  18. Sumaiya
    September 29, 2012 at 11:00 am

    thanks for the great tutorial :)

  19. Arch!tect
    September 22, 2012 at 11:09 pm

    very useful. Thanks

  20. Shahrul
    September 22, 2012 at 12:54 am

    would you make a plugin for this? thanks

  21. Eric Schulzke
    September 20, 2012 at 8:13 pm

    I expect this can be done, but does this code lend itself to two parallel installations? I want to have one comment section where coauthors respond only to each other, and another where anyone can comment. How hard would this be to pull off?

    • James Bruce
      September 21, 2012 at 8:29 am

      This code can certainly be adapted, but the core WordPress comment posting won't allow that - there's no way to separate a comment stream by author. The most you can do is highlight authors and users, as we do here. You're talking about creating a custom database to store special author comments I think.

  22. John
    September 13, 2012 at 7:12 am

    Is it working on this page?

    • James Bruce
      September 13, 2012 at 7:32 am

      An older version of it is, yes. Since then I have implement the user comment being sent back to the browser to give a better indication oof it being posted correctly.

  23. varts.us
    September 12, 2012 at 5:19 pm

    Please take a time for my questions:

    1. After I added this, the comment form is shown above the commentlist. So how to move the comment form to below commentlist?

    2. There are any way to AJAX-ify the reply comment part?

    Thanks for great tut!

  24. omer
    September 9, 2012 at 1:38 pm

    I am getting this
    Parse error: syntax error, unexpected T_STRING in D:\wamp\www\wordpress\wp-content\themes\avada\functions.php on line 42

    That means

    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){

    • omer
      September 10, 2012 at 7:58 am

      I have fixed that error replace (&&) with (&) without brackets...
      but now i have another error to face ...

      Jquery is not loading .. when going to inspect element > console in chrome i get this error
      Uncaught ReferenceError: jQuery is not defined
      I have done every thing which is stated in this article ..
      P.S i am using it on localhost ... does this effect ?

      • muotechguy
        September 10, 2012 at 1:24 pm

        Sounds like you haven't loaded jQuery correctly. Can you check out the source and verify jquery is being loaded?

    • James Bruce
      September 10, 2012 at 8:04 am

      Don't run on a local WAMP server; put it on an actual website.

    • omer
      September 10, 2012 at 8:08 am

      All ok now .. errors were when i was using it on localhost.. i tried on live website now its working there too ..
      See the example at http://www.zemtv.com

      • Muzammil Hussain
        November 28, 2016 at 8:59 am

        You Rocks!

  25. Farzad Mohsenvand
    September 2, 2012 at 3:20 pm

    Its The Best Tutorial. Thank You

  26. Mike
    August 28, 2012 at 11:57 pm

    I couldn't see my first comment I don't know why?!

    • Tina
      August 29, 2012 at 3:20 am


      It's possible that it went into moderation. If it has not been published in the meantime, it probably didn't survive that step. Unfortunately, I can't tell you whether or not we deleted it or why.

  27. jeton
    August 23, 2012 at 12:11 am

    Testing the ajaxified comments

  28. Jafar
    August 16, 2012 at 9:27 am

    Woah nice tutorial.

  29. Simon
    August 15, 2012 at 10:22 am

    Hi there!
    Having problems with this workaround.

    At first, the form is submitted by ajax and I see the message "processing", but then it always turns into "please fill in all needed data" (ok, the message does not only have to do with the needed data, it simply means there has been an error during the process). The debug console of safari says that the directory the form is submitted to can't be found, though it IS the path to the current site. I tried any "permalink"-options, but still it doesn't work.

    Any ideas?

    • muotechguy
      August 15, 2012 at 1:31 pm

      Hi Simon - can you paste a link to your site here so I can take a look?

  30. omer
    August 14, 2012 at 12:13 am

    Nice tutorial .. i am gonna use it in my website .. can you please give me a hint on how did you make this easy to register through facebook twitter etc .. ?

    • James Bruce
      August 14, 2012 at 7:48 am

      Ours is through a third party provider that costs, but http://Janrain.com also do a free version you can use. I would suggest using LiveFyre for comments though, much better than this!

      • omer
        August 14, 2012 at 2:43 pm

        Thanks .. can you please specify more i don't want to host my comments somewhere else .. so that i can show comment count on each post .. is it possible with LiveFyre ?

        • Alexia
          August 14, 2012 at 2:48 pm

          LiveFyre does host your comments elsewhere, as well as locally in the WP DB. But yes, it shows comment count throughout your blog assuming your theme doesnt do anything weird.

  31. Jesse Gardner
    July 18, 2012 at 4:15 pm

    Wish there were a plugin that did this...

  32. Ashok
    July 9, 2012 at 9:00 pm

    Thanks. Used it on my blog

  33. Ryan
    July 7, 2012 at 2:06 am

    Is the PHP code really necessary? since you are already hijacking the the form and submitting all required data to wp-comments-post.php

    • muotechguy
      July 7, 2012 at 7:12 am

      Yes, that's what makes the AJAX part work and enables us to react on the front end.

  34. Fem
    July 5, 2012 at 9:55 am

    Nice Tutorial

  35. Jim
    July 3, 2012 at 5:52 am


  36. Pollux
    July 1, 2012 at 3:20 pm

    Is this suppose to post the comment with ajax as in the comment actually appears when it's submitted because I'm just getting the confirmation. I actually have to refresh the page to see the comments I posted.

    • ernestortiz
      July 7, 2012 at 5:24 pm

      As Pollux and Ray notticed, the page should be refresh in order to show the new comments (seem not so "ajaxed", isn't?).

      What I did today (for the site http://elbarcoebrio.com) was to append

      .done(function() {

      to $.ajax(), in the javascript. Nice enought.

      • muotechguy
        July 9, 2012 at 7:58 am

        Good hack, though that maybe ruins the whole point of it being AJAX. Here, I made a few changes to the JS now on this site, so it at least posts back what their comment is: http://pastebin.com/UHnPgf4J

        You may need a few changes to the CSS classes on the page too, please check out the source code of the comment area here for any differences.

    • Cass
      January 19, 2015 at 10:29 am

      That code works ( http://pastebin.com/UHnPgf4J)!

      Unfortunately, it is reloading my page. I have the comments hidden by default, and when the page reloads to show the comment, they are all hidden again.

      Any way to have AJAX show the new post without a page reload?

      • James Bruce
        January 19, 2015 at 9:01 pm

        Hi Cass, can you share your URL with me, james@ this site, I'll take a look and see if I can see what's wrong in the debug console.

  37. Mike
    June 24, 2012 at 4:23 pm

    just wanted to see this in action

  38. Ray
    June 18, 2012 at 10:52 am

    ps that is in my case (just checking here if its just in my case)

  39. Ray
    June 18, 2012 at 10:32 am

    Posts nicely the comment, but doesn`t refrehes the comments

  40. Rhys Davies
    June 14, 2012 at 8:05 am

    very useful tutorial just added this to my blog

  41. Oskar Karlin
    May 29, 2012 at 9:52 pm

    I'm using this script with the latest version of wordpress 3.3.2 and for some strange reason WordPress starts sending notification emails to the authors of the articles when using this ajax posting. If I disable the function and post "normal" by loading the page again, no email is sent to the authors.

    Do you have any clue of what's going on? Could it be a bug in WordPress or this script?

    • muotechguy
      May 30, 2012 at 8:08 am

      Not sure what you mean Oskar; this code does notify the post authors, certainly. As far as I'm aware, it's supposed to. I mean, notifying is default behaviour. Do you *not* want them notified?

      It could be that you have notifications *disabled* in post admin. This code forces it though, regardless of what you have set. Just comment out the wp_notify_postauthor function call if you don't want that behaviour.

      Does that help?

      • Oskar
        May 30, 2012 at 4:47 pm

        Oh! OK! I forgot to look in the php part, I thought there was some bug in wordpress but all it was wast the wp_notify_postauthor function. And no, I don't want authors to be notified.

        Thanks for your help!

  42. Felipe Veiga
    May 27, 2012 at 10:51 pm

    Never mind, delete my old comment, as when trying to just hit the spam and post the comment I was sent to the default WordPress comment error page, but when actually writing the comment the upload was ajaxified.

    Still, I would recommend for the less knowledgeable of PHP the plugin called Social

  43. Felipe Veiga
    May 27, 2012 at 10:47 pm

    The only part that really amazes me is the fact that Makeuseof is not currently using any of this on the WordPress install. 
    I would recommend for the less knowledgeable of PHP the plugin called Social.

  44. some1
    April 30, 2012 at 9:10 pm

    Having problemes with the code...

    • Tina
      May 3, 2012 at 8:01 pm

      What's the problem?

  45. LD Jackson
    April 28, 2012 at 8:20 pm

    Thanks for the tutorial. I am in the process of working this into my blog now.

  46. mike
    April 27, 2012 at 3:41 am

    nice tutorial, most of the plugins done work for this

    • Nasir Awan
      July 19, 2012 at 8:20 am

      Yeah there are many plugins I see. But still didn't found a reliable one. Planning to code my own soon!

      • andi
        December 15, 2016 at 7:14 pm

        if you do please share

      • marc
        February 14, 2019 at 11:18 am

        testing this issue