Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Clear Divi Static CSS Cache
As mentioned, Divi has a Static CSS Generation feature that often needs to be cleared. This button can be found in WordPress admin>Divi>Theme Options>Builder>Advanced.
This feature takes the custom design styles created using the Divi Builder, the Divi Theme Options and the Divi Theme Customizer and compiles and minifies them into static CSS files that can be served more efficiently and cached within your visitor’s browser. To learn more about what this feature does, we recommend checking the feature release post on the Divi blog.
Why Do You Need To Clear The Cached CSS Files?
When you make a change to the design of your Divi website, the existing cached CSS files need to be removed and new ones loaded. If you make updates to your site and notice the design is not quite right, you may need to clear your Divi cache. This is not the same as clearing your browser, plugin, hosting, or CDN cache! It’s separate files only related to Divi that need to be replaced. Clearing these static files can solve a host of problems! You may be surprised how many times this can resolve a cache related issue on your site, so please always be sure to include this in your troubleshooting steps.
NOTE: Be sure to review our full tutorial on How To Clear Your Divi Website Cache to learn more about cache and how to clear it.
Can The Setting Be Disabled?
Because of the issues, some users and developers, including myself, have repeatedly publicly recommend keeping this setting disabled. But Nick Roach, the owner and found of Elegant Themes, does not agree, because yes, it technically does help for “live” sites. He even mentioned in a Facebook comment that the option should probably be removed. This of course caused many of us to plead with him, no!
Soon after that, you may have noticed Divi now includes this setting in their system status report. So now if this setting is disabled, they show a red dot, which unnecessarily alarms some users out.
I personally disagree with this decision by Elegant Themes. I still recommend disabling it for sites that are in active development. However, I have reasons to believe that disabling the setting does not actually turn it off. I know it sounds crazy, but others in the Divi Community agree with this theory.
Fixing The Inconvenient Location
The main complaint with this necessary feature is the location of the button. To say the least, it is not very convenient to 1. click out of whatever page you are on, 2. go to the WordPress admin dashboard, 3. hover over the Divi menu, 4. click Theme Options, 5. click the Builder tab, 6. click the Advanced tab, 7. and then click the clear button.
Our code snippet below adds the button to the WordPress admin toolbar, which is always visible on any page! Hurray!
Clear Divi Local Storage
Local storage is an internal memory storage used by your website to store objects locally on your computer browser. Since it is stored locally, it is saved across browser sessions (of the same browser and device). The local storage only affects you. This data does not expire and remains stored on your computer until the application that put it there deletes it, or when you manually clear it. In browsers that are Chromium(Chrome) based, the data is saved in a SQLite file in the subfolder at the location of /AppData/Local/Google/Chrome/UserData/Default/Local Storage
Various plugins may utilize this local storage feature, but Divi specifically uses this for things like copy and paste modules, copy and paste styles, and for displaying and managing modules and Divi Builder settings. I recommend clearing the local storage any time you update Divi or any 3rd party Divi module plugin. This can potentially help solve the infinite spinning wheel loader issue also.
Note that clearing your regular browser cache does not clear the local storage, and this is why users sometimes experience issues even after clearing all cache. Clearing the local storage should be a step you perform every time you clear your browser and other cache.
Add A PHP Code Snippet
The tutorial only requires one simple step, which involves pasting the PHP code snippet below into your website. There are a number of locations to add this, and it will totally depend on your website and experience.
If you have a child theme, then you would add this snippet to the functions.php file of a Divi child theme. If you don’t already have one, you can download our free Divi child theme here.
If you want the easy way, then I will recommend installing the Code Snippets plugin. It is a great plugin that allows you to add snippets easily in the backend of your admin area. After activating, just go to Snippets>Add New, write a title, paste the snippet, and click the save and activate button. Here is how that will look:
PHP Snippet - Clear Divi Static CSS + Local Storage Buttons
Happy clearing Divi Static CSS File Generation with one click!