Save 6 Clicks!
If you use Divi, you probably are familiar with the notorious Static CSS File Generation setting and “clear” button in the Theme Options. This feature/button has been the topic of many forums and the cause of much frustration, and yet also the solution to many problems. One of the pain points of this feature is that the setting to clear this is buried in the backend settings. Why not have it conveniently located, so you can clear it with one click? Now you can! This tutorial will show you how to add button links to the WordPress admin bar to clear the Divi static CSS cache and also the local storage cache.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Assistant!
Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!
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.
Where To Paste The PHP Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.
PHP Snippet - Clear Divi Static CSS + Local Storage Buttons
/**
* Add Custom Admin Bar Menu Link
*
* @param $admin_bar
*
* @return void
*/
if (!function_exists('pac_misc_csc_maybe_admin_bar_link')):
function pac_misc_csc_maybe_admin_bar_link($admin_bar)
{
$admin_bar->add_menu([
'id' => 'pac_misc_csc',
'title' => '<span class="ab-icon"></span><span class="ab-label">Clear Divi Cache</span>',
'href' => '',
'meta' => [
'title' => '',
],
]);
$admin_bar->add_menu([
'id' => 'pac_misc_clear_static_css',
'parent' => 'pac_misc_csc',
'title' => sprintf('<span data-wpnonce="%1$s">%2$s</span>', wp_create_nonce('pac_misc_clear_static_css'), esc_html('Clear Static CSS File Generation')),
'href' => 'javascript:void(0)',
]);
$admin_bar->add_menu([
'id' => 'pac_misc_csc_clear_local_storage',
'parent' => 'pac_misc_csc',
'title' => esc_html('Clear Local Storage'),
'href' => 'javascript:void(0)',
]);
}
add_action('admin_bar_menu', 'pac_misc_csc_maybe_admin_bar_link', 999);
endif;
/**
* Add Javascript In Admin Footer
*
* @return void
*/
if (!function_exists('pac_misc_csc_maybe_admin_scripts')):
function pac_misc_csc_maybe_admin_scripts()
{
?>
<script>
jQuery(document).ready(function () {
var adminAaxURL = '<?php echo admin_url('admin-ajax.php'); ?>';
var isAdmin = '<?php echo is_admin(); ?>';
// Clear Static CSS
jQuery("#wp-admin-bar-pac_misc_clear_static_css").click(function (e) {
e.preventDefault();
jQuery.ajax({
type: 'post',
dataType: 'json',
url: adminAaxURL,
data: {
'action': 'pac_misc_clear_static_css',
'_wpnonce': jQuery(this).find('span').data('wpnonce')
},
success: function (response) {
if (response.success) {
let successData = response.data;
if (isAdmin) {
let messageHTML = '<div class="notice notice-success pac-misc-message"><p>' + successData + '</p></div>';
if (jQuery('body .wrap h1').length > 0) {
jQuery('body .wrap h1').after(messageHTML);
} else {
jQuery('body #wpbody-content').prepend(messageHTML);
}
setTimeout(function () {
jQuery(".pac-misc-message").remove();
}, 3500);
} else {
alert(successData);
}
}
},
});
});
// Clear Local Storage
jQuery("#wp-admin-bar-pac_misc_csc_clear_local_storage").click(function (e) {
e.preventDefault();
let msgText = 'The local storage has been cleared!';
window.localStorage.clear();
if (isAdmin) {
let messageHTML = '<div class="notice notice-success pac-misc-message"><p>' + msgText + '</p></div>';
if (jQuery('body .wrap h1').length > 0) {
jQuery('body .wrap h1').after(messageHTML);
} else {
jQuery('body #wpbody-content').prepend(messageHTML);
}
setTimeout(function () {
jQuery(".pac-misc-message").remove();
}, 3500);
} else {
alert(msgText);
}
});
});
</script>
<?php
}
add_action('admin_footer', 'pac_misc_csc_maybe_admin_scripts');
add_action('wp_footer', 'pac_misc_csc_maybe_admin_scripts');
endif;
/**
* Process Ajax Request
*
* @return void
*/
if (!function_exists('pac_misc_csc_maybe_ajax_request')):
function pac_misc_csc_maybe_ajax_request()
{
if ((isset($_POST['action']) && 'pac_misc_clear_static_css' === sanitize_text_field($_POST['action'])) && (isset($_POST['_wpnonce']) && wp_verify_nonce($_POST['_wpnonce'], 'pac_misc_clear_static_css'))) {
ET_Core_PageResource::remove_static_resources('all', 'all');
wp_send_json_success(esc_html('The static CSS file generation has been cleared!'), 200);
}
}
add_action('wp_ajax_pac_misc_clear_static_css', 'pac_misc_csc_maybe_ajax_request');
endif;Happy clearing Divi Static CSS File Generation with one click!
How To Clear Divi Static CSS Using Divi Assistant
Here are the steps to clear the Divi static CSS using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Utility Helper tab and the Admin Bar subtab
- Enable the setting
- Click the Clear Static CSS button in the header any time!
I hope that is easy enough for you! 😉
Learn More About Divi Assistant!
Our flagship "helper" plugin has (141) main features to make your life easier when working with Divi!
Hi Nelson
I am getting the same results as you mentioned it above. I turned the Static CSS File Generation off on some of my customers sites. And I still got problems. I could turn them on again, clear the cash, and turn them off. And the error was gone. On some sites, it was even better when I just let it turned on. That’s… suspicious… Thank you for the code snipped. I love your work and service!
You are welcome, glad to hear you are enjoying the resources!
Hi,
Wow, thanks a lot for this, this is great. It makes me wonder though: this is still a manual click inside the WordPress back office. Is there a way to have this executed (the clearing of Divi’s static files) every 7 days for instance using the server’s cron task? That’d actually be great, once it’s in place, just runs on its own.
I thought of setting intervals, but I don’t think it should because this is mostly only needed during development, so after that someone might forget to turn it off.
Hi Nelson,
I was asking because I need to check some of my websites after each Divi update, some are broken (the site is functional, the CSS is broken). Using a cron task (once a week for instance), I wouldn’t have to worry to check each website (or worse, wait for a client to call and tell me about what is displayed).
Thank you Nelson for your reply. I was actually surprised to see that some devs recommend to keep this setting off. I also stumbled onto a blog post this week stating that to get the best of WP Rocket, all Divi performance options sould be left off, and use instead the WP Rocket settings instead, to get better performance results. I’m currently testing this on 1 website, and it does work: I got better results on both GT Metrix and Page Speed Insights.