All sites have caching of static files enabled by default, as it should be. But when you update the files, you may encounter that the updates are not visible. This is because they are delivered from cache, and not from the actual files. The solution for this is simple.
Use query strings (url strings)
$ver parameter and is where the magic happens.
How to enqueue styling files (from the WordPress documentation)
wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' );
(string) (Required) Name of the stylesheet. Should be unique.
(string) (Optional) Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.
Default value: ”
(array) (Optional) An array of registered stylesheet handles this stylesheet depends on.
Default value: array()
(string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
Default value: false
(string) (Optional) The media for which this stylesheet has been defined. Accepts media types like ‘all’, ‘print’ and ‘screen’, or media queries like ‘(orientation: portrait)’ and ‘(max-width: 640px)’.
Default value: ‘all’
How to enqueue styling and making sure the cache will be updated
The important part, and the part that makes sure you do not use the outdated, cached, version of a stylesheet is the
$ver part of the enqueue function. By setting
$ver to the timestamp of the file you are enqueueing, by using
filemtime() , you make sure that if you update that file, WordPress will add the timestamp if the file(the time of the update) as a query string and the cache will be bypassed (and the new version will be cached).
Here is how you do it
wp_register_style( 'somehandle', get_template_directory_uri() . '/assets/css/master.css', false, filemtime(dirname(__FILE__) . '/assets/css/master.css') );
The file will now be loaded with a url looking something like this:
Next time you update your stylesheet, it will be bypassed by the cache immediately.
Give us your feedback on this article
Servebolt has launched Accelerated Domains!
Accelerated Domains is a service that greatly improves and optimizes your site on these four areas: Performance, Scalability, Security and the Carbon footprint of your website.