Create Ajax Comments System in WordPress

In this article, we are going to discuss about How to create an ajax comments system in Wordpress. WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing and with fewer users than you can count on your fingers and toes. Since then it has grown to be the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every day.

Here is the code for creating ajax comments system in WordPress.

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');
var commentsdiv = $('.commentlist');
// define the infopanel

commentform.submit(function() {
    //serialize and store form data in a variable
    var formdata = commentform.serialize();
    //Add a status message
    statusdiv.html('<p>Processing...</p>');
    //Extract action URL from commentform
    var formurl = commentform.attr('action');
    //Post Form with data
    $.ajax({
        type : 'post',
        dataType: 'json',
        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) {
            console.log(data);
            
            if (data.comment_approved === "1"){
                statusdiv.html('<p class="ajax-success" >Thanks for your comment. We appreciate your response.</p>');
                commentsdiv.prepend('<li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="comment-1"><div class="comment-body" id="comment-body-1"><div class="comment-avatar-box"><div class="avb"><a href="http://vidibase.com/members/' + data.comment_author + '/" rel="nofollow"><img src="http://i0.wp.com/vidibase.com/wp-content/plugins/buddypress/bp-core/images/mystery-man.jpg" class="avatar user-1-avatar avatar-60 photo" width="60" height="60" alt="Avatar Image"></a></div></div><div class="comment-content"><div class="comment-meta"><p><a href="http://vidibase.com/members/' + data.comment_author + '/" rel="nofollow">' + data.comment_author + '</a> said on <a href="#"><span class="time-since">Just now</span></a></p></div><div class="comment-entry"><p>' + data.comment_content + '</p></div><div class="comment-options"></div><div class="clear"> </div></div></li>');
            }else{
                statusdiv.html('<p class="ajax-error" >Please wait a while before posting your next comment</p>');
                commentform.find('textarea[name=comment]').val('');
            }
        }
    });
    return false;

});

Add the below code in functions.php file

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
switch($comment_status){
case '0':
//notify moderator of unapproved comment
wp_notify_moderator($comment_ID);
case '1': //Approved comment

$commentdata=&get_comment($comment_ID, ARRAY_A);
$post=&get_post($commentdata['comment_post_ID']);
wp_notify_postauthor($comment_ID, $commentdata['comment_type']);
echo json_encode($commentdata);
break;
default:
echo "error";
}
exit;
}
}