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 

One thought on “How To Ajaxify WordPress Comment Form

  1. I will try it

Share Your Thought