How To Add A Clear Divi Static CSS Cache Local Storage Button To The WordPress Admin Bar Tutorial by Pee Aye Creative

How To Add A Clear Divi Static CSS Cache + Local Storage Button To The WordPress Admin Bar

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to add a convenient button to the WordPress admin bar to clear the Divi Static CSS and local storage!

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.

Static CSS File Generation button in Divi Theme Options

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.

How To Clear Divi Website Cache Tutorial by Pee Aye Creative

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:

free PHP snippet to clear the Divi Static CSS File Generation and local storage with buttons in admin bar

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 disable new default WordPress themes with the Divi Assistant Plugin

Last updated Oct 5, 2023 @ 11:22 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

26 Comments

  1. Ian Robert Knight

    Very helpful!
    Thanks, Nelson!

    Reply
  2. photoMaldives

    Wow, Nelson – this is a pro-level feature – thanks for sharing. 🙂

    Reply
  3. Danny

    Thank you thank you thank you . I have been asking ET for this for 2 years I think

    Reply
  4. Laura

    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.

    Reply
  5. Angi Gerstner

    This is going to be SO helpful! Thank you!!!

    Reply
  6. Joe

    Wooow, thanks a lot! That makes life so much easier 🙂

    Reply
  7. Stephen Vaughan

    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.

    Reply
  8. Stéphane PISKORZ

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
      • Stéphane PISKORZ

        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.

      • Stéphane PISKORZ

        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).

  9. Daz Mo

    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

    Reply
  10. Rico

    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!

    Reply
  11. Konstantinos

    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.

    Reply
  12. michael

    Wow thanks a million! This helps so much for developing Divi websites.

    Reply
  13. Raffi

    Hi 🙂

    I don’t know how this happened to me, it still works but now I have 2 times the add button in the WP top bar (and only one seems to work).

    If I remove the suggested code, then the 2 disappear. Any idea where this might be coming from?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart