Elementor for WordPress is a great plugin. Perhaps no other plugin has changed our WordPress site building workflow than Elementor and its Pro counterpart. We use it on literally every WordPress website project we get these days. That said, we also setup Staging -> Production environments for our clients so they can make webpage changes down the line without worrying about interrupting or breaking their live production site. For that, we use WP Migrate DB. The problem is, these two plugins don’t play well together sometimes. Occasionally, we’ll migrate (via push) a database from Staging to Production, then find that some random Elementor pages broke during the transfer.
Elementor generates CSS files in your /wp-content/uploads/elementor/css directory. For us, we’ll occasionally see this directory either empty or missing page specific CSS. For months, we’ve tried to track down what causes this. It’s well known, documented, and the Elementor team even made a solution to fix it manually.
That’s nice, but who wants to add another manual step to their migrations? Not us.
How To Clear Cache/Regenerate CSS After Migration
This one takes a little bit of code. Nothing too tedious — just copy-and-paste this code into the bottom of your functions.php file in your active WordPress theme/template and it should work for most of you.
What this code does is hook into the migration cycle of WP Migrate DB. After a migration completes, the Migrate DB fires the wpmdb_migration_complete action. By hooking into this and clearing our Elementor cache, we automatically solve our missing CSS problems and our sites work as they are supposed to.
add_action('wpmdb_migration_complete', 'clear_elementor_cache');
function clear_elementor_cache() {
// Make sure that Elementor loaded and the hook fired
if ( did_action( 'elementor/loaded' ) ) {
// Automatically purge and regenerate the Elementor CSS cache
\Elementor\Plugin::instance()->files_manager->clear_cache();
}
}
