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"

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:

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));