Magento: CSS Auto-Versioning

When you make changes to your themes CSS files in Magento and are using the built in CSS merging capabilities in Magento, you will run into issues with browsers caching the old file and your new changes not taking effect. The issue is that the filename for the css files doesn’t change when you make changes due to the way the filenames are generated. As long as your source files filenames stay the same, the URL won’t change.

A solution to this is to vary the filename of the css files by including a timestamp of the most recently updated source file in the filename. One way to do this is to modify the Mage_Core_Model_Design_Package class.

I added a method that will check the timestamp of the most recent file. We then include the most recently modified files timestamp into the filename for the merged file.

You May Also Like

About the Author: J. Smith


  1. Question: How will i know this worked?

    It is not changing the file name for me.. What action triggers the renaming of the file?
    I did flush js/css cache but still nothing..

    1. You can tell its working when you look at the html source of your page by looking at your css url.

      By default when you have Magento merging the CSS you will get a url like

      With this extension, the filename should be something like

      The last part is the timestamp of the most recently modified file in the merge.

      Did you flush the config cache as well?

  2. If you also want to version the Javascript files (what I was looking for), add this function:
    public function getMergedJsUrl($files) {
    // get timestamp of newest source file
    $filesTimeStamp = $this->getNewestFileTimestamp ( $files );

    $targetFilename = md5(implode(',', $files)) . '-'.$filesTimeStamp.'.js';
    $targetDir = $this->_initMergerDir('js');
    if (!$targetDir) {
    return '';
    if ($this->_mergeFiles($files, $targetDir . DS . $targetFilename, false, null, 'js')) {
    return Mage::getBaseUrl('media', Mage::app()->getRequest()->isSecure()) . 'js/' . $targetFilename;
    return '';

  3. Should this still work with 1.9.x?
    I tried it and I ended up with a 404 error loading the website. I assume I did it correct, I used the file locations at the beginning of each bit of code.

    To ensure I am doing it correctly, is there a download with the correct file locations by any chance please?

    Thanks in advance for your help!

Leave a Reply

Your email address will not be published. Required fields are marked *