jscss updating when making a plugin

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.

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.

• plugin-development

Share Improve this question asked Dec 7, 2018 at 15:36 WaterbarryWaterbarry 1133 bronze badges 2

• 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 Commented Dec 7, 2018 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 Commented Dec 7, 2018 at 15:43

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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' )
);