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.
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
/**
* 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!
Very helpful!
Thanks, Nelson!
You’re welcome, so happy to finally get this released to everyone.
Wow, Nelson – this is a pro-level feature – thanks for sharing. 🙂
You’re welcome, so glad you like it!
Thank you thank you thank you . I have been asking ET for this for 2 years I think
I’m so glad I was able to provide it!
This is awesome and I just implemented and tried it out — I can’t thank you enough for this time saver! I totally agree with you about this: “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.” I have to clear Divi’s static CSS cache every time I deploy my staging site to live to fix the down arrow icon font in my menu bar showing up as a missing glyph until I do so — and I have the setting OFF. Turning it back on to clear it is the only thing that fixes it! (I have dug into the missing icon font issue and have a vague idea why it happens but this comment is already rambling so I will skip going into it!)
As I am writing this I don’t know why I don’t just keep the setting on, but I vaguely remember it caused a conflict with a security plugin that I used at some point so I always keep it off. Whether I leave it enabled or not, I really dread having to go in and click into several pages just to clear it after every update no matter how minor, so I am thrilled it is now one click!
Thank you in general for being such a great source for all things Divi. Without your plugins and tutorials like these I truly do not think I would use it. And another kudos I wanted to pass on: I came here after seeing it linked in your newsletter and I really enjoy that you also send updates on your family, it really sets your newsletter apart and makes it fun to read.
Thanks so much for sharing! 🙂
This is going to be SO helpful! Thank you!!!
Yes for sure, you’re welcome!
Wooow, thanks a lot! That makes life so much easier 🙂
You’re welcome!
Thanks Nelson,
I was aware of the Clear static file generation button and its location but wasn’t aware of all the things it was up to and the problems it was causing, without being aware.
You’re welcome, I’m glad I could share this with everyone.
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.
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.
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).
Nelson. Awesome script. I disable static file generation on production sites too. I use wp rocket and asset cleanup pro with some custom css splitting. This messes with the divi cache which doesn’t flush when saving a page. Its annoying. To make this script ever better… I’m wondering how I might be able to automate it? eg executing the script using wp-cli?? Appreciate any advice. D
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!
Not only have they buried the global switch in their theme options page, they have even hidden a per-page switch in the performance tab of every individual page, which defaults to TRUE. Therefore even if you have opted to have it deactivated globally, it still ignores you by keeping it enabled on a per-page basis.
I have been having huge problems with this for the past months, where links would become blue without obvious reasons, and WP Rocket clear cache would not function. Only solution had been to enable static file generation only to clear that and turn it back off. Until I discovered this hidden additional switch on every page by accident.
Wow thanks a million! This helps so much for developing Divi websites.
You’re welcome, yes it is really convenient!