If you’d like to ajaxify your WordPress comment form, here’s the easy way to do it:

1. Add “submitting comment” message:

Add inline style to hide it. This will be displayed when user submitting comment for UX reason.

2. Load javascript script & its javascript params

The path to file is made based on the assumption that this solution will be used as standalone plugin:

3. Send comment as AJAX call

What this script basically does1:

  1. Prevent comment form’s default behaviour.
  2. Display the submitting comment message added on step no.1
  3. Submit the comment form inputs using jquery-form‘s .ajaxSubmit()
  4. If the comment is successfully received, replace the comment area with comment area on the responseText which actually the HTML text of the submitted comment
  5. If an error occurred, translate the xhr.status into understandable error message

Here’s how it looks:

***

I’ve bundled the script above as a plugin which you can download here 2 . If you’re building complete solution as a theme, you can add-and-adjust the scripts above on your theme as well.


  1. Assuming that the comment form ID is #commentform and the comment area’s class is .comments-area 

  2. If download-upload-activate steps is too much of steps for you, give WP Pusher a try 

2 thoughts on “How To Ajaxify WordPress Comment Form

  1. I will try it

  2. Aleksandr

    Hello, thank you for plugin, if you help me i’ll be grateful.
    I add it to my theme, it work geat, but when i in hierarhical comment click on Reply, and publish comment, Comment form disappears, what i doing wrong?

Share Your Thought