18

How to add version of style.css in WordPress like below i can do in Joomla.

<link rel="stylesheet" href="/templates/example/css/style.css?v=1.2">

i know that the style.css will load dynamically. please help me to how to do that.

1
  • Here is a plugin wordpress.org/plugins/wp-css-version-history that will automatically append a version number in the stylesheet. It creates a new stylesheet which is loaded last. No need to clear cache to see changes. Uses Wordpress built in CSS editor and user file lock for team collaboration. May 14, 2018 at 12:04

11 Answers 11

18

Version number is a parameter of wp_enqueue_style().

As per the Codex, here are all the parameters that wp_enqueue_style accepts.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

So for example to load a stylesheet with a version number you'd do the following:

function wpa_90820() {
    wp_enqueue_style('my-styles', get_stylesheet_directory_uri() .'/my-styles.css', array(), '1.0' );       
}

add_action('wp_enqueue_scripts', 'wpa_90820');
7
  • when i do this the old style.css is also loading. How to remove it?
    – Toretto
    Mar 14, 2013 at 12:10
  • @VinodDalvi what do you mean by handle. i don't know about it ,i m new to wordpress please me.
    – Toretto
    Mar 14, 2013 at 12:14
  • 1
    @Toretto Either you theme is hard-coding it in header.php or your theme is also enqueing it with a different handle (the first parameter). The solution also depends on if you are directly editing your theme's functions.php or if you've created a child theme. Mar 14, 2013 at 12:15
  • @Toretto, $handle is shown in my response and also described in the link I provided to the Codex page for wp_enqueue_style please do your homework. Mar 14, 2013 at 12:15
  • 1
    @Toretto If your theme is using wp_enqueue_style() to load the stylesheet in question then it's handle is the first parameter. If your theme is hard-coding the stylesheet in header.php then it won't have a handle. Mar 14, 2013 at 12:22
17

If you are a theme developer, you might want to force reload of your assets when you push new version.

So versioning of a theme is done in style.css

/*
    Theme Name: Your Theme Name
    Version: 1.0.2
*/

At the top of your functions.php:

$theme = wp_get_theme();
define('THEME_VERSION', $theme->Version); //gets version written in your style.css

Later when you enqueue CSS or JS, use THEME_VERSION as fourth argument:

function theme_styles()
{
    wp_enqueue_style('main', get_template_directory_uri().'/css/main.css', [], THEME_VERSION, 'all');
}
add_action('wp_enqueue_scripts', 'theme_styles'); 

Will output to the page:

.../your-theme-name/css/main.css?ver=1.0.2 

Gets handy when you have more assets to care about and don't want to change them manually.

1
  • I used this method for a child theme, so we used get_stylesheet_directory_uri() insted of get_template_directory_uri()
    – Carlos
    Apr 7, 2021 at 12:40
11

Instead of hardwiring the version, you might find it better in some instances to dynamically version your stylesheet so whenever you change it, it automatically changes and refreshes the browser cache immediately without having to edit your functions.php over and over again.

You can use filemtime() to do that. Here is how to do that in a child-style that references the parent_style

    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), filemtime( get_stylesheet_directory() . '/style.css' )  );
2
  • Over time, I've come to prefer theme versions, but it's a great idea to use filemtime() here, if one doesn't have a consistent theme versioning practice.
    – jgangso
    Mar 14, 2018 at 11:49
  • This is a great solution! I just used array() for the third parameter because I'm using a custom theme with no parent and it worked perfectly.
    – cam
    Aug 18, 2021 at 22:24
2

You can achieve this using one of the following ways :

1) Add following tag in header.php file of the theme.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>'?v=1.2" type="text/css" media="all" />

2) Add following code in functions.php file of the theme.

function theme_styles()  
{ 
  // Register the style like this for a theme:  
  // (First the unique name for the style (custom-style) then the src, 
  // then dependencies and ver no. and media type)
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), '1.2', 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

For more information see this page.

6
  • when i do this the old style.css is also loading. How to remove it?
    – Toretto
    Mar 14, 2013 at 12:10
  • What is the handle of old style.css? Mar 14, 2013 at 12:13
  • if you are not able to find the handle then just copy and paste the whole style.css url here.. i will get it from there... Mar 14, 2013 at 12:19
  • Or can you tell me whats your theme name or theme's folder name? Mar 14, 2013 at 12:23
  • 1
    Welcome .... :) Mar 14, 2013 at 12:25
2

the best way to load css into your wordpress theme is the following code in your functions.php file:

function theme_styles()  
{ 
  global $ver_num; // define global variable for the version number
  $ver_num = mt_rand() // on each call/load of the style the $ver_num will get different value
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), $ver_num, 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

This is the right way to load the styles in your theme and also it's the best for staging/testing purposes because each refresh will deliver the updated version of the style.

If you want to avoid the loading 1st way, you can use this shorted version and place the following line into your header.php file and will get the same result:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?ver=' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

Cheers

1

Try this:

Add this to functions.php

function autoVer($filename){
    $url = get_template_directory_uri() . $filename;
    $file = get_template_directory() . $filename;
    if ( file_exists($file)) {
        return $url . '?v=' .md5(date("FLdHis", filectime($file)) . filesize($file));
    }
    clearstatcache();
}

Add this to the header or footer -> autoVer('/js/main.js');

0
1

Contrary to the methods presented so far, I believe it is better to use the version number which appears at the top of your style.css file:

// style.css
/**
Theme Name: My theme
...
Version: 1.2.3
...
**/

To use the theme's version in your css, add the following to your functions.php (or equivalent) script:

<?php

wp_enqueue_style(
    'my-theme',
    get_stylesheet_directory_uri() . '/style.css',
    [],
    wp_get_theme()->get('Version')
);

This means that, after you edit your style.css file, all you need to do is to change the version number at the top of the same file to see the changes in the frontend.

If you examine the head section of the theme's HTML you will see the following:

<link rel='stylesheet'
    id='my-theme-css'
    href='... style.css?ver=1.2.3'
    type='text/css'
    media='all'
/>
0

Another solution if you can't figure it out yet, it's to change the filename of your child theme's style.css to, for example, style2.css and then change it on your child theme's functions.php file, as shown below:

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

This will cause Wordpress to request and serve a new CSS file for your website.

0

Here we use WordPress’ wp_get_theme() to get the theme version (as specified in the theme’s stylesheet, style.css):

// get theme version
function rave_get_version() {
    $theme_data = wp_get_theme();
    return $theme_data->Version;
}
$theme_version = rave_get_version();
global $theme_version;

wp_enqueue_style( 'main-style', get_template_directory_uri() .'/assets/css/style.css', [], THEME_VERSION, 'all' );
2
  • I don't think that answers the question though which was how to add the version number to the CSS URL, for cache-busting I assume.
    – Rup
    Jun 13, 2021 at 8:52
  • wp_enqueue_style( 'main-style', get_template_directory_uri() .'/assets/css/style.css', [], THEME_VERSION, 'all' ); Jun 14, 2021 at 8:13
0

You don't need in fact to un cache the style.css file.

You can write your own css file then queue like the way @vinod dalvi has written.

function theme_styles()  
{ 
  wp_enqueue_style('stylecss',get_template_directory_uri().'/yourname.css', array(), '1.2', 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Based on browser rules the latest css file has higher priority , so make sure to use !important in your css code if necessary .

Good luck.

-1

This is pretty straight up way of getting the version number by calling the function bloginfo($show) twice. First for the stylesheet and secondly for the version number.

<link rel="stylesheet" id="style-css" href="<?php bloginfo('stylesheet_url'); ?>?ver=<?php bloginfo('version'); ?>" type="text/css" media="all" />

Thats all there is to it. Hope that helps or is useful. You can go through all the parameters available and see what you can output with the bloginfo() function.

Ignore my comment since @Ravs has pointed out my error regarding the 'versions' parameter for the bloginfo() function. It does indeed print the Wordpress version number.

1
  • I think that it is not correct answer because <?php bloginfo('version')?> gives you current wordpress version while question is about append style.css version not wordpress version. Jun 5, 2013 at 23:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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