How can I version the main CSS file?

Question

How can I instruct wordpress to use a filename other than 'styles.css' for my main stylesheet - for example, styles-1.css? I'd like to do this for versioning and caching purposes.

Answer 1

Style.css is required for your WordPress theme. That's where WordPress gets the theme name and meta information for the Appearance >> Themes menu from. That said, you don't actually have to use style.css in your theme at all. I know of several readily available themes that don't use it, and I only use it in a handful of my custom designs.

In header.php just place the following tag in place of the regular stylesheet link:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style-1.css" />

This will load your alternative stylesheet as the page's stylesheet and completely ignore the regular style.css.

Answer 2

I'm not sure if this has changed for WP3, so I'm not wholly sure, but one way is to edit the relevant php file directly (I don't know if it can be done from within the Dashboard/Admin pages):

wp-folder/wp-content/themes/your-theme/

And open up header.php. In this file find this line:

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

To add a 'version' to the linked stylesheet (assuming you want it to be something like: stylesheetURL.css?version=2) change it to:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>?version=2" type="text/css" media="screen" />

This is kind of inelegant, though, so if there's a better way I'd love to hear it myself =)

---

I just re-read your question...

To use a different stylesheet styles-1.css you can either just the (above) line to:

<link rel="stylesheet" href="absolute/or/root-relative/path/to/styles-1.css" type="text/css" media="screen" />

(Basically removing the <?php ... ?> and replacing it with a regular path.)

Answer 3

Drop this in your theme's functions.php file:

function my_cool_style_versioner( $style ){
  return str_replace( '/style.css', '/style-1.css', $style );
}

add_filter( 'stylesheet_uri', 'my_cool_style_versioner' );

Answer 4

This may be inappropriate, please let me know if I missed something.

The fourth argument to wp_enqueue_style() is the stylesheet's version number. In your theme's functions.php:

function my_theme_styles() {
    // replace "10" with your version number; increment as you push changes
    wp_enqueue_style('my-theme-style', get_bloginfo('template_directory') . '/style.css', false, 10);
}
add_action('wp_print_styles', 'my_theme_styles');

Requires that your header.php does a wp_head(), which of course you were doing anyway. ;)

This allows you to push long expiry headers with your CSS file, and force clients to download a new file by updating the version number. WP will append "?ver=N" to the URL of your CSS file.

Answer 5

Well, you could simply use style.css as the place where you call the version you want. Simply put

@import url("style-1.css");

Then when you upgrade a version, just edit it to be:

@import url("style-2.css");

As for saving versions, have you considered using a Subversion, or git? Then you can have a complete track record of your stylesheet. It's possible I'm not fully understanding the full reasons for your versioning.

Answer 6

EAMann is correct, you don't have to use the style.css file for all your CSS.

For versioning the style sheet and other files in your theme you can add this to your functions.php file

function fileVersion($filename)
{
    // get the absolute path to the file
    $pathToFile = TEMPLATEPATH.'/'.$filename;
    //check if the file exists
    if (file_exists($pathToFile)) 
    {
        // return the time the file was last modified
        echo filemtime($pathToFile);
    }
    else
    {
        // let them know the file wasn't found
        echo 'FileNotFound';
    }
}

And then when you make the link to your style sheet you can do this.

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

This way you don't have to manually update the version number, anytime the file is updated on the server the version will automatically change to that UNIX timestamp

Answer 7

I know that this thread is rather old by now. But in case someone needs a quick solution. There is a plugin called Versions which handles versioning of stylesheets and scripts automatically. Get it at: http://wordpress.org/extend/plugins/versions/