Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
WordPress Plugin: Filename-based cache busting for scripts/styles.
<?php
/**
* Plugin Name: Filename-based cache busting
* Version: 0.3
* Description: Filename-based cache busting for WordPress scripts/styles.
* Author: Dominik Schilling
* Author URI: http://wphelper.de/
* Plugin URI: https://dominikschilling.de/880/
*
* License: GPLv2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
*
*
* Extend your .htaccess file with these lines:
*
* <IfModule mod_rewrite.c>
* RewriteEngine On
* RewriteBase /
*
* RewriteCond %{REQUEST_FILENAME} !-f
* RewriteCond %{REQUEST_FILENAME} !-d
* RewriteRule ^(.+)\.(.+)\.(js|css)$ $1.$3 [L]
* </IfModule>
*/
/**
* Moves the `ver` query string of the source into
* the filename. Doesn't change admin scripts/styles and sources
* with more than the `ver` arg.
*
* @param string $src The original source.
* @return string
*/
function ds_filename_based_cache_busting( $src ) {
// Don't touch admin scripts.
if ( is_admin() ) {
return $src;
}
$_src = $src;
if ( '//' === substr( $_src, 0, 2 ) ) {
$_src = 'http:' . $_src;
}
$_src = parse_url( $_src );
// Give up if malformed URL.
if ( false === $_src ) {
return $src;
}
// Check if it's a local URL.
$wp = parse_url( home_url() );
if ( isset( $_src['host'] ) && $_src['host'] !== $wp['host'] ) {
return $src;
}
return preg_replace(
'/\.(js|css)\?ver=(.+)$/',
'.$2.$1',
$src
);
}
add_filter( 'script_loader_src', 'ds_filename_based_cache_busting' );
add_filter( 'style_loader_src', 'ds_filename_based_cache_busting' );
@BenSampo

This comment has been minimized.

Show comment Hide comment
@BenSampo

BenSampo Jun 27, 2012

Thanks for this! Working perfectly.

Thanks for this! Working perfectly.

@FStop

This comment has been minimized.

Show comment Hide comment
@FStop

FStop Feb 5, 2013

I don't know enough to know exactly why, but I had better luck omitting the

RewriteEngine On
RewriteBase /

lines in the .htaccess portion. I did notice that these lines were already present WordPress's .htaccess items.

Otherwise perfect & just what I was looking for. Thanks!

FStop commented Feb 5, 2013

I don't know enough to know exactly why, but I had better luck omitting the

RewriteEngine On
RewriteBase /

lines in the .htaccess portion. I did notice that these lines were already present WordPress's .htaccess items.

Otherwise perfect & just what I was looking for. Thanks!

@jordantrizz

This comment has been minimized.

Show comment Hide comment
@jordantrizz

jordantrizz Feb 9, 2015

Has anyone tested this with Wordpress 4.x?

Has anyone tested this with Wordpress 4.x?

@Sophist-UK

This comment has been minimized.

Show comment Hide comment
@Sophist-UK

Sophist-UK Mar 13, 2015

just tested this on wp 4.1.1 and it doesn't work - urls still have ?ver=x.x at the end.

Anyone know how to make it work again?

just tested this on wp 4.1.1 and it doesn't work - urls still have ?ver=x.x at the end.

Anyone know how to make it work again?

@Sophist-UK

This comment has been minimized.

Show comment Hide comment
@Sophist-UK

Sophist-UK Mar 13, 2015

Looks like the add_filter does not have sufficient parameters. According to http://wpseek.com/hook/script_loader_src/ the function we define it needs a $handle parameter because apply_filter defines it - however I tried adding this and it made no difference.

Looks like the add_filter does not have sufficient parameters. According to http://wpseek.com/hook/script_loader_src/ the function we define it needs a $handle parameter because apply_filter defines it - however I tried adding this and it made no difference.

@cdshepherd

This comment has been minimized.

Show comment Hide comment
@cdshepherd

cdshepherd Feb 25, 2016

Has anybody managed to get this working with Nginx? Specifically Nginx 1.4.6.
The plugin itself is changing the filenames, but I can't get Nginx to load the files.

Has anybody managed to get this working with Nginx? Specifically Nginx 1.4.6.
The plugin itself is changing the filenames, but I can't get Nginx to load the files.

@timwoolfson

This comment has been minimized.

Show comment Hide comment
@timwoolfson

timwoolfson Oct 6, 2016

This plugin seems to do a similiar job - perhaps better? https://wordpress.org/plugins/versions/
Seems to work ok with vanilla wordpress installs, struggles with compatibility with other plugins and certain theme elements.

Cheers,

Tim Woolfson
https://www.profitablewebprojects.com

This plugin seems to do a similiar job - perhaps better? https://wordpress.org/plugins/versions/
Seems to work ok with vanilla wordpress installs, struggles with compatibility with other plugins and certain theme elements.

Cheers,

Tim Woolfson
https://www.profitablewebprojects.com

@Protohominid

This comment has been minimized.

Show comment Hide comment
@Protohominid

Protohominid Oct 30, 2016

Does anyone know why this would be working perfectly for me locally (Apache/PHP 7) but on the remote test server (Nginx/PHP 5.6) it's failing with errors regarding https. Both my local server and remote test site have SSL enabled, but on the remote server, I'm getting 'blocked - mixed content' errors. It seems to be trying to load everything over http, even though I changed the plugin's code (line 42) to "https:".

Is there something to do with PHP 7 vs PHP 5.6 here, or apache vs nginx, or is it something else?

Protohominid commented Oct 30, 2016

Does anyone know why this would be working perfectly for me locally (Apache/PHP 7) but on the remote test server (Nginx/PHP 5.6) it's failing with errors regarding https. Both my local server and remote test site have SSL enabled, but on the remote server, I'm getting 'blocked - mixed content' errors. It seems to be trying to load everything over http, even though I changed the plugin's code (line 42) to "https:".

Is there something to do with PHP 7 vs PHP 5.6 here, or apache vs nginx, or is it something else?

@Protohominid

This comment has been minimized.

Show comment Hide comment
@Protohominid

Protohominid Oct 30, 2016

Seems to be an issue with Nginx, as cdshepherd noted. Bummer, I thought this was going to solve my cache problems.

Seems to be an issue with Nginx, as cdshepherd noted. Bummer, I thought this was going to solve my cache problems.

@KimchaC

This comment has been minimized.

Show comment Hide comment
@KimchaC

KimchaC Mar 17, 2017

I got it working on nginx, but had to change it to filename modified date instead of the version string.

  location ~* ^(.+)\.(?:\d+)\.(min.js|min.css|js|css)($|\?.*$) {
   try_files $uri $1.$2;
 }`

The advantage is that with this rule the server first checks whether the requested filename exists and only if it doesn't tries to serve the file without the version number.

The solution is heavily based on these two:
https://wordpress.org/plugins/filename-based-asset-cache-busting/
https://github.com/h5bp/server-configs-nginx/blob/master/h5bp/location/cache-busting.conf

<?php
/**
 * Plugin Name: Brower Cache Buster
 * Version: 0.3
 * Description: Filename-based cache busting for WordPress scripts/styles.
 * Author: Dominik Schilling
 * Author URI: http://wphelper.de/
 * Plugin URI: https://dominikschilling.de/880/
 *
 * License: GPLv2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *
 *
 * Extend your .htaccess file with these lines (Untested):
 *
 *   <IfModule mod_rewrite.c>
 *     RewriteEngine On
 *     RewriteBase /
 *
 *     RewriteCond %{REQUEST_FILENAME} !-f
 *     RewriteCond %{REQUEST_FILENAME} !-d
 *     RewriteRule ^(.+)\.(?:\d+)\.(min.js|min.css|js|css)($|\?.*$) $1.$3 [L]
 *   </IfModule>
 *
 *
 * Extend your nginx config with these lines (tested & working):
 *
 * location ~* ^(.+)\.(?:\d+)\.(min.js|min.css|js|css)($|\?.*$) {
 *   try_files $uri $1.$2;
 * }
 */

/**
 * Removes query strings of the source.
 * Adds the file modified time to the filename.
 * Doesn't change admin scripts/styles and sources.
 *
 * @param  string $src The original source.
 * @return string
 */
function ds_filename_based_cache_busting( $src ) {
	// Don't touch admin scripts.
	if ( is_admin() ) {
		return $src;
	}

	$_src = $src;
	if ( '//' === substr( $_src, 0, 2 ) ) {
		$_src = 'http:' . $_src;
	}

	$_src = parse_url( $_src );

	// Give up if malformed URL.
	if ( false === $_src ) {
		return $src;
	}

	// Check if it's a local URL.
	$wp = parse_url( home_url() );
	if ( isset( $_src['host'] ) && $_src['host'] !== $wp['host'] ) {
		return $src;
	}

	$file_path = ABSPATH . $_src['path'];
	if (file_exists($file_path)) {
		return preg_replace(
			'/\.(min.js|min.css|js|css)($|\?.*$)/',
			'.' . filemtime($file_path) . '.$1',
			$src
		);
	} else {

		return $src;
	}
}
add_filter( 'script_loader_src', 'ds_filename_based_cache_busting' );
add_filter( 'style_loader_src', 'ds_filename_based_cache_busting' );

KimchaC commented Mar 17, 2017

I got it working on nginx, but had to change it to filename modified date instead of the version string.

  location ~* ^(.+)\.(?:\d+)\.(min.js|min.css|js|css)($|\?.*$) {
   try_files $uri $1.$2;
 }`

The advantage is that with this rule the server first checks whether the requested filename exists and only if it doesn't tries to serve the file without the version number.

The solution is heavily based on these two:
https://wordpress.org/plugins/filename-based-asset-cache-busting/
https://github.com/h5bp/server-configs-nginx/blob/master/h5bp/location/cache-busting.conf

<?php
/**
 * Plugin Name: Brower Cache Buster
 * Version: 0.3
 * Description: Filename-based cache busting for WordPress scripts/styles.
 * Author: Dominik Schilling
 * Author URI: http://wphelper.de/
 * Plugin URI: https://dominikschilling.de/880/
 *
 * License: GPLv2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *
 *
 * Extend your .htaccess file with these lines (Untested):
 *
 *   <IfModule mod_rewrite.c>
 *     RewriteEngine On
 *     RewriteBase /
 *
 *     RewriteCond %{REQUEST_FILENAME} !-f
 *     RewriteCond %{REQUEST_FILENAME} !-d
 *     RewriteRule ^(.+)\.(?:\d+)\.(min.js|min.css|js|css)($|\?.*$) $1.$3 [L]
 *   </IfModule>
 *
 *
 * Extend your nginx config with these lines (tested & working):
 *
 * location ~* ^(.+)\.(?:\d+)\.(min.js|min.css|js|css)($|\?.*$) {
 *   try_files $uri $1.$2;
 * }
 */

/**
 * Removes query strings of the source.
 * Adds the file modified time to the filename.
 * Doesn't change admin scripts/styles and sources.
 *
 * @param  string $src The original source.
 * @return string
 */
function ds_filename_based_cache_busting( $src ) {
	// Don't touch admin scripts.
	if ( is_admin() ) {
		return $src;
	}

	$_src = $src;
	if ( '//' === substr( $_src, 0, 2 ) ) {
		$_src = 'http:' . $_src;
	}

	$_src = parse_url( $_src );

	// Give up if malformed URL.
	if ( false === $_src ) {
		return $src;
	}

	// Check if it's a local URL.
	$wp = parse_url( home_url() );
	if ( isset( $_src['host'] ) && $_src['host'] !== $wp['host'] ) {
		return $src;
	}

	$file_path = ABSPATH . $_src['path'];
	if (file_exists($file_path)) {
		return preg_replace(
			'/\.(min.js|min.css|js|css)($|\?.*$)/',
			'.' . filemtime($file_path) . '.$1',
			$src
		);
	} else {

		return $src;
	}
}
add_filter( 'script_loader_src', 'ds_filename_based_cache_busting' );
add_filter( 'style_loader_src', 'ds_filename_based_cache_busting' );
@strarsis

This comment has been minimized.

Show comment Hide comment
@strarsis

strarsis Apr 14, 2017

Is this plugin similar in functionality/purpose to the Busted plugin?

Is this plugin similar in functionality/purpose to the Busted plugin?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment