My page doesnt load new styles, after I changed them

Question

I'm having a problem inside wordpress custom-theme, where I enqueued style, but it doesn't seem to work without linking it in the index.php , when I edit the css I have to shift+f5 to see the changes, basically clearing the browser cache. My question is if there is any way to do this automatically.

Oh and also I forgot to mention, that I'm using WinSCP for reaching the FTP server of my wordpress website.

I tried to do the auto-clear cache using php, but with many attempts it didn't do anything or even better, prevented me from manually clearing the cache.

What I'm hoping for is 2 things: 1. My enqueued styles would work without linking them in html 2. The automatic clear-cache upon updating code using php

Answer 1

TL;DR Use Shift-F5 liberally when developing css, and disable any caching plugins on your site when developing anything.

Shift-F5 clears your browser cache. That cache holds objects like your css files, so your users' browsers don't have to download them again as they navigate from page to page on your site, or even when they return to your site later. That means css files are sticky. Using shift-F5 while working on your css is an inherent part of web development. There's no reliable way to clear css objects automatically.

Your sample code clears the server-side caches provided by a couple of caching plugins. Avoid that. Instead disable that kind of cache while hammering out your css.

WP_CACHE prevents the use of WordPress's persistent object cache, which handles entirely different kinds of data than CSS. It needs to be defined in wp-config.php to be useful, due to the arcane way persistent object caches are implemented (via an early-loading "drop-in" module). If the words "persistent object cache" don't mean anything to you, don't do anything with WP_CACHE.

Finally, your header() calls put headers on the HTML page you're generating, not not your css, javascript, or media objects. So, they're not useful for preventing browsers from caching your css.

In a typical WordPress / php / apache web server site, WordPress never touches the content of css: the browser requests those files directly from the web server. Some caching plugins adjust the caching headers on css, javascript and media. They do that by inserting web server directives into your site's .htaccess file. Disabling those plugins during css development helps avoid caching confusion.

Your browser devtools Network tab tells you which objects the browser retrieved from cache. It's super helpful when developing with cacheable objects.