{"id":23239,"date":"2011-12-28T20:54:26","date_gmt":"2011-12-28T15:24:26","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=23239"},"modified":"2026-10-07T20:15:03","modified_gmt":"2026-10-07T14:45:03","slug":"force-browser-css-refresh","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/","title":{"rendered":"How to Force CSS Refresh in WordPress (Automatic Cache Busting)"},"content":{"rendered":"<p>Changed your stylesheet but visitors still see the old design? Browsers and caches keep CSS files for days, so regular readers may see a broken layout until they hard-refresh. The fix is to <strong>force CSS refresh<\/strong> by changing the file&#8217;s version number whenever it changes. In 2011 we used WordPress developer Mark Jaquith&#8217;s filemtime trick to do this automatically. It is still the best method, now done the proper WordPress way with wp_enqueue_style. Here is how in 2026, plus what to do about caching plugins and CDNs.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-63534\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/force-css-refresh-wordpress.webp\" alt=\"How to force a CSS refresh in WordPress\" width=\"1200\" height=\"630\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/force-css-refresh-wordpress.webp 1200w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/force-css-refresh-wordpress-300x158.webp 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/force-css-refresh-wordpress-1024x538.webp 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/force-css-refresh-wordpress-150x79.webp 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/force-css-refresh-wordpress-768x403.webp 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> Load your stylesheet with <code>wp_enqueue_style()<\/code> and use <code>filemtime()<\/code> as the version, so the URL changes to style.css?ver=1728300000 every time you save the file. Then purge your caching plugin and CDN. To see changes yourself immediately, press <strong>Ctrl + F5<\/strong> (Cmd + Shift + R on Mac).<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6af656a5ee8e7\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6af656a5ee8e7\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/#Why_browsers_show_old_CSS\" >Why browsers show old CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/#Method_1_Automatic_versioning_with_filemtime_recommended\" >Method 1: Automatic versioning with filemtime (recommended)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/#Method_2_Change_the_version_number_by_hand\" >Method 2: Change the version number by hand<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/#Method_3_Additional_CSS_in_the_Customizer\" >Method 3: Additional CSS in the Customizer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/#Do_not_forget_caching_plugins_and_the_CDN\" >Do not forget caching plugins and the CDN<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/#Check_it_worked\" >Check it worked<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/#When_to_use_each_method\" >When to use each method<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/#How_do_I_force_a_CSS_refresh_in_Chrome\" >How do I force a CSS refresh in Chrome?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/#Does_a_version_query_string_hurt_caching\" >Does a version query string hurt caching?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/#Where_do_I_add_the_code\" >Where do I add the code?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_browsers_show_old_CSS\"><\/span>Why browsers show old CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Stylesheets are cached so pages load faster. Your server, caching plugin and CDN may also keep a copy. If the file name stays the same, nobody fetches the new version. Small tweaks may go unnoticed, but structural changes or new classes can make the site look broken to returning visitors.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-23242\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/css-stylesheet.png\" alt=\"force CSS refresh with a version number\" width=\"443\" height=\"199\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/css-stylesheet.png 443w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/css-stylesheet-300x134.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/css-stylesheet-50x22.png 50w\" sizes=\"(max-width: 443px) 100vw, 443px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_1_Automatic_versioning_with_filemtime_recommended\"><\/span>Method 1: Automatic versioning with filemtime (recommended)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Add this to your child theme&#8217;s functions.php. It uses the file&#8217;s last-modified time as the version:<\/p>\n<pre><code>add_action( 'wp_enqueue_scripts', function () {\r\n    $file = get_stylesheet_directory() . '\/style.css';\r\n    wp_enqueue_style(\r\n        'child-style',\r\n        get_stylesheet_uri(),\r\n        array(),\r\n        file_exists( $file ) ? filemtime( $file ) : null\r\n    );\r\n} );<\/code><\/pre>\n<p>Your stylesheet now loads as style.css?ver=1728300000, and the number changes automatically each time you save. Use the same idea for custom JavaScript files with <code>wp_enqueue_script()<\/code>.<\/p>\n<p>In 2011 we added the same trick directly to header.php with <code>bloginfo('stylesheet_url')<\/code> and <code>filemtime()<\/code>. It worked, but enqueueing is cleaner, works with caching plugins and avoids loading the stylesheet twice.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_2_Change_the_version_number_by_hand\"><\/span>Method 2: Change the version number by hand<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you cannot use PHP, add a version to the URL yourself, such as style.css?v=2, and increase it after each change. Simple, but easy to forget. Our early approach of rotating style1.css, style2.css and style3.css was even more work.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_3_Additional_CSS_in_the_Customizer\"><\/span>Method 3: Additional CSS in the Customizer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS added in Appearance, Customize, Additional CSS is printed inline in the page, so changes appear as soon as the page cache is cleared. It is ideal for small tweaks. We use it ourselves for quick fixes; see how to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/add-custom-css-wordpress-post-editor\/\">add custom CSS to the WordPress editor<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Do_not_forget_caching_plugins_and_the_CDN\"><\/span>Do not forget caching plugins and the CDN<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Caching plugins:<\/strong> LiteSpeed Cache, WP Rocket and others may combine and minify CSS into new files. Purge all caches after a CSS change; many purge CSS automatically when versions change.<\/li>\n<li><strong>CDN:<\/strong> Cloudflare, Hostinger CDN and others cache files at the edge. Purge the CDN cache or the specific CSS URL.<\/li>\n<li><strong>Browser:<\/strong> hard-refresh with Ctrl + F5, or open DevTools (F12), go to the Network tab and tick Disable cache while testing.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Check_it_worked\"><\/span>Check it worked<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>View the page source (Ctrl + U) and search for &#8220;style.css&#8221;. The ?ver= number should match the latest save time. Then test the page in a private window and on your phone. Faster pages help too; see <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/\">delay loading non-critical CSS<\/a> and our tips on <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/css-files-load-faster\/\">making CSS files load faster<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"When_to_use_each_method\"><\/span>When to use each method<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Use filemtime versioning for theme stylesheets you edit often; it is set-and-forget. Use Additional CSS for small, one-off tweaks you want live immediately. Use manual version numbers only on static HTML sites without PHP. Whichever you choose, make a habit of purging your page cache and CDN straight after design changes, and check the site logged out, where caching is strongest.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"How_do_I_force_a_CSS_refresh_in_Chrome\"><\/span>How do I force a CSS refresh in Chrome?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Press Ctrl + F5 or Ctrl + Shift + R on Windows, or Cmd + Shift + R on Mac.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Does_a_version_query_string_hurt_caching\"><\/span>Does a version query string hurt caching?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. Browsers and CDNs cache each version; only a changed version triggers a new download.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Where_do_I_add_the_code\"><\/span>Where do I add the code?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In a child theme&#8217;s functions.php or a code snippets plugin, never in a parent theme that updates.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Changed your stylesheet but visitors still see the old design? Browsers and caches keep CSS files for days, so regular&#8230;<\/p>\n","protected":false},"author":4,"featured_media":63534,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49,17],"class_list":["post-23239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/23239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=23239"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/23239\/revisions"}],"predecessor-version":[{"id":63535,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/23239\/revisions\/63535"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/63534"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=23239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=23239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=23239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}