0

I have made some changes on a live website (I know, not the best practice, but I was told to) and I'm having issues with caching. Every time I make a change to our CSS (SASS actually), I have to hit CTRL F5 to see the changes. That's not a problem for me, but the users are starting to complain of a broken website and many of them don't know how to clear the cache or use CTRL F5.

I have tried adding the following code, but it's not working. 

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

I have also tried adding this script: 

        <script type="text/javascript">
        $(document).ready(function(){
            $('img').each(function(){
                var date = new Date;
                // add the current unix timestamp in microseconds to the the image src as a query string
                this.src = this.src + '?' + date.getTime();
            });
        });
    </script>

I don't know Javascript though, so I don't know how to use it properly. I have searched for answers and other people have said these things work for them, but they simply are NOT working for me. I am a designer and front-end developer, so PHP and Javascript are a bit beyond me.

Finally, I've also read about using version tags - ?v=x.x, but my issue is the site was coded by other developers and I have no clue how they are linking to our stylesheet (using SASS).

Any help would be great appreciated!

Thanks!

Wynteraeon
  • 3
  • 2

3 Answers3

2

Call the external CSS file adding a random code as GET variable in PHP. Something like this:

<script src="yourfileUpdated.css?<?php echo rand() ?> rel="stylesheet" type="text/css" />
holden
  • 1,505
  • 10
  • 18
  • Note: using this method ensures the file is never cached, regardless of if changes were actually made or not. – Tenbo Oct 27 '17 at 16:49
  • 1
    Correct, i choosed this cause looked to me the most simple to implement, considering what the opener wrote in the question. Looked to me that he simply didn't want the file in the cache... – holden Oct 27 '17 at 16:53
2

Ideally you'd use PHP to check the file's filemtime() (the time it was last modified), and use a technique called versioning to indicate it's a changed file, and to not load it from cache.

The resulting HTML would look something similar to this:

<link href="/your/css/file.css?ver=<?php echo filemtime('/your/css/file.css'); ?>" rel="stylesheet" type="text/css"/>
Tenbo
  • 184
  • 1
  • 9
  • I appreciate both of your answers! I would like to try doing this, but unfortunately (and it sounds totally stupid), I can not find where they are linking in the CSS. I am looking in the header file and the only stylesheet they have linked is the font-awesome one. Could they be using a script to do it? – Wynteraeon Oct 27 '17 at 17:25
0

Styles are added with wp_enqueue_style function. Search your theme, it is probably in functions.php.

Then use like this:

wp_enqueue_style('main-styles', get_template_directory_uri() . '/css/style.css', array(), filemtime(get_template_directory() . '/css/style.css'), false);

Read more here https://wordimpress.com/wordpress-css-and-js-cache-busting/.

Roman K.
  • 883
  • 1
  • 7
  • 15
  • Thank you for that advice! I didn't know you could add stylesheets that way, but I still can't find it. They didn't add it through a function. The only wp_enqueue_style I can find is again for the font-awesome icons. Can I use my .htaccess to keep my site from caching? – Wynteraeon Oct 31 '17 at 18:12
  • Yes, it can be done with .htaccess. Look here https://stackoverflow.com/questions/11532636/how-to-prevent-http-file-caching-in-apache-httpd-mamp. It's not an ideal solution, but you may try it anyway. The best option is to find how CSS is linked/loaded and then use Tenbo's method or mine to prevent caching. – Roman K. Oct 31 '17 at 18:38
  • Thank you so much! – Wynteraeon Nov 07 '17 at 14:31