When submitting the comment form, WordPress by default reloads the complete page. In case of an error (e.g. an invalid e-mail address or an empty comment field) the error message is shown on top of a new (blank) screen and the user has to use the browser’s back button to correct the comment form and post the comment again which is not very user-friendly.

Recently, I’ve released my first WordPress plugin WP-Ajaxify-Comments. This plugin hooks into any WordPress theme and adds AJAX functionality to the comment form: When the comment form is submitted, the plugin sends the data to the WordPress backend without reloading the entire page. In case of an error, the plugin shows a popup overlay containing the error message. If the comment was posted successfully, the plugin adds the (new) comment to the list of existing comments without leaving the page and shows an info overlay popup.

Since the plugin hooks (on client-side) into the theme to intercept the submit of the comment form and to add new comments without reloading the page, the plugin needs to access the DOM nodes using (jQuery) selectors. The plugin comes with default values for these selectors that were successfully tested with WordPress’ default themes “Twenty Ten” or “Twenty Eleven”. If the plugin does not work out of the box with your theme, custom selectors could be defined in the WordPress admin frontend (see FAQ).

Summarized the WP-Ajaxify-Comments plugin hooks into your theme and improves the usability of the comment form by validating and adding comments without the need of complete page reloads.

You find the most recent version of the plugin in the official WordPress plugin repository (Link). Please keep in mind, the plugin is still in a prototype state, so there could be some bugs. Please do not hesitate to contact me or to use the support forum, if you have problems to get the plugin working.