15

Like the title suggests, I'm not too sure how to change the version of a .css file in my theme. At the moment the .css versioning is like this:

<link rel='stylesheet' id='xxxx'  href='https://www. site css/ styles.css?ver=4.6.1' type='text/css' media='all' />

Is there a script that I need to run - where should I be looking to make the version 4.6.2 as per above?

1
  • How are you getting this script to print? Nov 29, 2016 at 2:51

4 Answers 4

19

The fourth argument, $ver for wp_enqueue_style() allows you to set the version:

wp_enqueue_style( string $handle,
                  string $src = false,
                  array $deps = array(),
                  string|bool|null $ver = false,
                  string $media = 'all' );

Per the docs:

$ver (string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added. Default value: false

3
  • Thanks for that - I guess what I am asking is 'how do I do that' - i.e. 'how do I run that script to generate a new version'? Hope that makes sense...
    – Henry
    Nov 29, 2016 at 2:55
  • Would you update your question with the code where wp_enqueue_style() is called? WordPress handles the versioning automatically based on the explanation of $ver posted in my answer, so I'm assuming $ver is set to false. If you want to change it, change the $ver argument to a new string (I wouldn't use 4.6.2 since that convention is used by WordPress already), but technically it would work. Nov 29, 2016 at 2:58
  • 1
    You can easily substitute anything there. For example $ver = time(); would make a new version every time you hit the page, and the version would be the time. Nov 29, 2016 at 2:59
8

Mostly theme's use wp_enqueue_style() function inside their functions.php file to add style sheet in the header. Here is how to find out if your theme does the same.

Open your wp-content/themes/YOUR_THEME_NAME/functions.php file, and find out the line which is adding the style sheet, Like:

wp_enqueue_style('main_style',  get_stylesheet_directory_uri() . '/style.css');

Or Like:

wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );

You can search for the ID (except for -css part)... if the ID is: main_style-css search for just main-style in your functions.php file, and you should probably find the line of code you were looking for.

Now that you found the code and you know that your theme adds this stylesheet by using wp_enqueue_style() in functions.php file. You need to update this code for version.

$style_ver = filemtime( get_stylesheet_directory() . '/style.css' );
wp_enqueue_style( 'main_style', get_stylesheet_directory_uri() . '/style.css', '', $style_ver );

As you can see, this code gets the last modified time of style.css file using filemtime() PHP function and it also converts the time to timestamp using time() PHP function just to make things clean.

If you don't want the version to dynamically change every time you can simply do this:

wp_enqueue_style( 'main_style', get_stylesheet_directory_uri() . '/style.css', '', '1.5' );

Thats pretty much it. Peace!

1
  • Heads up: you should use get_stylesheet_directory() inside of filemtime() since it will return a system path.
    – Rob W
    Jul 13, 2017 at 22:17
3

I didn't get much out of these answers so I thought I'd write what worked for me. I know the codex says:

$ver (string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added. Default value: false

But it is very cryptic as to how it actually works. I could not get a version number in wp_enqueue_style to trigger a query param like ?ver=1.2.3 on my stylesheet. However setting it to true allows the stylesheet's declared version to cache bust the stylesheet. (read on)

Within your style.css you must name your theme. This is required by WP. However other options such as version is what wp_enqueue_style's version boolean gives reference too.

/******************************************************************
Site Name: MySite.com
Author: @BenRacicot
Version: 4.0 // <- wp_enqueue_style's version number
Stylesheet: Main Stylesheet
******************************************************************/

Now when I change that to Version: 4.1 I get style.css?cache-bust=0.24135995238933283

2

You may simply use time() at a time of enqueue style or script like this..

Without using wordpress wp_enqueue_style() function

<link rel='stylesheet' id='xxxx'  href='https://www. site css/ styles.css?ver=<?php echo time(); ?>' type='text/css' media='all' />

Using wp_enqueue_style() function

wp_enqueue_style('style_sheet_name', get_stylesheet_directory_uri() . '/custom_style.css', '', time());

OR

wp_enqueue_style('style_sheet_name', get_stylesheet_uri() . '/custom_style.css', '', time());
1
  • 3
    I wouldn't recommend this, I'm pretty sure it will defeat the version caching all together. Mar 28, 2019 at 8:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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