Plugin: Force CSS Flush (locally)

I realized it would be very easy to implement the flush CSS locally anchor if it were a plugin controlled by URL query. Basically, if you have a unique URL query, display the anchor to flush the CSS locally. I put together a very simple plugin to accomplish exactly this!

First thing is working out the specs on how to set this up. I like having a plugin handy that can be easily copied from one place to another so I put together flush.php

/*
Plugin Name: Flush Local CSS
Plugin URI:  https://jarodthornton.com
Description: Force Reload Cached CSS Files - based on https://wpreset.com/force-reload-cached-css/
Version:     1.0
Author:      Jarod Thornton
Author URI:  https://jarodthornton.com
License:     GPL2 etc
License URI: https://jarodthornton.com
*/

Second thing is figuring out how it will be used. I will be able to easily activate and deactivate this and since it is mostly a troubleshooting tool, it won’t really matter where I output the anchor. I decided the footer was my best bet and if I forget to deactivate it, there won’t be much issue.

function flush_css() { /* code will go here */ }
add_action( 'wp_footer', 'flush_css' );

Third is the complicated bit. I’ve done some things like this in the past where I want to control what is available on page load using JS or jQuery and URL param, but I haven’t put together any snippets to pull from. I searched and found a post by Jenna Molby with a simple setup that had what I needed. I modified her code to fit my needs here.

For the markup / code:

CSS: the important bit here is the display property for the class flush. It is set to be hidden unless our URL query matches.

.flush {display:none;}
.flush {
    position: fixed;
    z-index: 999;
	top:0;
	right:0;
}
.flush a {	
    margin: 10px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #777;
    border-radius: 5px;
}

JavaScript: Here we are setting up the conditions for our URL parameter using regular expressions to sort things out and creating a variable.

// Parse the URL parameter
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('go');

jQuery: Now we use the JavaScript variable created before to control some HTML with CSS using jQuery

 jQuery(document).ready(function() {
	// Check if the URL parameter is flush
	if (dynamicContent == 'flush') {
		jQuery('#flush').show();
	}
});

HTML: Our div which is initially hidden until the URL parameter matches the condition of the variable setup in our script.

<div id="flush" class="flush">
</div>

I’m using the bit of code from yesterday’s post about force reloading local CSS – you can read more about it here – https://jarodthornton.com/adopttheweb/2020/01/05/force-reload-css-locally/

Here’s the full source:

<?php
/*
Plugin Name: Flush Local CSS
Plugin URI:  https://jarodthornton.com
Description: Force Reload Cached CSS Files - based on https://wpreset.com/force-reload-cached-css/
Version:     1.0
Author:      Jarod Thornton
Author URI:  https://jarodthornton.com
License:     GPL2 etc
License URI: https://jarodthornton.com
*/

function flush_css() { ?>
<style>
.flush {display:none;}
.flush {
    position: fixed;
    z-index: 999;
	top:0;
	right:0;
}
.flush a {	
    margin: 10px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #777;
    border-radius: 5px;
}
</style>
<script type="text/javascript">
// Parse the URL parameter
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&amp;");
    var regex = new RegExp("[?&amp;]" + name + "(=([^&amp;#]*)|&amp;|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('go');
</script>
<script type="text/javascript">
 jQuery(document).ready(function() {
	// Check if the URL parameter is flush
	if (dynamicContent == 'flush') {
		jQuery('#flush').show();
	}
});
</script>
<div id="flush" class="flush">
  <a href="javascript:(function(){var h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&amp;&amp;f.href){var g=f.href.replace(/(&amp;|%5C?)forceReload=\d+/,'');f.href=g+(g.match(/\?/)?'&amp;':'?')+'forceReload='+(new Date().valueOf())}}})()">Flush</a>
</div>
<?php }
add_action( 'wp_footer', 'flush_css' );

Here’s Jenna Molby’s website with her markup and code. I used her post to build my plugin 🙂

https://jennamolby.com/how-to-display-dynamic-content-on-a-page-using-url-parameters/