Web design, E-commerce and Search Engine Optimisation

I regularly use various caching plugins when developing on clients websites, and i’ve found it a bit of a pain when making edits to the css when they don’t immediately show up on browser refresh, for whatever reason.

For that reason I have a couple of bits of code I use to ensure that the css is ‘fresh’ each time, both of which work by appending a random id to the end of the css uri.

hence http://…/yourthemefolder/style.css

becomes

http://…/yourthemefolder/style.css?id=345 or whatever random number is selected.

There’s two types of code… one when the stylesheet is regularly accessible in the header for you to edit, simply append the following to the css url:

?id=<?php echo rand(1,1000); ?>

which when implemented would look like this:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>?id=<?php echo rand(1,1000); ?>" type="text/css" media="screen" />

and the other is when, as with a lot of more recent themes, you need to use a filter to access the stylesheet uri (you need to stick this in your theme’s functions.php file if you’re not sure what to do with it!):

add_filter('stylesheet_uri','wpi_stylesheet_uri',10,2);

function wpi_stylesheet_uri($stylesheet_uri, $stylesheet_dir_uri){
	$random = rand(1,1000);
    return $stylesheet_uri.'?id='.$random;
}

Hope this helps someone out there!