Fixing Elementors CSS Regeneration Issues for Good

If you use Elementor with a caching plugin, then the odds are that you’ve seen pages of your site lose styling after updates.

It has been brought up multiple times on GitHub and WordPress forums, but it doesn’t seem like Elementor developers feel it’s their responsibility to fix.

The Problem: CSS Files That Vanish Into Thin Air

When Elementor updates, it seems to delete some (all?) of the generated stylesheets.

The CSS files only get regenerated when a fresh request for the page is made.

If you use a caching plugin then that page request isn’t made until the cached file expires and a new one is built, meaning that any Elementor CSS files referenced on the page will return a 404 response and the page styling will break.

The ‘Regenerate CSS’ button in Elementor tools was also misleadingly titled as it didn’t regenerate anything, only deleted the files. This has since been renamed to ‘Clear Files & Data’. So pressing that button after an update doesn’t fix the problem; it makes it worse!

Unfortunately, when it gets to that point, the only option is to clear the cache of the whole website, slowing it down until the cache can build up again.

The Fix: Regenerate by Intercepting the 404 Response

There are a number of GitHub issues, but this one caught my eye: https://github.com/elementor/elementor/issues/27300

I already had plans to clear the cache of any page where I detected a 404 error for an Elementor CSS file, but that issue contains code that the OP was using to hook into the clearing of the css files and then looping through every post on his site and regenerating the css files.

That’s ok for small sites, but not ideal for large ones.

Clearing the page cache isn’t ideal since there are many page caching plugins and it doesn’t help with server based caching. So I took the code for regenerating the css files and adapted it to work by detecting the 404 error.

How It Works

The plugin uses the template_redirect action to detect any 404s before the error is thrown.

It checks the requested path to see if it contans the string ‘/elementor/css/’.

If so, it extracts the cache type (post or loop) and extracts the ID from the filename.

It then checks the ID to make sure the post has Elementor enabled. If so, it regenerates the css, sends it back to the browser with a 200 – OK response and then saves the file as normal.

The next time the page is requested, the CSS file is already there and doesn’t need to be rebuilt.

The result is that page cache no longer needs to be cleared. CSS will be regenerated the next time a user hits a cached page where the CSS files no longer exist, keeping your site fast without any broken pages.

How To Use It

Download the plugin from the releases area of the GitHub repository here: https://github.com/robwent/elementor-css-regenerator

Install the zip file to your site by uploading it through the add plugins screen and enable.

It will then run in the background, checking the 404s and regenerating CSS files when needed.