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

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 past 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!

Last updated Sep 19, 2022 @ 11:27 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 :)

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.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

  1. Ian Robert Knight

    Very helpful!
    Thanks, Nelson!

    Reply
  2. photoMaldives

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

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart