Elementor Templates breaking page layout, is there any way to fix this issue except clicking on "Regenerate Files & Data" option in Elementor tools

Question

I created several landing pages for my website by customizing a couple of Elementor templates. If I edit any of the templates, I frequently have broken page issues. Now, I can solve it by using the "Regenerate Files & Data" option of Elementor tools. But doing this on every modification is a hassle.

I tried deactivating all the plugins we are using on this site to check if any of the plugins were causing this issue, but that's not the case. While investigating this issue, I noticed that only the pages using Elementor templates are affected.

Also, the server has enough memory which rules out any caching issues.

Is there any way to fix the broken page layout issue?

Answer 1

add_action('save_post', 'clear_elementor_cache');

function clear_elementor_cache() {
  // Check if Elementor is loaded and the hook has fired
  if ( did_action( 'elementor/loaded' ) ) {
  // Automatically purge and regenerate the Elementor CSS cache
    \Elementor\Plugin::instance()->files_manager->clear_cache();
  }
}

Explanation

This function performs an action in response to the "save_post" hook, which is fired whenever a post or page is saved or updated. Specifically, the function is designed to automatically clear and regenerate the Elementor CSS cache whenever a post or page is saved.

Here's a step-by-step breakdown of what the code is doing:

The add_action() function is used to add a new action to the "save_post" hook. The first argument to add_action() is the name of the hook to which the action should be added, and the second argument is the name of the function that should be called when the hook is fired.

The clear_elementor_cache() function is defined as the function to be called when the "save_post" hook is fired. This function checks if Elementor is loaded and the hook has fired by using the did_action() function, which checks if an action has been called for a specific hook.

If Elementor is loaded and the hook has fired, the clear_cache() method of the Elementor files manager is called. This method clears and regenerates the CSS cache for Elementor.

Finally, the clear_elementor_cache() function is automatically called whenever a post or page is saved, due to the action being added to the "save_post" hook.

Overall, this function helps to ensure that any changes made to Elementor widgets or page layout are automatically reflected on the front end of the website, without the need for manual cache clearing or regeneration.