Prevent Version URL Parameter (?ver=X.X.X) on Enqueued Styles & Scripts

Question

Use Case

I've been experimenting with Chrome's Dev Tools Workspace features. It includes the ability to edit a file directly in Dev Tools and have the saved stylesheet refresh itself (or even compile and then refresh!).

However, as documented in the StackOverflow question "Chrome's “Auto-Reload Generated CSS” not reloading page when SASS recompiles CSS", URL parameters on the stylesheet URL prevent Chrome from noticing the change.

Desired Outcome

That means that only during development, I wanted to remove the ?ver=X.X.X from the normal stylesheet <link> output by wp_enqueue_style(). In other words, I wanted the default href:

http://localhost/mysite/wp-includes/style.css?ver=4.1.1

to instead be this:

http://localhost/mysite/wp-includes/style.css

Answer 1

Default wp_enqueue_[style/script]() behavior

The default value for the $version argument of wp_enqueue_style() is false. However, that default just means that the stylesheets are given the WordPress version instead.

Solution

Thanks to "Remove version from WordPress enqueued CSS and JS", I learned the undocumented fact that passing in null as a version will remove the version altogether!

Example

wp_enqueue_style( 'wpse-styles', get_template_directory_uri() . '/style.css', array(), null );

Caveat Reminder

It's worth pointing out, as noted in the question, that this should probably only be done during development (as in the specific usecase). The version parameter helps with caching (and not caching) for site visitors and so probably should be left alone in 99% of cases.

Answer 2

Thank you for your post, mrwweb.

I found another solution to this, by creating a very simple plugin you can deactive when the site is no longer under development.

<?php

/*
Plugin name: Strip WP Version in Stylesheets/Scripts
*/

function switch_stylesheet_src( $src, $handle ) {

        $src = remove_query_arg( 'ver', $src );
        return $src;
}
add_filter( 'style_loader_src', 'switch_stylesheet_src', 10, 2 );

?>

I spent a couple minutes trying to find this solution. Thought I might share another option here instead of creating a new Question/Answer.

Answer 3

building on the suggestion of @ricardo-andres, a code applicable anytime, most notably for resources on CDN ( like jquery ) - we get rid of this query tag on resources having a version included in their names

function clean_src( $src, $handle ) {
    if (preg_match('_\d[^\?/]*\?_', $src))
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
add_filter( 'style_loader_src', 'clean_src', 10, 2 );
add_filter( 'script_loader_src', 'clean_src', 10, 2 );