Why Doesn’t My WordPress Front-end Editor Load?

Nine time’s out of nine your JavaScript’s are getting squashed (minified) or cached incorrectly.

There are many ways that JavaScript can suffer from molestation and be seriously violated, but it’s always connected to some type of caching or minification. Usually minification is the culprit though.

WordPress page editors and caching plugins.

Examples of Page Editors and Site Builders:

• Elementor Page Builder (Free and Premium)
• Elegant Themes Divi (Premium only)
• Astra (Free and Premium)
• Beaver Builder (Free and Premium)
• Oxygen (Premium only) Keep your eye on this one.
• WP Bakery (Premium only)
• Microthemer (Free and Premium)
• CSS Hero (Premium only)

Examples of caching and/or minification plugins would be:

• WP Rocket (Premium only)
• LiteSpeed Cache (free)
• WP Fastest Cache (free)
• W3 Total Cache (free)
• WP Super Cache (free)
• Hummingbird (free)
• Fast Velocity Minify (free) A personal favorite, but somewhat complex.
• Autoptomize (free)

How do I keep specific java-script from being cached or minified?

Because I write short and to the point, I’m not going to make detailed scenarios for individual plugins.

The first thing to do of course is disable any cache or minify plugins you have and see if your editors are working. If so, you need to exclude their java-script files of editor plugins from being cached and minified.

Many of these plugins perform both caching and they also minify. Although there aren’t usually problems with caching and minifying HTML and CSS, when it comes to java-script, there can come a world of hurt. The trick then is to eliminate the java-script of your broken plugins from being minified.

Most caching and minification plugins have options to exclude custom paths and some even have exclusions already added to prevent crucial WordPress java-script from getting broken. Some require a full path statement like /your-host-account/public_html/wp-content/plugins/the-name-of-your-plugin/js, while others only need as little as /the-name-of-your-plugin/js. Some are granular enough to exclude file names. Most plugins use some java-script and it is typically in a sub directory(folder) named simply “js”. Occasionally there might be JS files in another location, but most programmers follow the same standards which makes it easier to solve problems like these.

After verifying that a cache or minify plugin is causing your page editor problem, you can then reactivate those plugins again. Then you have to find the java-script files of your editor, write down or copy the path, and exclude them from minification and maybe even caching.

I’ve excluded java-script from my cache/minify plugins, but my editor still won’t load.

Then you might be using a CDN (Content Delivery Network). They tend to use minify options for static files like java-script. Everyone of those is different, so you’ll just need to review the CDN configuration and see if they allow exclusions. If they don’t, the only other option I can think of is to disable these features on their service and do it all on the server side.

As an example, Cloudflare has an option called Rocket Loader™ that is purely for deferring java-script until page rendering is complete. (see “What does Rocket Loader do?”) Page Editors don’t get along with it at all. There is a way turn Rocket Loader™ off when using Builders and Page Editors though. (see “How To WordPress Guide for Free Cloudflare Page Rules”)

If you don’t use a CDN then you should probably contact your hosting provider and see if there is a server side issue. Comments and questions are welcome as always.
Good luck!