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, "\\$&");
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');
</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/)&&f.href){var g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');f.href=g+(g.match(/\?/)?'&':'?')+'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/
