Comments don't work because of Cloudflare Rocket Loader

The reply link in the WordPress comments is not working properly? The reason for this is a JavaScript problem, which is often triggered by speed plugins or a CDN.

Here you will find the solution!

WordPress Comment Replies Not Working

Problem: When you click on the Reply link in the WordPress comments, nothing happens. The view just jumps down a bit. If you then scroll down to the comment form and reply, the comment is not ranked as an answer, but is inserted at the bottom.

Expected behavior: When clicking on the Reply link, the comment form should appear directly below the comment to be replied to. After submitting, the new comment can be seen indented under the parent comment.

Solution: Cloudflare Rocket Loader Ignore

I searched for a solution for a long time and first suspected my caching plugin WP Rocket. However, I was wrong.

Then it occurred to me that I use the Cloudflare CDN and have the Rocket Loader feature active, although problems with WordPress are known.

You can find the options in Cloudflare > Speed > Optimization > Rocket Loader.

After some tests, I was able to quickly narrow down the Rocket Loader as the cause of the problem.

But you should have Rocket Loader active, because the feature makes your WordPress site much faster!

So disabling the Rocket Loader is not an option. That’s why I was looking for a solution to the problem. Cloudflare itself has a help article that describes how to get the Rocket Loader to ignore certain JavaScript files. The following attribute must be added to the script tag: data-cfasync="false"

Perfect, that’s exactly what I need!

Directly in the theme or child theme, I don’t want to change that. So I need a WordPress filter that inserts the Attibut for me. I found what I was looking for on Stackoverflow.

To solve the problem, paste the following code into your functions.php file of your theme:

/**
 * Make comment reply button work with CloudFlare Rocket Loader
 * @see https://support.cloudflare.com/hc/en-us/articles/200169436-How-can-I-have-Rocket-Loader-ignore-specific-JavaScripts-
 */
add_filter( 'script_loader_tag', 'add_data_attribute', 10, 3);
function add_data_attribute( $tag, $handle, $src ) {
  if ( 'comment-reply' !== $handle )
     return $tag;

return str_replace( ' src', ' data-cfasync="false" src', $tag );
}

What does the Rocket Loader do?

The Rocket Loader improves the paint times (time until what can be seen on the screen) for pages that contain Javascript. Visitors have a better experience if the content loads faster. Last but not least, speed is also a factor in some search rankings.

Improved:

• Time to First Paint (TTFP)
• Time to First Contentful Paint (TTFCP)
• Time to First Meaningful Paint (TTFMP)
• Document Load

Rocket Loader improves load times by asynchronously loading your JavaScripts, including third-party scripts, so these scripts don’t block the display of your pages’ content.

Why you should activate the Rocket Loader

JavaScript is both a blessing and a curse!

Without JavaScript, your page would load faster. That’s what we all want, don’t we?

Cloudflare’s Rocket Loader does a really good job of using JavaScript. You should definitely make use of this to offer your visitors a good user experience.

If there is a problem, as with the WordPress comment answers, there is always a solution.

Conclusion: Comment Reply does not work

WordPress errors are annoying and time-consuming because many plugins and external services make it massively difficult for troubleshooters. If the error is found, a solution still has to be found.

For the WordPress problem, the non-functioning of the answer link, the Rocket Loader from Cloudflare is to blame. With a short snippet in the functions.php, the problem can be easily solved.