Add Timestamps to WordPress Enqueued Assets

A common issue I’ve come across developing and designing WordPress Websites is that when an update is made to a CSS or JavaScript file, there is often a cached version of the file stuck in your browser cache – and more commonly the client’s browser cache.

This can cause some confusion, as oftentimes the client is still seeing the ‘old’ version of things, because they don’t refresh their cache, or don’t know how to.

Now when you use the wp_enqueue_style and wp_enqueue_script functions, there is a version argument you can pass through (if none is passed it will use the current WordPress version). This version argument automatically assigns a query var to the asset URL.

For example:

https://www.your-domain.com/wp-content/themes/your-theme/style.css?ver=4.9.1

Your browser will cache that above url, including the ?ver=4.9.1 part. And, when if you update the CSS file, your browser doesn’t know to re-fetch the asset because the ver query variable hasn’t changed!

The function below piggybacks on this functionality by automatically creating the ver query variable with the timestamp of when the file was most recently modified.

For example:

https://www.your-domain.com/wp-content/themes/your-theme/style.css?ver=1514831115

Now, whenever you update this particular asset, the ver query variable will update to the new timestamp, and avoid the cache!

// Enqueue your theme's CSS. 
eps_enqueue_asset( 
        'theme', 
        get_bloginfo( 'stylesheet_url' ), 
        get_stylesheet_directory() . '/style.css', 
        array('dependency-1', 'dependency-2') 
    );


function eps_enqueue_asset( $slug, $url, $path = false, $dependencies = false, $version = false )
{

    if( strpos( $url, $_SERVER['HTTP_HOST']) !== false )
    {
        // Local file
        if( ! $version )
        {
            if( file_exists( $path ) )
            {
                $version = filemtime( $path );
            }

            if( ! $version )
            {
                $theme      = wp_get_theme();
                $version    = sprintf('wp-%s-theme-%s',
                    get_bloginfo( 'version' ),
                    $theme->get( 'Version' )
                );
            }
        }
    }
    else
    {
        $curl = curl_init( $url );

        //don't fetch the actual page, you only want headers
        curl_setopt($curl, CURLOPT_NOBODY, true);

        //stop it from outputting stuff to stdout
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

        // attempt to retrieve the modification date
        curl_setopt($curl, CURLOPT_FILETIME, true);

        $result = curl_exec($curl);

        if( $result !== false )
        {
            $version = curl_getinfo($curl, CURLINFO_FILETIME);
        }
    }

    wp_enqueue_style( $slug, $url, $dependencies, $version );
}