501
Views

When updating styles in a child theme you can sometimes run into your changes not showing when refreshing the site after code changes. This is probably because your child theme has enqueued your style.css file using a version number often linked to the child theme version. This will cause the style.css file to be cached and when loading your site causing the new changes not be shown on the front end.

Enqueueing style.css With Cache Busting

If you’ve ever looked at the source code of a WordPress site, you will find something like “?ver=1.0.1” tacked on to the link tag for your style.css file. In WordPress the version is part of the enqueue function and the version you are seeing is based on the child theme version number. Each time you update a child theme you are supposed to change the version number such as 1.0.2 then 1.0.3. This causes WordPress to tell your browser to load in the new style.css file because it may have changed with the new child theme version.

During development you may not want to have to update the version after every tweak you make so you need to let WordPress inform your browser and any caching that the file has changed. There are plenty of examples using things such as a random number for the version so each time you load the page a new version number will be present and in turn any cache associated with the style.css file will be loaded. This method works well for a site under development but eventually you want to utilize cacheing of the file.

Enter an option that only changes the version number when a change has been made to style.css but doesn’t require changing the child theme version. In this example we utilize filemtime() to check the last time the style.css file was saved and then add that as the version number. No cache will hold on to that file until it is updated and saved again. This is my go to for any style or script that I enqueue and is a popular solution.

Conclusion

As there often is, there are many ways to achieve a similar solution but for me the ease and “set it and forget” it simplicity make this solution the best one for enqueueing files in themes, child themes and plugins within WordPress.

Article Categories:
Coding
SDATIC

Web developer and former photographer by trade...gamer and all around tech enthusiast in his free time. Christoph started sdatic.com as a way to organize his ideas, research, notes and interests. He also found it enjoyable to connect and share with others who parallel his interests. Everything you see here is a resource that he found useful or interesting and he hopes that you will too.

Leave a Reply

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