If you’re like me and you set up server-side caching, CloudFlare (or any other proxy cache), and/or long Expires headers on your theme stylesheets, you know the hassles that go into invalidating those caches and forcing browsers to load an updated version.
One method to force browsers to pull the new version is to add/change the ver
parameter in the query string (WordPress’ wp_register_script
, wp_register_style
, wp_enqueue_script
, and wp_enqueue_style
have a built-in way of doing this).
Query Strings
Defining a Constant
Here’s how I used to do it: define a constant and then manually update that, as well as the Version
header in the style.css
file.
<?php | |
define( 'MY_THEME_VERSION', '1.4' ); | |
/** | |
* Enqueue stylesheet | |
* | |
* Uses a constant that has to be manually updated | |
*/ | |
function my_theme_enqueue_assets() { | |
wp_enqueue_style( 'stylesheet', get_stylesheet_uri(), array(), MY_THEME_VERSION ); | |
// stylesheet URL: https://mydomain.com/wp-content/themes/my-theme/style.css?ver=1.4 | |
} | |
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' ); |
The main drawback is that I had to manually update the version number in two places: functions.php
and style.css
.
File Modification Time
Another method I’ve used at times is to add the style.css
file modification time as the query string.
<?php | |
/** | |
* Enqueue stylesheet | |
* | |
* Uses the modification timestamp of the style.css file | |
*/ | |
function my_theme_enqueue_assets() { | |
wp_enqueue_style( 'stylesheet', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ) ); | |
// stylesheet URL: https://mydomain.com/wp-content/themes/my-theme/style.css?ver=1518212243 | |
} | |
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' ); |
This has the advantage that the cache will be invalidated every time the stylesheet file changes. For some reason, I really never cared for it that much, though. It does add a tiny bit of performance hit, as the filemtime
has to go get the file and figure out the timestamp.
WordPress Theme Version
I just read about this today and I think it’s going to be my go-to method in the future. It uses one of WordPress’ built-in theme functions to get the version number from the stylesheet.
<?php | |
/** | |
* Auto-calculate and define theme version constant for use in multiple stylesheets/scripts | |
*/ | |
define( 'MY_THEME_VERSION', wp_get_theme()->get( 'Version' ) ); | |
/** | |
* Enqueue stylesheet | |
* | |
* Uses the Version header from style.css | |
*/ | |
function my_theme_enqueue_assets() { | |
wp_enqueue_style( 'stylesheet', get_stylesheet_uri(), array(), MY_THEME_VERSION ); | |
// stylesheet URL: https://mydomain.com/wp-content/themes/my-theme/style.css?ver=1.4 | |
} | |
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' ); |
/** | |
* Theme Name: Twenty Seventeen | |
* Theme URI: https://wordpress.org/themes/twentyseventeen/ | |
* Author: the WordPress team | |
* Author URI: https://wordpress.org/ | |
* Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device. | |
* Version: 1.4 | |
* License: GNU General Public License v2 or later | |
* License URI: http://www.gnu.org/licenses/gpl-2.0.html | |
* Text Domain: twentyseventeen | |
* Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready | |
* This theme, like WordPress, is licensed under the GPL. | |
* Use it to make something cool, have fun, and share what you've learned with others. | |
*/ | |
// or at the very least: | |
/** | |
* Theme Name: Twenty Seventeen | |
* Version: 1.4 | |
*/ |
This has a bit of overhead as well due to the function call, but I like the fact that it uses the theme version number so you can easily do Semantic Versioning.
Filename Modification
However, most performance testing tools will recommend you remove query strings altogether to improve caching especially by proxy servers. Here are two automatic methods of doing that:
File Modification Time
<?php | |
/** | |
* Enqueue stylesheet | |
* | |
* Uses the modification timestamp of the style.css file | |
*/ | |
function my_theme_enqueue_assets() { | |
wp_enqueue_style( 'stylesheet', str_replace( '.css', '.' . filemtime( get_stylesheet_directory() . '/style.css' ) . '.css', get_stylesheet_uri() ) ); | |
// stylesheet URL: https://mydomain.com/wp-content/themes/my-theme/style.1518212243.css | |
} | |
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' ); | |
WordPress Theme Version
<?php | |
/** | |
* Autocalculate and define theme version constant for use in multiple stylesheets/scripts | |
*/ | |
define( 'MY_THEME_VERSION', wp_get_theme()->get( 'Version' ) ); | |
/** | |
* Enqueue stylesheet | |
* | |
* Uses the Version header from style.css | |
*/ | |
function my_theme_enqueue_assets() { | |
wp_enqueue_style( 'stylesheet', str_replace( '.css', '.' . MY_THEME_VERSION . '.css', get_stylesheet_uri() ) ); | |
// stylesheet URL: https://mydomain.com/wp-content/themes/my-theme/style.1.4.css | |
} | |
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' ); |
Conclusion
No matter which method you choose, setting up caching can greatly improve your site speed. It’s worth a little bit of hassle to ensure your stylesheets and scripts are cached, knowing that with any of these methods, you can easily invalidate those assets.
filemtime-filename.php
line 9 col 131 comma missing
Thanks! Updated