js/css updating when making a plugin

Question

I'm relatively new to writing my own plugins and there's something I can't figure out and can't seem to find an answer anywhere. Apologies if this seems obvious.

My plugin has js and css files that are called as so:

echo '<link rel="stylesheet" type="text/css" href="'.plugin_dir_url( __FILE__ ) .'treatment-slider-9.css"/>';

echo '<script type="text/javascript" src="'.plugin_dir_url( __FILE__ ) .'auto-seo-scroller-16.js"></script>';

Each time I update the files, I've found I'm having to rename it and call the new file instead as the updates are not reflected in on the site.

I'm not using any caching plugins and it seems the same across browsers, in incognito, etc.

Answer 1

This isn't really a WordPress issue. It's just how browsers cache styles and scripts so that it doesn't need to download them again. Renaming the file means the browsers treat them as new files and re-download them.

That being said, WordPress does offer a way to get around this issue.

But firstly, you should properly enqueue the scripts and stylesheets with the appropriate functions, wp_enqueue_script() and wp_enqueue_stylesheet(). See the relevant section of the theme handbook for more.

When you use these functions you can use the 4th argument to add a ?ver= parameter to the URL with the version number for the script. Whenever this parameter changes the browser will treat this as a new file and re-download it.

So you would enqueue your assets like this:

wp_enqueue_style( 
    'treatment-slider', 
    plugins_url( 'treatment-slider.css', __FILE__ ), 
    [], 
    '9'
);
wp_enqueue_script( 
    'auto-seo-scroller', 
    plugins_url( 'auto-seo-scroller.js', __FILE__ ), 
    [], 
    '16' 
);

So now you can tell the browser that there's a new version just by changing the '9' and '16' to a different number.

However, during development the pace of changes might make updating this number every time just as frustrating as renaming the file. In that case you can use the filemtime() function to use the last modified time of the file as the version number. You just need to pass the path of the file to the function:

wp_enqueue_style( 
    'treatment-slider', 
    plugins_url( 'treatment-slider.css', __FILE__ ), 
    [], 
    filemtime( plugin_dir_path( __FILE__ ) . 'treatment-slider.css' )
);

wp_enqueue_script( 
    'auto-seo-scroller', 
    plugins_url( 'auto-seo-scroller.js', __FILE__ ), 
    [], 
    filemtime( plugin_dir_path( __FILE__ ) . 'auto-seo-scroller.js' )
);