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.

New contributor
Waterbarry is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • Welcome to WordPress.StackExchange and to developing plugins in general! I would advise you to use the WP functions wp_enqueue_style() andwp_enqueue_script(), instead of echoing like you're currently doing. The Theme Handbook has a chapter on how to, there is no difference in theme & plugin development in that case. – kero Dec 7 at 15:42
  • When using wp_enqueue_* you can change the version (4th argument) to force a reload. But I suspect there is some kind of caching involved here. If not your browser, it might be the webserver or a CDN like Cloudflare. – kero Dec 7 at 15:43

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' )
);
  • Depending on what OP means by "it seems the same across browsers" it could be NGINX or CF caching instead of a browser – kero Dec 7 at 16:20

Your Answer

Waterbarry is a new contributor. Be nice, and check out our Code of Conduct.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.