Only this pageAll pages
Powered by GitBook
1 of 28

Ajaxify Comments

Welcome to Ajaxify Comments

Post comments without a page reload

Ajaxify Comments allows you to post comments without a page reload. Any error messages are also rendered inline as well.

Ajaxify Comments hooks into the WordPress native comment system and is designed to work with most themes. The plugin is developer-friendly, customizable, and translatable.

See a Quick Demo

First Time Users

Loading...

Loading...

Loading...

Menu Helper

This goes over Menu Helper and how it can help you set up Ajaxify Comments

Menu Helper provides shortcuts in the admin bar and is helpful when you are first setting up the plugin. It is disabled by default but is easily enabled in the admin settings.

The Admin Bar Must Be Enabled: Menu Helper lives in the admin bar, so if you don't see Menu Helper, go to your user profile and enable the admin bar on the front end.

Menu Helper has the following tools and shortcuts:

  • Simulate Enabled/Disabled - Simulate the page with Ajaxify Comments enabled or disabled. This is useful for debugging and also testing out the plugin before enabling it on the site.

  • Launch Selector Helper - This tool scans your page and tries to find the comment selectors for you.

  • Close/Open Comments - Quickly open and close comments. Please note that for Selector Helper to work, comments must be open.

  • Preview Error Messages - Launch the preview notifications that come with Ajaxify Comments. This is useful for previewing the notifications on the front end.

  • Admin Shortcuts - Shortcuts to the admin settings and the selectors allow for quick navigation between the front and admin sections.

Here is how to enable Menu Helper and how to use some of the various shortcuts and tools included.

Enabling Menu Helper

To enable Menu Helper, head to the "Home" screen in the admin settings.

Toggle Menu Helper on and save the settings.

Accessing Menu Helper on the Front End

Navigate to a post with comments open and that has a few posted comments.

You'll find an Ajaxify menu item, which contains most of the Menu Helper tools and shortcuts.

Simulate Ajaxify Comments Enabled or Disabled

One of the first things you'll want to do after enabling Menu Helper is to simulate what Ajaxify Comments looks like on your site. Understandably after installing the plugin, you want to make sure it works before actually enabling it. This is why Ajaxify Comments is disabled by default in the admin settings.

By clicking Simulate Enabled, you can test how Ajaxify Comments works without affecting the site.

Once enabled, try to post and interact with the comment section, and check that the error handling is working by submitting a blank comment and a duplicate comment.

When you're done, click "Back to Post" in the admin bar.

If Ajaxify Comments is indeed enabled, then you'll see a Simulate Disabled option in Menu Helper.

This is useful if you are testing an integration, or troubleshooting another plugin and need to test what it's like with Ajaxify Comments disabled. When clicked on, there is a "Back to Post" option as well.

Use Selector Helper to Find Your Selectors

Selector Helper is a wizard that tries to scan your site's source code for the right comment selectors.

Comments must be enabled, and at least one comment should be posted.

The wizard will check if comments are enabled and at least one comment has been left on the post.

If you need to enable comments, there is a shortcut in Menu Helper.

If all checks pass, you'll see a success confirmation allowing the Selector Helper to run.

Selector Helper first checks that there is at least one comment and that comments are open. If the tests pass, it will scan the source for the comment selectors.

If all of the selectors have been found, you'll see a table of the found selectors, which you can then save.

Open and Close Comments

If you need to enable or disable comments, there is a shortcut in Menu Helper.

Preview Ajaxify Comment Notifications

You don't have to post comments to test the notifications. You can do it right from Menu Helper.

When Finished With Menu Helper

Menu Helper is not designed to be active all the time. If you are done with Menu Helper, you can disable it in the admin settings. There is a shortcut to the settings in the Menu Helper toolbar.

For more information on how to get set up, please see the Getting Started guide.

Customization

Loading...

Appearance Settings

You can adjust the appearance of the comment overlay in the Appearance settings.

A sticky preview bar shows so you can launch a preview after adjusting settings.

You can adjust the following:

  • Colors of the text and overlay

  • The opacity of the overlay

  • Padding and border-radius

  • Font size and alignment

  • Fade-in and fade-out speeds

Here's a GIF of how you can adjust the settings.

Advanced Topics

Loading...

Disable Scroll to Posted Comment (Anchor)

When leaving comments, Ajaxify Comments will try to scroll to the comment so it is in view when posted.

Disabling the Scroll to Anchor feature prevents any such scrolling from occurring.

Loading...

Loading...

Selectors

Selectors help tell Ajaxify Comments about your comment section.

Selectors can be an advanced topic, so it's best to allow Menu Helper to help with finding the right selectors.

To find the right selectors, it's recommended to open the developer tools in your browser and go to elements.

Selectors must be compatible with jQuery notation. IDs must have a # sign and classes must have a . in front of them.

Comments Container Selector

This container wraps the comments list. You can usually find it by opening the dev tools and finding an individual comment.

Trace this comment back to its parent container, and you'll find the container ID or class.

Comment Form Selector

This is the wrapper ID or class for the form element in the comments section.

This can usually be found by inspecting the comment form's textarea element and tracing it back to the form parent element.

Respond Selector

This wraps the respond area for the comment section.

You can usually find this by selecting the comment form's textarea and tracing it back to the form's parent container.

Comment Textarea Selector

This is the comment form's textarea field and can be found by selecting the comment's textarea.

Comment Submit Button Selector

This is the submit button for the comment section. It can be found by selecting the submit button and finding the ID or class of the button or input.

Advanced Selectors

Advanced Selectors must be in jQuery notation.

Loading...

Developers

Loading...

Loading...

Loading...

Loading...

Theme Integrations

Loading...

Loading...

Plugin Integrations

Loading...

Loading...

Quick Links

.

First Time Users
Spin up your demo WP install
Finding the Settings
Finding the Settings
Getting Started
LogoAjaxify Comments – Post Comments Without a ReloadWordPress.org

Changing Labels Programmatically

You can use filter dlxplugins/ajaxify/comments/options/pre_output to filter the options returned by the plugin.

The filter accepts 3 arguments:

  • $options: (array) Optioons array containing the labels.

  • $post_id: (int) Post ID of the comment being posted to.

  • $post_type: (string) Post type of the comment being posted to.

Here is an example of changing the labels for WooCommerce reviews:

<?php
/**
 * This snippet demonstrates changing the labels for the WooCommerce product reviews.
 */
add_action( 'plugins_loaded', 'dlx_my_ajaxify_plugins_loaded' );

/**
 * Run when the plugin is loaded.
 */
function dlx_my_ajaxify_plugins_loaded() {
	add_filter( 'dlxplugins/ajaxify/comments/options/pre_output', 'dlx_ajaxify_comments_options', 10, 3 );
}

/**
 * Modify options before they are output.
 *
 * @param array  $options    The options to output.
 * @param int    $post_id    The post ID the options are being output to.
 * @param string $post_type The post type the options are being output to.
 */
function dlx_ajaxify_comments_options( $options, $post_id, $post_type ) {
	// Check if WooCommerce product, and change a few strings.
	if ( 'product' === $post_type ) {

		// Change the text for the reviews and messages.
		$options['textPosted']                   = __( 'Your review has been posted. Thank you!', 'plugin-domain' );
		$options['textPostedUnapproved']         = __( 'Your review has been posted and is awaiting moderation. Thank you!', 'plugin-domain' );
		$options['textReloadPage']               = __( 'Reloading page. Please wait.', 'plugin-domain' );
		$options['textPostComment']              = __( 'Posting your review. Please wait.', 'plugin-domain' );
		$options['textRefreshComments']          = __( 'Loading reviews. Please wait.', 'plugin-domain' );
		$options['textUnknownError']             = __( 'Something went wrong, your review has not been posted.', 'plugin-domain' );
		$options['textErrorTypeComment']         = __( 'Please type your review text.', 'plugin-domain' );
		$options['textErrorCommentsClosed']      = __( 'Sorry, reviews are closed for this item.', 'plugin-domain' );
		$options['textErrorMustBeLoggedIn']      = __( 'Sorry, you must be logged in to post a review.', 'plugin-domain' );
		$options['textErrorFillRequiredFields']  = __( 'Please fill the required fields (name, email).', 'plugin-domain' );
		$options['textErrorInvalidEmailAddress'] = __( 'Please enter a valid email address.', 'plugin-domain' );
		$options['textErrorPostTooQuickly']      = __( 'You are posting reviews too quickly. Please wait a minute and resubmit your review.', 'plugin-domain' );
		$options['textErrorDuplicateComment']    = __( 'Duplicate review detected. It looks like you have already submitted this review.', 'plugin-domain' );

	}
	return $options;
}
Menu Helper

Getting Started

This will walk you through how to get started with Ajaxify Comments.

Set up the Selectors

Head to the admin settings and view the Selectors tab. Selectors tell Ajaxify Comments about your comment section.

If you are an advanced user, please enter the selectors that make up your comment section.

Use Menu Helper to Find the Selectors

Use Menu Helper: Find a post or page with comments and use Menu Helper to assist in finding your selectors.

Selectors are an advanced topic requiring you to inspect your comment section's HTML source. This is why Menu Helper was created. For first-time setup, Menu Helper is available to help you along.

Go ahead and enable Menu Helper.

Navigate to a Post or Page With Comments Enabled

Find a post with comments enabled and navigate to the front end of that post (i.e., view it on the site).

With the admin bar enabled, you'll see Ajaxify in the top admin bar.

Launch Selector Helper

Selector Helper is a wizard that tries to scan your site's source code for the right comment selectors.

Comments must be enabled, and at least one comment should be posted.

The wizard will check if comments are enabled and at least one comment has been left on the post.

If you need to enable comments, there is a shortcut in Menu Helper.

If all checks pass, you'll see a success confirmation allowing the Selector Helper to run.

Selector Helper first checks that there is at least one comment and that comments are open. If the tests pass, it will scan the source for the comment selectors.

If all of the selectors have been found, you'll see a table of the found selectors, which you can then save.

Use Menu Helper to Simulate Ajaxify Comments Enabled

You can simulate what Ajaxify Comments will look like when enabled. Using Menu Helper, select "Simulate Enabled."

This will refresh the page, and you can post comments as if Ajaxify Comments is enabled. A "Back to Post" button will allow you to return to the page without Ajaxify Comments enabled.

With Ajaxify Comments enabled, you can use Menu Helper to simulate the loading, error, and success messages that Ajaxify Comments uses. This is useful for adjusting the appearance and previewing the changes on the front end.

Leave a Few Test Comments

Leave a few test comments and ensure all error messages work (posting duplicate comments, empty comments).

Enable Ajaxify Comments

If comments are working as expected, it's time to enable Ajaxify Comments.

Using Menu Helper, visit the admin settings to enable Ajaxify Comments.

You can now enable Ajaxify Comments, and you can disable Menu Helper.

Success!

Help and Support

Lazy Loading Comments

Lazy loading comments can improve performance

Lazy-loading comments can improve the page load of your blog posts and pages. If there are a lot of comments on a post, this can slow down the page's loading speed.

Prerequisite: Please set your selectors first

Make sure you set your selectors first. You can use Menu Helper to help set your selectors.

Enabling Lazy Loading

Find the Lazy Load options in the admin settings. The first option on the page allows you to enable or disable lazy loading for comments.

Testing Lazy Loading

You can use Menu Helper to simulate lazy loading before it's activated.

Setting the Triggers

Here are the types of Triggers and what you can do for each one.

External Trigger

Comments do not load unless specifically invoked by an external source.

The external source will want to call this JavaScript function to load in the comments:

WPAC.RefreshComments();

Comments Scrolled Into Viewport

This option allows Ajaxify Comments to load when the comments section has been reached. This will be useful for never loading the comments for the user until that user reaches further down the page in the comments section.

You can adjust a vertical scroll offset (in pixels) to "trigger" loading a certain distance above the comments section.

Dom Ready (Default)

This will load comments once the page has finished loading. This is the default behavior.

Dom Element Reached

This option allows you to set which HTML element or CSS selector must be scrolled into view in order to load comments.

Use a valid CSS selector using jQuery notation (.css-class,#css-id,form)

For example, if you set a selector to some Related Posts at the bottom of your content, the comments will load in when the posts are scrolled into view.

You can set the scroll offset so that the loading occurs a certain number of pixels above the offset.

Units are in pixels: Scroll offset is in pixels.

Scroll Distance Trigger

You can set the loading trigger to be scroll distance. This will load the comments when a user reaches a certain number of pixels from the top of the screen.

Setting the Loading Settings and Messages

You can choose between an overlay or no overlay for lazy loading. An animation of the loading popover is below.

The Overlay can be configured in the Appearance settings.

WPML and Translations

Translate Ajaxify Comments with WPML

Translating Ajaxify Comments Labels

Translating the Remainder of Ajaxify Comments Strings

This guide will walk you through how to translate Ajaxify Comments using WPML.

Translating Ajaxify Comments Labels

Ajaxify Comments has several labels available to translate. Here's how to translate them using WPML.

Step 1: Discover which strings to translate

Ajaxify Comments has several labels that are displayed that can be translated. These can be found in the labels screen of Ajaxify Comments.

These labels are designed to be translated for one language, but you can use WPML and modify these labels per language.

Step 2: Activate and Setup WPML and WPML String Translation

Install WPML and WPML String Translation and follow the setup process for the plugin.

Step 3: Save any Ajaxify Options Screen

To register the strings for translation in WPML, we'll have to save the Ajaxify Comments settings.

Head to any of Ajaxify Comments admin screens and save the settings. This will register the strings.

Step 4: Head to WPML's Translation Management Screen

Head to the Translation Management screen, which you can find in the WPML menu item.

Step 5: Select the "Ajaxify" item from "All Types"

Select "Ajaxify" from the "Types" menu and filter. You can now select the "Ajaxify Comment Labels" item.

Step 6: Select Ajaxify Comment Labels and Queue for Translation

Select "Ajaxify Comment Labels" and click the "Add to Translation Queue" button.

Step 7: Head to the Translations screen to translate the options

Head to the "Translations" item under the WPML menu item.

Once on the "Translations" screen, you'll be able to select "Ajaxify Comment Labels" and translate those.

While on the translate screen, you'll see the old labels that you can translate into your new language.

Complete all of the translations, mark them as complete, and save.

Step 8: Preview on the Frontend

Head to the frontend, and try to post a few test comments while in the alternate language.

Translating the Remainder of Ajaxify Comments Strings

The labels are one small part of Ajaxify Comments. In order to translate Ajaxify Comments wholistically, you need to head to the Themes and Plugin Localization menu item under WPML.

Find the plugin Ajaxify Comments and scan for the strings.

While on the same screen, after scanning, select the "Ajaxify Comments" translation to edit it.

Alternatively, you can head to the Strings Translation under WPML and select the wp-ajaxify-comments domain.

Need more help?

Please reach out to support.

Callbacks

Callbacks allow you to run custom JavaScript code in certain parts of execution. For example, if you have an Edit Comments plugin, you can run a custom function that initializes the plugin after a comment has been posted.

Each callback can pass arguments, which are documented below and will be in scope for any custom JS functionality that needs to run.

A common use-case of callbacks is another plugin that needs to run before, during, and after Ajaxify Comments loads.

OnBeforeSelectElements Callback

This allows you to run JavaScript code before Ajaxify Comments has selected the DOM elements.

One argument is in scope, which is a jQuery representation of the DOM elements selected.

If you'd rather use a native JS event, you can use the event: wpacBeforeSelectElements

document.addEventListener( 'wpacBeforeSelectElements', function( e ) {
	console.log( 'Custom event fired:', e );
	console.log( 'Extracted body:', e.detail.dom );
} );

OnBeforeSubmitComment Callback

This callback provides no arguments.

If you'd rather use a native JS event, you can use the event: wpacBeforeSelectElements

document.addEventListener( 'wpacBeforeSelectElements', function( e ) {
	console.log( 'Custom event fired:', e );
} );

OnAfterPostComment Callback

Arguments:

  1. commentUrl (string)

  2. unapproved (boolean)

If you'd rather use a native JS event, you can use the event: wpacAfterPostComment

document.addEventListener( 'wpacAfterPostComment', function( e ) {
	console.log( 'Custom event fired:', e );
	console.log( 'Extracted body:', e.detail.commentUrl, e.detail.unapproved );
} );

OnBeforeUpdateComments Callback

Arguments

  • newDom (jQuery DOM element)

  • commentUrl (string)

If you'd rather use a native JS event, you can use the event: wpacBeforeUpdateComments

document.addEventListener( 'wpacAfterPostComment', function( e ) {
	console.log( 'Custom event fired:', e );
	console.log( 'Extracted body:', e.detail.newDom, e.detail.commentUrl );
} );

OnAfterUpdateComments Callback

Arguments

  • newDom (jQuery DOM element)

  • commentUrl (string)

document.addEventListener( 'wpacAfterUpdateComments', function( e ) {
	console.log( 'Custom event fired:', e );
	console.log( 'Extracted body:', e.detail.newDom, e.detail.commentUrl );
} );

Changelog

Changelog

2.0.11

2.0.9

Released 2023-10-03 Added CSS class to overlay for easier styling. Added WPML config for translatable string options.

2.0.7

Released 2023-09-30 Placed gettext call only on comment posting, improving performance. Resolved improper functions.php inclusion. New filter for changing options before they are output as JSON.

2.0.5

Released 2023-09-28 Refactoring lazy loading. It should be much more reliable now. It has been tested with Astra, Twenty Twenty-Three, and Genesis themes. Updating Menu Helper to simulate lazy loading on or off.

2.0.1

Released 2023-09-27 Lazy loading was referencing the wrong variable. This has been fixed.

2.0.0

1.7.5

Released 2023-08-30 Ensuring compatibility with WordPress 6.3.

1.7.4

Fixed HTML5 validation warning for script tag

1.7.3

Updated default value for "Comments container selector" to work with default theme "Twenty Twenty" without breaking compatibility to older (default) themes

1.7.2

Added compatibility to older WordPress versions (< 5.2.0) and to WordPress 5.6

1.7.1

Added compatibility to latest WordPress versions >### 5.5.0 Updated Waypoints library to 4.0.1 Updated jQuery blockUI plugin to 2.70.0 Updated Idle Timer to 1.1.1 Updated jsUri to 1.3.1

1.7.0

Preserve focus element when reloading comments Fixed deprecated error in PHP 7.4

1.6.2

Added compatibility to latest WordPress versions

1.6.1

Optimized JavaScript injection

1.6.0

Removed dependency to PHP session

1.5.1

Fixed "Undefined variable: wpac_options"

1.5.0

Added JavaScript callback "OnAfterPostComment"

1.4.1

Prevent the comment form from being submitted multiple times in parallel Fixed PHP notice "Undefined index: pagenow" (thanks to ravipatel)

1.4.0

Added (expert) option "Enable by query"

1.3.0

Added request parameters "WPACAll", "WPACSkip" and" WPACTake" to query comments

1.2.0

Added (expert) option "Disable cache" Use GET request when updating comments

1.1.1

Fixed link to settings page in admin frontend

1.1.0

Fixed compatibility to WordPress 4.1 Changed plugin name from "WP-Ajaxify-Comments" to "WP Ajaxify Comments"

1.0.0

Changed plugin owner to weweave an added professional support Added (expert) option "Base URL" to support reverse proxy configuration Fixed page title update for titles containing UTF-8 characters Typo fix in default localization

0.25.0

Loading comments now updates page title (thanks to Jincheng Shan) OnBeforeSubmitComment callback is now called before submitUrl is extracted

0.24.1

Updated localization for zh-CN (thanks to Jincheng Shan) Added CDATA tag for inline JavaScript (thanks to Jincheng Shan)

0.24.0

Added parameter commentUrl to callbacks OnBeforeUpdateComments and OnAfterUpdateComments

0.23.1

Changed order of links in plugin overview Make sure WPAC._Options is always initialized Bugfix for comment paging links

0.23.0

Added (expert) option "Place scripts in footer" Added option "Comment links selector" to prevent (complete) page loads for comment links on pages if "Break comments into pages [...]" is enabled Bugfix for "Users must be registered and logged in to comment" Fixed PHP Notice for PHP < 5.4.0

0.22.0

Minor optimizations Added (expert) option "Optimize AJAX response" to save bandwidth Fixed JavaScript includes for HTTPS

0.21.0

Added option "Disable scroll to anchor" Fixed paging support and async comment loading for pages where comments are closed Fixed compressed JavaScript file Fixed support for URLs with comments anchor if async comment loading is enabled

0.20.0

Added option "Post container" to support for multiple comment forms per page Added option "Comment pages URL regex" to support none default WordPress comment pages

0.19.0

Added parameter newDom to callbacks OnBeforeUpdateComments and OnAfterUpdateComments Fixed JavaScript error "TypeError: WPAC._Options is undefined" (thanks to Suzanne Ahjira) Fixed JavaScript error in Internet Explorer (thanks to timhengeveld)

0.18.1

Fixed double slashes in JavaScript include (thanks to Mr Press)

0.18.0

Added option to define when to load comments asynchronously with secondary AJAX request Optimized JavaScript includes (use compressed/merged JavaScript file and only include files if they are needed)

0.17.3

Fixed "Undefined index" PHP notice (thanks to fergomez)

0.17.2

Fixed compatibility to wpMandrill (thanks to paddywagon)

0.17.1

"OnAfterUpdateComments" callback is now called after form data has been reset

0.17.0

Added options to customize (default) WordPress messages Disabled (auto) scrolling when comments are updated by "Auto update idle time" Fixed compatibility to jQuery "no conflict mode"

0.16.1

Bugfix for cross-domain scripting detection

0.16.0

Added option "Auto update idle time" to automatically update comments if user is "idle" Updated jQuery blockUI to 2.64

0.15.0

Added option to disable URL updating

0.14.3

Fixed some PHP strict warnings

0.14.2

Fixed compatibility to PHP < 5.4.0

0.14.1

Fixed compatibility to jQuery "no conflict mode"

0.14.0

Added options to customize texts WPAC.RefreshComments() and WPAC.LoadComments() now accept option object (and added option "showLoadingInfo" to suppress loading overlay) Updated jQuery blockUI to 2.61 Added jsuri 1.1.1 to avoid query strings with duplicated WPAC fallback parameters

0.13.1

Comment paging now updates browser URL Added localization for da-DK (thanks to Bjarne Maschoreck) Bugfix for themes where comment form is not nested in comment container Bugfix for clearing all settings (thanks to HarroH)

0.13.0

Ajaxified comment paging Improved debug support for cross-domain scripting problems

0.12.1

Hotfix for environments where PHP is not installed as an Apache module

0.12.0

Bug-fix: Options are no longer saved if validation fails Refactored and extended client-side JavaScript API Updated localization for de-DE Added option to load comments asynchronously with secondary AJAX request

0.11.0

Added localization for hu-HU (thanks to Patrik Bagi) Added option to customize the overlay's width Added option to customize the overlay's padding

0.10.0

0.9.0

0.8.0

Added option to customize the font size Added i18n support for admin frontend

0.7.0

Added JavaScript callback ("Before select elements")

0.6.3

Added localization for ar (thanks to sha3ira)

0.6.2

Fixed some PHP warnings (thanks to petersb) Fixed HTTPS check for ISAPI under IIS Added support for non-standard HTTP port Fixed handling of unexpected/unsupported server responses

0.6.1

Added localization for ru-RU and uk (thanks to Валерий Сиволап)

0.6.0

Added JavaScript callbacks ("Before update comments" and "After update comments")

0.5.4

jQuery 1.7+ compatibility: Use on() or delegate() if available instead of deprecated live() (thanks to tzdk)

0.5.3

Added localization for tr-TR (thanks to Erdinç Aladağ) Added localization for pt-BR (thanks to Leandro Martins Guimarães)

0.5.2

Added localization for fa-IR (thanks to rezach4)

0.5.1

Updated localization for zh-CN (thanks to Liberty Pi) Updated jQuery blockUI to 2.42 (thanks to Mexalim)

0.5.0

Success overlay now supports comments that are awaiting moderation Add "?" when commentUrl has no query string to reload page in case of partial page update fails More detailed debug messages and debug support for Internet Explorer 9 Added localization for ca (thanks to guzmanfg)

0.4.1

Added localization for nl-NL (thanks to Daniël Tulp)

0.4.0

Success and error overlays now show default cursor instead of loading cursor Fixed problems for translations containing double quotes Cancel AJAX request if cross-domain scripting is detected Added options to customize the look and feel Added localization for vi-VN (thanks to Nguyễn Hà Duy Phương) Added localization for es-ES (thanks to guzmanfg) Updated localization for de-DE

0.3.4

Added localization for pl-PL (thanks to Jacek Tomaszewski)

0.3.3

Bugfix for Internet Explorer

0.3.2

Added localization for fr-FR (thanks to saymonz)

0.3.1

Added localization for zh-CN (thanks to Liberty Pi)

0.3.0

Added i18n support Added localization for de-DE

0.2.1

Fallback mode reloads page with comment anchor Bug-fix for themes where comment form is nested in comments container (thanks to saymonz)

0.2.0

Added Option "Error Container Selector" to customize the error message extraction Added compatibility with comment spam protection plugins like "NoSpamNX" (thanks to Liberty Pi) Removed timeout for loading overlay (thanks to saymonz)

0.1.2

Fixed compatibility with setting pages of other plugins (thanks to saymonz) Reactivated warning and info notices on admin page "Plugins"

0.1.1

Fixed updating of browser address bar

0.1.0

Support for themes with threaded comments where form tag is not nested in comment container (Smooth) scrolling to new comment after new comment has been posted Update browser address bar to show comment URL after new comment has been posted Abort plugin initialization on pages and posts where comments are not enabled Info overlay when complete page reload is performed in fallback mode

0.0.2

Fixed error with warning and info notices on admin page "Plugins"

0.0.1

Initial release

Upgrade Notice

1.7.4

Fixed HTML5 validation warning for script tag

1.7.3

Updated default value for "Comments container selector"

1.7.2

Added compatibility to older WordPress versions (< 5.2.0) and to WordPress 5.6

1.7.1

Added compatibility to latest WordPress versions >### 5.5.0 and updated external libraries

1.7.0

Preserve focus element when reloading comments and fixed deprecated error in PHP 7.4

1.6.2

Added compatibility to latest WordPress versions

1.6.1

Optimized JavaScript injection

1.6.0

Removed dependency to PHP session

1.5.1

"Undefined variable: wpac_options"

1.5.0

Added JavaScript callback "OnAfterPostComment"

1.4.1

Prevent the comment form from being submitted multiple times in parallel, fixed PHP notice "Undefined index: pagenow"

1.4.0

Added (expert) option "Enable by query"

1.3.0

Added request parameters "WPACAll", "WPACSkip" and "WPACTake"

1.2.0

Added (expert) option "Disable cache", use GET request when updating comments

1.1.1

Fixed link to settings page in admin frontend

1.1.0

Fixed compatibility to WordPress 4.1

1.0.0

Added (expert) option "Base URL" to support reverse proxy configuration, fixed page title update for titles containing UTF-8 characters, typo fix

0.25.0

Loading comments now updates page title, OnBeforeSubmitComment callback is now called before submitUrl is extracted

0.24.1

Updated localization for zh-CN

0.24.0

Added parameter commentUrl to callbacks OnBeforeUpdateComments and OnAfterUpdateComments

0.23.1

Changed order of links in plugin overview, Make sure WPAC._Options is always initialized, Bugfix for comment paging links

0.23.0

Added (expert) option "Place scripts in footer", Bugfix for "Users must be registered and logged in to comment", Added option "Comment links selector", Fixed PHP Notice for PHP < 5.4.0

0.22.0

Minor optimizations, Added (expert) option "Optimize AJAX response", Bugfix for HTTPS

0.21.0

Added option "Disable scroll to anchor", Bugfixes for pages where comments are closed and/or async comment loading is enabled, Fixed compressed JavaScript file

0.20.0

Added support for multiple comment forms per page and support for none default WordPress comment pages

0.19.0

Added parameter newDom to callbacks OnBeforeUpdateComments and OnAfterUpdateComments, Fixed JavaScript errors

0.18.1

Fixed double slashes in JavaScript include

0.18.0

Optimized JavaScript includes, Added option to customize trigger for asynchronous comment loading

0.17.3

Fixed "Undefined index" PHP notice

0.17.2

Fixed compatibility to wpMandrill

0.17.1

"OnAfterUpdateComments" callback is now called after form data has been reset

0.17.0

Options to customize (default) WordPress messages, Disabled (auto) scrolling when comments are updated by "Auto update idle time", Fixed compatibility to jQuery "no conflict mode"

0.16.1

Bugfix for cross-domain scripting detection

0.16.0

Added option to automatically update comments if user is "idle", Updated jQuery blockUI to 2.64

0.15.0

Added option to disable URL updating

0.14.3

Fixed some PHP strict warnings

0.14.2

Fixed compatibility to PHP < 5.4.0

0.14.1

Fixed compatibility to jQuery "no conflict mode"

0.14.0

Added options to customize texts, Updated jQuery blockUI to 2.61, Improved client-side API, Added jsuri 1.1.1 to optimize query string sin fallback URLs

0.13.1

Bug-fixes, improved URL updating, added localization for da-DK

0.13.0

Ajaxified comment paging, added localization for da-DK

0.12.1

Hotfix for environments where PHP is not installed as an Apache module

0.12.0

Bug-fixes, refactored and extended client-side JavaScript API

0.11.0

Added localization for hu-HU, added more options to customize the overlays

0.10.0

Added localization for he-LI, added JavaScript callback ("Before submit comment"), updated jQuery blockUI to 2.57

0.9.0

Added JavaScript method wpac_init(), optimzed SQL queries, fixed debug alert in IE 9, added localization for sk-SK

0.8.0

Added option to customize the font size, i18n support for admin frontend

0.7.0

Added JavaScript callback ("Before select elements")

0.6.3

Added localization for ar

0.6.2

Some bug-fixes

0.6.1

Added localization for ru-RU and uk

0.6.0

Added JavaScript callbacks

0.5.4

jQuery 1.7+ compatibility

0.5.3

Added localization for tr-TR and pt-BR

0.5.2

Added localization for fa-IR

0.5.1

Updated localization for zh-CN, Updated jQuery blockUI to 2.42

0.5.0

Bug-fix, support for comments that are awaiting moderation, more detailed debug messages & debug support for IE 9, added localization for ca

0.4.1

Added localization for nl-NL

0.4.0

Bug-fix, added options to customize the look and feel, added localizations (vi-VN and en-ES), updated localization for de-DE

0.3.4

Added localization for pl-PL

0.3.3

Bug-fix

0.3.2

Added localization for fr-FR

0.3.1

Added localization for zh-CN

0.3.0

Added i18n support

0.2.1

Bug-fix & minor improvements

0.2.0

Added compatibility with comment spam protection plugins

0.1.2

Bug-fix

0.1.1

Bug-fix

0.1.0

Better theme support (for threaded comments) and new features

0.0.2

Bug-fix

Disable URL Updating

Ajaxify Comments will try to update the URL location bar to keep track of its state. You can disable this feature if you wish to prevent the URLs from being updated dynamically.

Here is an example of a dynamic URL created:

Script Debugging

Uncompressed Scripts

All five Ajaxify Comments scripts will load separately if:

  • Uncompressed scripts are enabled

  • Debug mode is enabled for the plugin

Always Include Scripts

This will load Ajaxify Comments everywhere. Please note that if debug mode is enabled, Ajaxify scripts will load everywhere in that case as well.

Loading scripts in the footer

It is always advisable to load scripts in the footer for performance reasons.

Scripts will load in the footer if:

  • Place scripts in the footer is enabled

  • Debug mode is enabled

  • SCRIPT_DEBUG is enabled

Actions and Filters

Action: Execute code before Ajaxify starts loading in

Action definition:

/**
 * Fires before the main WPAC actions/filters. Useful for hooking in early.
 */
do_action( 'dlxplugins/ajaxify/comments/wp' );

Action: Execute code after Ajaxify enqueues its scripts

Action definition:

/**
 * Do action after scripts are enqueued.
 */
do_action( 'dlxplugins/ajaxify/comments/enqueue_scripts', $version, $in_footer );

This action is executed after all of Ajaxify Comments' scripts have been enqueued. This is useful to run custom scripts after Ajaxify Comments.

Filter: Force Ajaxify Comments to load

Regardless if Ajaxify Comments is disabled, you can pass true to force load the scripts and functionality needed to take over the comment section. This can still be overruled by the dlxplugins/ajaxify/comments/can_load filter.

Filter definition:

/**
 * Filter whether to load the plugin's scripts.
 *
 * @param bool $can_force_script_override Whether to load the plugin's scripts. Pass `true` to force scripts to load.
 */
$can_force_script_override = apply_filters( 'dlxplugins/ajaxify/comments/force_load', false );

Filter: Block Ajaxify Comments from loading

Prevent any loading of Ajaxify Comments scripts or functionality regarding the comment section.

Filter definition:

/**
 * Filter whether to load the plugin's scripts.
 *
 * @since 2.0.0
 *
 * @param bool $can_load Whether to load the plugin's scripts. Pass `false` to prevent scripts from loading.
 */
$can_load = apply_filters( 'dlxplugins/ajaxify/comments/can_load', true );
if ( ! $can_load ) {
	return;
}

Filter: Prevent Activation Redirect

This next filter, if false is returned, will not redirect the plugin to the plugin's settings screen after activation.

Filter definition:

/**
 * Filter whether to redirect on plugin activation.
 *
 * @param bool $can_redirect Whether to redirect on plugin activation. Pass `false` to prevent redirect.
 */
$can_redirect = apply_filters( 'dlxplugins/ajaxify/comments/activation/can_redirect', true );

Filter: Return a Custom Color Palette in the Admin

Ajaxify Comments allows changing the alert and text colors in the Appearance settings of the admin.

When selecting colors, Ajaxify attempts to get the theme's colors. You can return custom colors by hooking into this next filter.

Filter definition:

/**
 * Filter the color palette.
 *
 * @param array $color_palette Color palette {
 *   @type string $name Primary color name.
 *   @type string $slug Primary color slug.
 *   @type string $color Primary color hex or var.
 * }
 */
return apply_filters( 'ajaxify/comments/theme_color_palette', $color_palette );

Filter: Filter the options before they are output as JSON

Filter the options before they are output via JSON as settings. This can be used to manipulate labels or settings per post and post type.

Filter definition:

/**
 * Filter the options before they are output.
 * This is useful for adding custom options or modifying labels.
 *
 * @param array  $options The options to be output.
 * @param int    $post_id The post ID.
 * @param string $post_type The post type.
 */
$options = apply_filters(
	'dlxplugins/ajaxify/comments/options/pre_output',
	$options,
	get_the_ID(),
	get_post_type( get_the_ID() )
);

Need an action or filter?

Labels and Translations

Head to the Labels tab in the admin settings.

All labels shown to the users should be listed here, and you can update the language used for each label.

For translating Ajaxify Comments using WPML, please check out the link below.

Ollie

Ollie is a block theme for WordPress

Ollie has a different selector structure than a lot of themes. While FSE is catching on and themes are changing, we will update the selectors as needed.

These selectors are for reference until they can be built into Menu Helper.

Ollie Comment Selectors

Comments Container

Comments List Container

Comment Form

Respond Textarea Selector

Comment Textarea Selector

Comment Submit Button Selector

Paging Links Selector

Comment Links Selector

Comment Edit Core

Edit comments with Ajaxify Comments

Comment Edit Core allows you to edit comments for up to 5 minutes.

To ensure compatibility between Comment Edit Core and Ajaxify Comments, you can update the OnAfterUpdateComments callback with the following snippet:

You should now be able to edit comments when new comments are posted.

Confetti

Show Confetti when someone leaves a comment.

Ajaxify Comments is compatible out of the box with the Confetti plugin.

The pro version is equally capable and has many more styles.

Finding the Settings

Finding the Admin Settings From the Plugins Screen

If you are on the plugin's screen, search for Ajaxify Comments and click on the Settings link.

Finding the Admin Settings from the Menu

Alternatively, in the admin menu, head to Settings->Ajaxify Comments.

Installing the Plugin

Install from the WordPress Admin

  1. Log into your WordPress admin (i.e., your dashboard)

  2. Go to Plugins->Add New

  3. Type in "Ajaxify Comments"

  4. Install and Activate the plugin

After activation, you can find the plugin's settings in the Dashboard under Settings->Ajaxify Comments.

Install via FTP

  1. Unzip the plugin zip in a place you can remember for the next steps

  2. Log into your FTP program of choice for your website

  3. Upload the unzipped folder into wp-content/plugins

  4. Log into your admin dashboard

  5. Head to the plugins screen

  6. Search for Ajaxify Comments.

  7. Activate the plugin

After activation, you will be taken to the plugin's settings screen.

When first installed, is disabled by default. This is so you can set up the selectors and appearance of Ajaxify Comments before enabling the plugin.

Please . A lot of work has gone into making this plugin, and star ratings help spread awareness of the plugin and help improve the plugin's reputation.

If you need help or support, please use the or the .

is a popular multi-language plugin that allows you to translate strings for multiple languages using WordPress.

You need the WPML Multilingual CMS plan: The comes with the , which you'll need to translate Ajaxify Comments.

Released 2023-10-06 Added support for the Ollie theme. Updated Menu Helper to better support block-enabled themes. Added WPML support to the plugin ().

Released 2023-09-24 Renamed WP Ajaxify Comments to Ajaxify Comments in the admin. Updated branding. Completely refreshed admin interface. The admin is now organized into tabs with quick saving and reset options. Appearance tab allows for a real-time preview of the plugin's appearance. Appearance tab is a lot more user friendly, allowing for easy customization of the plugin's appearance. Added Support tab with helpful links to documentation and support. Removed admin notice on plugins screen. Replaced admin notice with contextual plugin row notice. This will display whenever debug mode is on, or if the plugin is disabled. Added first-time-installation notice for new users who are new to setting up the plugin. Added synthetic callback events for the available callbacks. This allows developers to hook into the plugin's events without having to modify the plugin's code. Callbacks have a slightly more secure implementation and execution. Added a tool called Selector Helper, which will help users find the right selectors for their theme. Please for more information.

Added localization for he-LI (thanks to Siman-Tov Yechiel ()) Added JavaScript callback ("Before submit comment") Updated jQuery blockUI to 2.57

Added JavaScript method wpac_init() to enable manual client side initialization Optimized SQL queries (thanks to Geleosan) Added validation for "scrollSpeed" option Fixed debug alert message in IE 9 Added localization for sk-SK (thanks to Branco, Slovak translation ())

The source files for the scripts are in .

Please .

Ajaxify Comments is a free plugin: Please on the WordPress Plugin Directory

Download the plugin zip file

Ajaxify Comments
leave a star rating
.org forums
support form on DLX Plugins
Selectors
Menu Helper
Finding the Settings
Menu Helper
Appearance Settings
WPML
Multilingual CMS plan
String Translator add-on
Labels and Translations
Finding the Settings
docs on how to set this up
read the announcement post
www.wpstore.co.il
WebHostingGeeks.com
/src/js/frontend
in the GitHub repo
Appearance Settings
Changing Labels Programmatically
contact support
WPML and Translations
.wp-block-comments
.wp-block-comment-template
#commentform
#respond
#comment
#submit
.wp-block-comments .wp-block-comments-pagination a
.wp-block-comments a[href*="/comment-page-"]
window.SCE_comments_updated(commentUrl)
LogoOllieWordPress.org
LogoComment Edit LiteWordPress.org
LogoConfettiWordPress.org
WordPress.org Version
LogoConfettiWP Sunshine
Confetti Pro Version
visit the plugin
from the WordPress Plugin Directory

Twenty Twenty-Three

Twenty Twenty-Three is a default block theme for WordPress.

Twenty Twenty-Three has a different selector structure than a lot of themes. While FSE is catching on and themes are changing, we will update the selectors as needed.

These selectors are for reference until they can be built into Menu Helper.

Twenty Twenty-Three Selectors

Comments Container

.wp-block-comments

Comments List Container

.wp-block-comment-template

Comment Form

#commentform

Respond Textarea Selector

#respond

Comment Textarea Selector

#comment

Comment Submit Button Selector

#submit

Paging Links Selector

.wp-block-comments .wp-block-comments-pagination a

Comment Links Selector

.wp-block-comments a[href*="/comment-page-"]
LogoTwenty Twenty-ThreeWordPress.org
Menu Helper is a menu in the admin bar
Home Screen for Ajaxify Comments
Enable Menu Helper and save the settings
Simulate Enabled Option in Menu Helper
Back to Post option in Menu Helper
Simulate Disabled Option in Menu Helper
Error When Comments Are Disabled
Open Comments Option in Menu Helper
Initial Step of Selector Helper
Selectors Found with Selector Helper
Open Comments Option in Menu Helper
Test Notifications With Ajaxify Enabled
Appearance Settings for the Comment Overlay
Adjusting the Appearance With Preview Bar
Advanced Tab Option for Disable Scroll to Anchor
Selectors in the Admin Settings
Default Selectors Shown
Find the wrapper around the individual comments
Find the ID or Class of the comment form element
The Respond Selector wraps the comment form
Textarea field that shows the ID of the textarea
Submit Button Selector Example
Ajaxify Comments Admin Screen
Selectors Admin Screen
Menu Helper in the Enabled State
View "Ajaxify" in the Top Admin Bar
Error When Comments Are Disabled
Open Comments Option in Menu Helper
Initial Step of Selector Helper
Selectors Found with Selector Helper
Simulate Ajaxify Comments Enabled
Extra Options When Enabled
An Example of Posting a Comment With Errors
Use Menu Helper to Visit the Admin Settings
Admin Options Showing Ajaxify Comments Enabled
Successful Comment Submission
Lazy Loading Admin Options
Enable Lazy Loading Option
Simulate Lazy Loading Enabled or Disabled
The Types of Lazy Load Triggers
Comments Scrolled Into Viewport Option
Dom Ready Option
Dom Element Reached
Load Comments a Number of Pixels from the Top
Overlay Options
Lazy Loading Overlay
Labels Tab in Ajaxify Comments Settings
WPML's Translation Management Screen
Ajaxify Comments on the Translation Management Screen
Queue Ajaxify Comments for Translation
Translations Menu Item Under WPML
Ajaxify Comment Labels
Ajaxify Comment Labels Translations Screen
Translating Ajaxify Labels
Translations on the Frontend
Themes and Plugins Localization Screen
Select Ajaxify Comments and Scan Plugin Strings
Translate Ajaxify Comment Strings
Look for 'wp-ajaxify-comments' on the Strings Translation Page
URL Updating is Enabled by Default
Example Dynamic URL
Script Debugging Options in the Advanced Section
Labels Tab in Ajaxify Comments Settings
OnAfterUpdateComments Callback for Comment Edit Core
Confetti when leaving a comment
Ajaxify Comments Admin Setting
Ajaxify Comments Plugin Row
Settings Menu in WordPress
Install Ajaxify Comments via the Admin