CSS from wordpress does not change

Question

I just started to work with wordpress, and I'm having an odd issue with my style.css(locally), whenever I change the content of it, it's not being updated when I load the page.

The odd issue I'm having, is that if I type any random content in my style.css and save, the style.css in the browser when I reload will load with a partial amount of the css structure from before, the partial amount is directly proportional to the amount of character of the random content i saved!!

Example:

Full style.css:

/*
 * Globals
 */

body {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #555;
}

Saving style.css with random content:

random content random content random content random content random

Now, reloading style.css in view source from Chrome:

/*
 * Globals
 */

body {
    font-family: Georgia, "Times New

The loaded css above was loaded with the amount of characters of the "random content random content random content random content random " i saved in style.css.

Also, if I change the name of my css file to another one, the file gets updated correctly. If I reload the new css file, the updates will stop working again.

This is driving me nuts. Just does not make any sense.

I tried all the following measures:

Working entirely locally to avoid any kind of server caches. In my local server I'm using nginx as web service. I do not have any flags in my conf file to cache any kind of files.
Erased browser cache, cookies;
Checked if I had any wordpress cache plugins: I don't have any;
Tried using other browsers;
I used grep to check for any cached files in my wordpress folder: found none.
Tried to put version in the css file, and in the link html tag of my header.

Maybe your hosting is using Ngnix as a reverse proxy to Apache or other caching system like Varnish — JackTheKnife
– JackTheKnife, Commented Mar 9, 2017 at 14:31
Do you edit your CSS in Wordpress, or in an editor? Also, whether working locally or on a remote server doesn't really matter as you're working on a server any way. Also, by 'partial' css, do you mean the stylesheet is invalid and broken? It's still not clear to me what you mean. Can you view the CSS file separately in your browser? — Bram Vanroy
– Bram Vanroy, Commented Mar 9, 2017 at 14:32
@BramVanroy Yes, tried with both, with wordpress to see if the save button on the dashboard could help with anything. What i meant on specifically saying locally, is that im sure there is isn't any kind of http cache such as varnish, cloudflare, etc from a host that I could possibly be missing. Yes, by partially I mean that when i reload the style.css in browser, it loads just a portion of it. The portion loaded, is proportional to the amount of characters in the style.css that I saved with a gibberish content. — Bruce
– Bruce, Commented Mar 9, 2017 at 15:29
@JackTheKnife Im having this issue locally in my working space(Mac OS), so I completely discarded issues with reverse proxy and http caches. — Bruce
– Bruce, Commented Mar 9, 2017 at 15:30
@Bruce does your theme support "built in" CSS editor? Often that one will take priority over your custom one — JackTheKnife
– JackTheKnife, Commented Mar 9, 2017 at 16:05

Bruce · Accepted Answer · 2017-03-10 01:21:39Z

1

So I finally found the issue.

One detail I forgot to mention is that im using vagrant to develop my wordpress site.

I had the sendfile flag turned on in the nginx.conf in vagrant. After setting it to off, everything is working perfectly now.

answered Mar 10, 2017 at 1:21

Bruce

217 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mayersdesign · Accepted Answer · 2017-03-10 09:32:10Z

1

Also, if I change the name of my css file to another one, the file gets updated correctly. If I reload the new css file, the updates will stop working again.

Is the give away that this must be a caching issue of one kind of another. I would guess varnish or similar as @JackTheKnife suggested

Use this trick...

<?php $base_dir  = __DIR__;?>
<link href="/custom/style.css?v=<?php echo filemtime($base_dir."/custom/style.css")?>" rel="stylesheet" type="text/css" />

...to "auto-version" your css. It retrieves the lasted modified date and time from the file on the server and appends that as a version. Thus every time you change the file, the caches bust remotely (if applicable) and locally.

edited Mar 10, 2017 at 9:32

answered Mar 9, 2017 at 14:37

mayersdesign

5,3704 gold badges40 silver badges51 bronze badges

Comments

SilverLink · Accepted Answer · 2017-03-09 14:44:36Z

0

Normally you need clean the cache of the browser for changes to take effect.

But there was a time that even that did not work and nothing made sense. It was when I uploaded an existing font to my server and it did not update. The solution was to completely delete the existing font and only then upload.

If you are comfortable managing the files in your server, try doing the same.

edited Mar 9, 2017 at 14:44

answered Mar 9, 2017 at 14:37

SilverLink

1342 silver badges16 bronze badges

3 Comments

mayersdesign Over a year ago

OP says: "Erased browser cache, cookies;"

mayersdesign Over a year ago

True, but "better" than deleting and remaking, versioning the file with (say) ?=v1.0 FORCES every cache to bust...server side and client side. It's certainly the recommended way to work with clients, to avoid "I can't see the changes" emails day after day haha

SilverLink Over a year ago

Interesting, that sounds handy. Thank you.

Collectives™ on Stack Overflow

CSS from wordpress does not change

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related