Ronald Huereca

weweave

<p>Skip page reloads and separate error screens when posting comments. Ajaxify Comments hooks into your native WordPress comment system and allows comment posting without a page reload. Lazy loading is also supported, which can help speed up your page load time.</p>
<h3>TLDR</h3>
<p><a href="https://docs.dlxplugins.com/v/ajaxify-comments/first-time-users/getting-started" rel="nofollow ugc">Getting Started</a> | <a href="https://github.com/sponsors/DLXPlugins" rel="nofollow ugc">Sponsor Us</a> | <a href="https://dlxplugins.com/plugins/ajaxify-comments" rel="nofollow ugc">Ajaxify Home</a></p>
<p>Ajaxify Comments hooks into your theme and improves the usability of the comment form by validating and adding comments without the need of page reloads. Users can remain on the page and interact with new comments as they’re posted. This plugin also supports lazy loading of comments, which can help speed up your page load time.</p>
<h3>Introduction</h3>
<p>When submitting the comment form, WordPress by default reloads the entire page. This can be a disorienting experience for the user. In the case of errors in the comment (invalid email, duplicate comment, empty comment), these often require a separate error screen and the user has to use the back button to edit their comment. This can be a frustrating experience for the user. Adding to that, comments can be resource intensive, and can slow down your page load time.</p>
<p>With Ajaxify Comments, comments are posted without a page reload. If there are errors, the error message is shown immediately, so the user can correct their comment.</p>
<p>Ajaxify Comments also comes with lazy loading of the comments section. For a page with a lot of comments, this can speed things up considerably. You can load comments when the DOM is ready or when the comment section is scrolled into view.</p>
<p>Moreover this plugin includes an option to automatically refresh the comments on the current page while the user stays on your page without requiring a page reload. This can be helpful in busy comment sections where reply response time is important.</p>
<h3>Quick Resource Links</h3>
<p>Here are some helpful links to help you get started with Ajaxify Comments (docs):</p>
<ol>
<li><a href="https://docs.dlxplugins.com/v/ajaxify-comments/first-time-users/getting-started" rel="nofollow ugc">Getting Started Guide</a></li>
<li><a href="https://docs.dlxplugins.com/v/ajaxify-comments/advanced-topics/lazy-loading-comments" rel="nofollow ugc">Lazy Loading Comments</a></li>
<li><a href="https://docs.dlxplugins.com/v/ajaxify-comments/first-time-users/menu-helper" rel="nofollow ugc">Menu Helper and Selectors</a></li>
<li><a href="https://docs.dlxplugins.com/v/ajaxify-comments/advanced-topics/wpml-and-translations" rel="nofollow ugc">Translating Using WPML</a></li>
</ol>
<h3>Requirements and Compatibility</h3>
<p>Please use the native WordPress comment system with Ajaxify Comments.</p>
<p>The plugin has integrations with:</p>
<ol>
<li><a href="https://wordpress.org/plugins/confetti/" rel="ugc">Confetti</a> – Show confetti when a comment is posted.</li>
<li><a href="https://wordpress.org/plugins/simple-comment-editing/" rel="ugc">Comment Edit Core</a> – Allow users to edit their comments.</li>
<li><a href="https://dlxplugins.com/plugins/comment-edit-pro/" rel="nofollow ugc">Comment Edit Pro</a> – Add numerous utilities and automations to your comment section.</li>
</ol>
<p>The following themes are supported out of the box:</p>
<ol>
<li><a href="https://wordpress.org/themes/astra/" rel="ugc">Astra</a></li>
<li><a href="https://wordpress.org/themes/blocksy/" rel="ugc">Blocksy</a></li>
<li>Divi</li>
<li>Genesis</li>
<li><a href="https://wordpress.org/themes/ollie/" rel="ugc">Ollie</a></li>
<li><a href="https://wordpress.org/themes/generatepress/" rel="ugc">GeneratePress</a></li>
<li><a href="https://wordpress.org/themes/neve/" rel="ugc">Neve</a></li>
<li>Twenty Ten – Twenty Twenty Three</li>
</ol>
<p>Ajaxify Comments should be compatible with most block themes. If <a href="https://docs.dlxplugins.com/v/ajaxify-comments/first-time-users/menu-helper" rel="nofollow ugc">Menu Helper</a> can’t find the selectors, please leave a support request.</p>
<h3>Technical Note</h3>
<p>Since the plugin hooks into the theme on client-side to intercept the comment form submit process, 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”, “Twenty Eleven”, “Twenty Twelve”, “Twenty Thirteen”, “Twenty Fourteen”, “Twenty Fifteen”, “Twenty Sixteen”. If required, the selectors can be customized to match your theme in the plugin’s settings.</p>
<blockquote>
<p><a href="https://docs.dlxplugins.com/v/ajaxify-comments/first-time-users/menu-helper" rel="nofollow ugc">Menu Helper</a> is available to help you find the theme’s selectors.</p>
</blockquote>
<h3>Features</h3>
<p>Ajaxify Comments is community supported. If you would like to add or change anything about the plugin, please consider assisting with the development on <a href="https://github.com/DLXPlugins/wp-ajaxify-comments" rel="nofollow ugc">GitHub</a>.</p>
<ul>
<li>Post comments without a page reload.</li>
<li>Show error messages without a page reload.</li>
<li>Lazy load comments, compatible with most themes, including block theme and inline loading.</li>
<li>Automatically refresh comments.</li>
<li>Comment form validation.</li>
<li>Support for pages with multiple comment forms.</li>
<li>Support for threaded and moderated comments.</li>
<li>Compatible with most spam plugins.</li>
<li>Menu Helper to help you find the right selectors for your theme.</li>
<li>Appearance preview to see how the plugin will look on your site.</li>
<li>Simulate Ajaxify Comments enabled or disabled for testing and to compare the difference.</li>
<li>Translate and customize the default WordPress comment messages.</li>
</ul>
<h3>Questions/Help?</h3>
<p>Please use the <a href="https://wordpress.org/support/plugin/wp-ajaxify-comments" rel="ugc">support forum</a> to ask questions or to report issues.</p>
<blockquote>
<p>Most questions can be resolved by checking out our docs site. <a href="https://docs.dlxplugins.com/v/ajaxify-comments" rel="nofollow ugc">https://docs.dlxplugins.com/v/ajaxify-comments</a> – the Search is AI, so it should be able to find what you’re looking for.</p>
</blockquote>
<h3>Credits</h3>
<p>This plugin was initially developed by Jan Jonas starting in 2012. Company <a href="https://weweave.net/" rel="nofollow ugc">weweave</a> maintained the plugin from 2014-2022. The plugin is currently supported by Ronald Huereca of <a href="https://dlxplugins.com" rel="nofollow ugc">DLX Plugins</a>.</p>


Ajaxify Comments – Ajax and Lazy Loading Comments

This has always been a great plugin. It always worked just fine, even if weweave (the previous owners) stopped maintaining and developing it.

Since DLX plugins took over, it got even better

There’s been a lot of admin UI improvements, and Ronald has showed to be incredibly responsive to implement small additional features that can make life easier.

Sent him a feature request, and was incredibly glad to see that he also judged that it was a useful thing to implement. It took him less than 48h to push it live!

Just excellent

Ajaxify Comments hooks into native WordPress comments and allows comment posting without reloading the page.

Patabugen

<p>Integrates WordPress with Browsersync to trigger events like reload when you edit pages.</p>
<p>The plugin also only triggers a reload for now. If you have requests or ideas for other functionality, get in touch.</p>
<p>Since you (should) disable this plugin on production sites, the WordPress stats won’t be reliable – if you find the plugin useful I’d really appreciate it if you’d let me know with a quick email or message!</p>
<h4>Triggers</h4>
<p>By default the plugin will trigger a reload on these actions:</p>
<ul>
<li>save_post – Editing posts/pages/custom posts etc</li>
<li>added_option – Changing settings</li>
<li>attachment_updated – Editing media fields (caption etc)</li>
<li>updated_postmeta – Covers many things, particularly regenerating media thumbnails. Some meta_fields are ignored (see <code>trigger_browsersync_irrelevant_meta_keys</code>)</li>
<li>activated_plugin</li>
<li>deactivated_plugin</li>
<li>delete_widget</li>
</ul>
<p>you can customise this as well as other Browsersync settings using filters:</p>
<pre><code>add_filter('trigger_browsersync_reload_actions', function($filters) {
    // Remove a default. Bear in mind that one action you take (e.g. saving a page)
    // may trigger more than one hook.
    unset($filters['save_post']);
    // Add your own. The key name lets other filters remove it (like the line above)
    $filters['wp_logout'] = 'wp_logout';
    return $filters;
});
</code></pre>
<h4>Ignoring Meta Keys</h4>
<p>Not all meta_key updates (triggered by <code>updated_postmeta</code>) have any impact on the front-end functioning of your site. You can customise which <code>meta_key</code> values are ignored with the <code>trigger_browsersync_irrelevant_meta_keys</code> filter:</p>
<pre><code>add_filter('trigger_browsersync_irrelevant_meta_keys', function($filters) {
    // Remove a default.
    unset($filters['_edit_lock']);
    // Add your own. The key name lets other filters remove it (like the line above)
    $filters['_edit_lock'] = '_edit_lock';
    return $filters;
});
</code></pre>
<h4>Configuration with Filters</h4>
<p>The default Browsersync settings will be used (<code>http://localhost:3000</code>) but you can use filters to change them. The filters are used every time the trigger is activated so you don’t need to set them before instanciating the class.</p>
<pre><code>add_filter('trigger_browsersync_protocol', function(){ return 'https'; } );
add_filter('trigger_browsersync_host', function(){ return 'dev.server'; } );
add_filter('trigger_browsersync_port', function(){ return '4321'; } );
</code></pre>
<p>Or you can specify the whole URL which will cause the others to be ignored, but don’t include a trailing slash.</p>
<pre><code>add_filter('trigger_browsersync_url', function(){ return 'http://localhost:3000'; } );
</code></pre>
<h4>Environmental Configuration</h4>
<p>Since you probably only want Browsersync on your development or staging site, the plugin will do nothing once you activate it it in WordPress.</p>
<p>To make it work, you’ll want to create a file to activate it. See Installation for instructions.</p>
<h4>Logging Activity</h4>
<p>Trigger Browsersync can log events to the WordPress log – this is especially useful for development on the plugin when you want to add or exclude a new event from triggering an action.</p>
<p>To enable logging add this filter to your <code>enable-trigger-browsersync.php</code> file (see Installation);</p>
<pre><code>add_filter('trigger_browsersync_log_events', '__return_true');
</code></pre>


Trigger Browsersync

Thank goodness we have the Trigger Browsersync WordPress plugin by Sami Greenbury. And, I love the way it piggy backs onto Browsersync (loose coupling).

You will need to follow the install instructions carefully. And, the big prerequisite is knowing how to set up Browsersync of course. Knowing Gulp would be even better. If you aren't comfortable wading through PHP and JavaScript, this plugin might be too intimidating. But, I highly recommend giving it a try because it will save you tons of dev time. Assuming you have a local WordPress dev env and are working on a lot of WordPress sites.

I did find a teeny bug (typo) that can be easily fixed. If you run into it too, then change "emssage" to "message" on line 275 in the trigger-browsersync.php file. I posted about this in the support forum. 

If you have any issues at all with the set up, I suggest turning on your PHP debugging and telling the Trigger Browsersync plugin to log events via a filter. See the plugin details page.

A couple FYIs 

1) This plugin does not seem to watch PHP and CSS updates. I have Gulp file that instantiates Browsersync reloads my browser on any PHP and CSS file changes. This setup runs perfectly with this plugin. I didn't have to change a thing in my Gulp file. 

2) There has not been any plugin updates for 9 months at the time of this post.

What a time saver!

Integrates WordPress with Browsersync to trigger events like Reload when you edit pages and settings.

Ajaxify Comments – Ajax and Lazy Loading Comments vs Trigger Browsersync