[Tips and Tricks for Writing WordPress Themes and Plugins] Forcing the browser to refresh your scripts and styles

I’m starting a some kind of thread of posts where I write down some of the nice tricks I meet in WordPress development.

First one is how to write your custom theme and plugin files so after each deployment / update you’ll be sure that the browser doesn’t use the cached version of your JS and CSS.

This one is really easy – first you define a constant in your code for the version of your theme / plugin:

// You can either define it manually
if ( ! defined( 'MY_THEME_VERSION' ) ) {
    define( 'MY_THEME_VERSION', '0.0.1' );
}
// Or you can use the version from your style.css for the theme
$theme_data = wp_get_theme();
// $theme_data [ 'Version ' ] is the theme version

// Or your version from your plugin.php for plugin with:
$plugin_data = get_plugin_data( $plugin_file );
// $plugin_data[ 'Version' ] is the plugin version

Than the only thing you need to do is to add this version number to the scripts and styles you include (that are custom for the theme).

// For CSS
wp_enqueue_style( 'my_theme_css', get_stylesheet_directory_uri() . '/library/css/style.css', array(), MY_THEME_VERSION );

// For JS
wp_enqueue_script( 'my_theme_js', get_stylesheet_directory_uri() . '/library/js/script.js', array(), MY_THEME_VERSION );

And every time you deploy you can either manually increase the version number or you can use a build script to do it for you 😉

Cheers and follow me on twitter- @ninarski