WordPress AJAX Comments
There are many functionalities on the web that were just begging to be AJAXified. Whether it be voting on a poll or simply commenting on a blog post, there's really no reason to reload an entire page for something so simple. This blog has featured AJAX comments in WordPress for years, but only recently did I find the most optimized way to process those comments. Here's how to handle the WordPress PHP side of AJAX comment systems.
The PHP
Add the following function with your theme's function.php file:
// Method to handle comment submission function ajaxComment($comment_ID, $comment_status) { // If it's an AJAX-submitted comment if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){ // Get the comment data $comment = get_comment($comment_ID); // Allow the email to the author to be sent wp_notify_postauthor($comment_ID, $comment->comment_type); // Get the comment HTML from my custom comment HTML function $commentContent = getCommentHTML($comment); // Kill the script, returning the comment HTML die($commentContent); } }
The function above receives the new comment ID (the comment is already posted to the DB at this point) and comment_status, if you care to know it. If the comment was submitted via AJAX, the comment metadata is retrieved, wp_notify_postauthor
is called to send an email notification about the new comment to the author, and the last step is outputting the formatted comment HTML, which my formatComment
function completes. The last step is adding a WordPress actions to trigger the function above:
// Send all comment submissions through my "ajaxComment" method add_action('comment_post', 'ajaxComment', 20, 2);
Now all new AJAX-submitted comments get filtered through the ajaxComment
method, outputting just the specific comment HTML, allowing you to insert the comment content into the relevant parent OL/UL element on the client side.
In the past, I've allowed the entire page to load and that was....slow. Very slow. The method described above allows for easy PHP/AJAX comment handling, allows other relevenat comment processing methods (including emailing the author of the post), and immediately outputs the comment HTML. Who thought it could be so easy?!
That’s a great script.
Thanks for sharing!
(btw, im testing your ajax-comment right now.)
no actual js code to hook into?
There are too many considerations; levels of nesting, comment format, which JS framework, etc. I’d never please anyone.
This is great! :)
Great tutorial David. Thanks.
It’s good tutorial!
Hello david. if i add this code snippet my comments gonna use ajax posting ? rhanks.
You’ll need to code your client side handlers; this will take care of the server side.
I cannot tell if this displays the new comment via ajax? Or just submits it via ajax. Cuz that’s only half the battle.
Dude, the 2nd to last sentence says “immediately outputs the comment HTML.” Can’t you read the article first before commenting? WTF!
Well, it works. But it breaks paged comments.
Any suggestions for how to retain paged comments with this code?
Yes, I seem to be smoking crack. Paged commenting is now working fine again, even with this function in place.
David, please ban me from your site. Sigh.
Thanks for the amazing code!
Nice!
where i past the last code please ?
Ty :)
Cool
Wow!
So does this work?
Looks like it does :)
where should I paste the code?
Nice! What do you think about the following. Is it possible? Make Mr. WordPress show on first page not only one comment after it splits the page for achieving the ‘X’ nr of comments but all of them and thus making wp insert one by one from the bottom onto the next page. Hope I am clear enough. I am asking and wondering about this because anyone that I’ve asked told me it can’t be done. Cheers!
Done it. Nvm!
Sweet!
Hi David! Thanks for the fully explained code :)
Ajax comments rule! Thanks
Boom, comment in
Hi David,
this is very interesting, but what do you need to do on the client/HTML/JavaScript side – how do you make the comment submission happen over AJAX/
XmlHttpRequest
rather than a full page postback/refresh? That’s not apparent from the source code of this page.Cheers,
Rick
I didn’t include the JavaScript piece because some people prefer jQuery, some people prefer MooTools, Dojo, YUI, etc. Additionally, some blogs use nested comments of variable level. It’s best that the individual blogger create JS for themselves.
Hi and thanks for sharing !
Shouldn’t all ajax calls in WordPress be made like :
Yes, but not in this case. Requesting directly wp-post-comment.php helps with not rebuilding the whole process of posting a comment, in which a lot is involved.
Hi David,
I’m thinking of AJAXifying the displayed comments too so that the page loads even faster, is it a good idea ?
I’ve thought of doing that in the past, but never pulled the trigger. I may do so in my next redesign.
The scipt not working for me on Ifeature theme.
I send the comment and page is reload:S
Ajax is the King … We rule. Thanks.
Any idea how I can implement this if the comment was made when the post is being pulled into a modal box? Thanks for any thoughts!!!
Thank you,But not working for me!!!
Wordpress v 3.6.1
Thanks David, this was helpful – comments are front end so ‘ajaxifying’ them makes sense
Do you use die() to output a HTML code? Is it serious?
Why don’t you do
print $commentContent;
After you can cut the execution, but I think only if wordpress doesn’t provide a wrapper for ajax requests.
What about comments respond via ajax?
Thanks for sharing David! Creating elements using ajax can be very beneficial to the overall user experience on your site. Comments or chat is really fun to implement with ajax..
Best tutorial i found on web. Simple and effective. I wanted to comment to see if you implemented too :D
One more question. I see that after I submit my comment it automatically appears on the comment section but on my page after implementing the code it doesn’t appear. I have to refresh the page for the comment to appear.
This post covers on the PHP side, not the JavaScript side. Since so many people use their own JS frameworks, I decided not to tackle that.
Thanks!
Thanks for sharing!! Testing ajax comments =D
Thanks for sharing, I’ll hope this works for me
Thanks, I’m not sure whether it’s working fine in the ajax loaded content.
wp_notify_postauthor
appears to be defunct now. It was depreciated in 3.8https://codex.wordpress.org/Function_Reference/wp_notify_postauthor
Actually it looks like only the second argument is deprecated, not the entire function. You only need
$comment_ID
as the argument now:wp_notify_postauthor( $comment_ID )
Testing :P Time to write some jQuery AJAX then.
Can you do it with raw AJAX without jquery?
Is
wp_notify_postauthor
still relevant to this method ?