How to make sure your custom CSS is cached by the browser

If you’re writing a custom theme, you’ll want to make sure that the browser properly caches the CSS, so that it’s not requested each time. To solve this, you add a cache-control header to your .htaccess file:

<filesMatch "\.(css)$">
Header set Cache-Control "max-age=290304000, public"
</filesMatch>

But what if you subsequently change the CSS? If you’re not careful, users who have previously visited your site will still be using the old, cached file. The easy way to solve this is to use PHP’s filemtime to provide a version number to the wp_register_style function. This version number will be appended as a query parameter to your CSS request. When it changes, it will force the browser to re-request the file. The code goes something like this:

$timestamp = @filemtime(get_stylesheet_directory().'/style.css');
wp_register_style ('custom-style', get_stylesheet_directory_uri().'/style.css', array(), $timestamp);

If you’re not able to edit .htaccess to add the necessary headers, there is a simple solution. Rename style.css to style.php (and do the same in the code above). Now add the following lines to the top of the style.php file:

<?php
header ('Cache-Control: max-age=290304000, public');
header ('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time()+290304000));
header ('Content-type: text/css');
$date = @filemtime(__FILE__);
if ($date)
	header ('Last-Modified: '.gmdate('D, d M Y H:i:s \G\M\T', $date));
?>

Comments

  1. The Versions plugin generates automated version numbers on stylesheets and scripts. Works really good for us! It’s at: http://wordpress.org/extend/plugins/versions/

  2. Hi! Does this also work for the “custom CSS” that is set by the end user for a theme? As far as I can tell, the custom CSS is stored in the database and rebuilt for each and every page call.

    • Mark Barnes says:

      No, it won’t work for CSS stored in the database. The theme coder would need to add another field to the database to give the last updated time (or perhaps use a hash of the CSS).

Speak Your Mind

*