9 Solutions how to fix WordPress CSS not working

Simple guide how to fix 9 most common causes of WordPress css not working

Choose from topics below what you experience on your site and jump to the section which you need.

  1. If CSS is not updating in your browser hard refresh and clear browser history

  2. Delete cache or disable caching plugins to get stylesheet changes displayed

  3. Change WordPress stylesheet version number to stop it from not updating

  4. What to do when all css is gone after WordPress theme update

  5. Disable extensions and adds on if your site looks differently in Chrome, Firefox and similar browsers

  6. Syntax errors can be the cause of WordPress CSS not working

  7. Disable CSS minification if your styles are messed up

  8. Change WordPress file permissions if you get 403 Forbidden and stylesheet is not readable errors

  9. If you have problems with css styles not loading, check out our complete guide on how to fix it.

CSS not updating in browser when I refresh my site

You are working with CSS files of your WordPress site.

However, after you make changes and refresh the page nothing happens.

First, do a hard refresh of your page.

Press simultaneously Cntrl+F5 on PC or cmd+R on Mac.

If nothing changes, next step is to clear browser history.

Keep in mind, after this action, all your browser history will be gone.

It means you will have to reenter all user names and passwords in email accounts, on social media, and on all other sites where login is required. 

This might be quite annoying.

So, open History tab in FireFox or Chrome (All other browsers work similar).

History tab in chrome

Click on Clear recent history… in FireFox or Show full history -> Clear browsing history… in Chrome.

CSS not updating in browser - Clear history

Clear browsing data in chrome

In the first attempt select and clear only cookies and cache.

Hard refresh the page.

If this does not help, select everything, clear everything and hard refresh (Cntrl+F5 on PC or cmd+R on Mac) again.

If still nothings happens after history is clear and a hard refresh, the problem is not with your browser.

Let’s continue and take a look at your server cache.

Delete cache or disable your caching plugins

If your browser does not update styling changes, look into your plugins tab in WordPress Admin.

The most common cause is some sort of caching plugin such as WP Super Cache, W3 Total Cache or any other caching plugin.

Open your plugin’s settings and delete cache. 

If your plugin does not provide possibility to delete or purge cache, disable the plugin and hard refresh your page.

To delete cache in WP Super Cache go to Settings, turn off caching and then press delete cache.

WP Super Cache turn off and delete cachingIn W3 Total Cache go to Performance -> General Settings -> Page cache and click the Empty cache button.

W3 Total Cache empty cacheHard refresh your page (Cntrl+F5 on PC or cmd+R on Mac).

If this does not help, disable your caching plugin.

If you happen to use Cloud Flare (which a lot of sites nowadays do), don’t forget that besides many other cool features, CloudFlare caches static files such as css, js and images to aid in faster loading times.

To stop Cloud Flare caching turn on Development mode in Cloud Flare and clear browser cache.

If you have a CloudFlare WordPress plugin installed (which you should), go to WordPress Admin Settings -> CloudFlare click Development Mode On and Update options

CloudFlare turn on developement mode

If you do not have CloudFlare WordPress plugin installed, go to Cloud Flare Dashboard, and turn on Development Mode in the Dashboard.

If this does not help then most likely your server caches files. How to fix this is in the next section.

WordPress Stylesheet not updating? – Change its version number

If WordPress Stylesheet does not update after clearing browser cache and  history and deleting plugin cache also does not help, add a new version number at the end of the file you need to update.

If your css files are loaded in WordPress header.php like on the picture below

WordPress css files in header

then the easiest way to stop file caching is to append a query string to the link element so that the browser will re-load it.

To do this add a version at the end of the link.

For example, I added ?v-1000 to the link in the pic below.

Add version number to wordpress css file

This will force your browser to load the new version of the file.

If you want your WordPress css file to never cache again, add a timestamp at the end.

Add timestamp to wordpress css file

Timestamp will append current time to the end of your css file, so, it will always be unique and will never load from cache.

If you use wp_enqueue_style(); or  wp_register_style(); to add stylesheets to your theme then pass a random version number into the forth parameter – $ver of the function.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

So, the function would look something like:

wp_enqueue_style('my-main-style', get_stylesheet_uri(), false, '20150327');

Where '20150327' is today’s date. 

All css is gone after WordPress theme update

You have updated WordPress theme and your stylesheet changes are gone.

This happens if you make changes to the theme’s style.css file.

To return the lost changes, you have to restore the old style.css file.

You can restore the old css file from your own backups (if you use any of the backup plugins) or from your hosting server’s backup (most hosting companies run a backup of your site every 24 hours).

To avoid styles disappearing in the future, you can:

  • use a css plugin (like Simple Custom CSS, My Custom CSS or any other)
  • or create a child theme (preferable method)

Using a plugin is pretty straight forward. Install it and add all your css changes through the plugin.

However, a better method is to create a child theme. You can read what is a child theme and how to create it here.

Creating a child theme gives you a lot of flexibility. You can change not only stylesheets, but everything in and around your theme.

If you use a child theme, future theme updates will not effect any of your changes.

Disable extensions and adds on if your site looks differently in all browsers

I once had a problem which I couldn’t fix for months.

One of our customers’ sites displayed differently in Chrome and Firefox.

This shouldn’t be.

Developer tools showed that there is an additional piece of css in Chrome, but we couldn’t figure where it comes from.

Then we disabled browser plugins and the problem was gone.

The styling problem was caused by a simple color picker extension which all of us had installed in Chrome.

Sometimes browser extensions and plugins can really screw up your WordPress site.

Before you panic switch them off.

For example, this is how Moz bar adds styles to the display of your site in Chrome.

Browser extensions can screw up your wordpress page

It’s easy to figure out with Moz bar because you can see it.

But there are some extensions which run in the background but add stuff to the display of your site.

These can be quite annoying and hard to find.

Syntax errors can be the cause of WordPress CSS not working

Once I had a problem when parts of the page would display correctly and had certain parts like footer and sidebars without any styles.

It happened because there was a small typo in the middle of the stylesheet.

Developer tools in Chrome, FireFox or any other browser can help you find such errors.

Let’s take a look how to inspect an element with Dev tools in Chrome.

Open your page in Chrome.

Right click on the element or area which you want to inspect and choose Inspect Element from the contextual menu.

This will bring up the Chrome Dev tools.

For example, my footer is messed up.

The whole page looks fine only footer does not have styles and all widgets are aligned in one column.

I right click anywhere in the footer area, select Inspect Element and the Dev tools open up.

Inspect footer in dev tools to find wp css erros

In Dev tools I can find almost no footer styles. 

This is strange, so I open style.css and go to the footer section.

There I notice that due to a missing */ at the end of a comment, part of the footer styles is commented out.

WordPress css not working in the footer

As you see, finding css syntax errors is a tedious task.

Use Dev tools to speed it up.

Otherwise you have to manually look for errors which is very time consuming and frustrating.

WordPress CSS not working due to CSS minification

CSS minification can mess up your styles. But it can also speed up your site.

So, right after you switch on minification, hard refresh your browser (Cntrl+F5 on PC or cmd+R on Mac) and check how it impacts your site.

If you don’t notice any problems, leave it.

If you see something is messed up, switch it off.

Always check if new caching plugin which you install has CSS minification enabled.

For example, popular W3 Total Cache plugin has CSS minification enabled by default.

Minication in W3 Total Cache can cause errors WordPress css

Your site might get quite messed up after you install W3 Total Cache and you wouldn’t even know why this happens.

Also, keep in mind, popular web services like Cloud Flare have file minification, so, check all styles on your site, after you enable them.

Change wp file permissions if you get stylesheet is not readable 403 Forbidden errors

If you get 403 error Stylesheet is not readable, most likely your have permissions issue.

WordPress permissions are simple:

  • 4 – read
  • 2 – write
  • 1 – execute 

This values are summed up for each user group.

Min value is usually 4 – user is allowed to read content of the file or folder.

Max value is 7 – user is allowed to do everything with the file or folder – read, write, modify, execute.

There are 2 simple ways to change file permissions: use an ftp client or do it in the File Manager on your server.

Let’s first take a look how it’s done in the ftp client (click here to learn how it’s done in the File Manager).

Open your ftp client and go to your site’s files on the Remote server.

Change wordpress files permissions ftp client

Right click on the file which permissions you want to change and select Set Permissions… or Permissions.

Wordpress css not working change file permissionsI have set permissions for the style.css in the picture above to 744.

744 means the owner can do everything with the file, and everybody else can only read.

If you experience problems with your permissions settings, play around, test different values for your files.

You can start with

  • 644  (owner can write, everybody else only read)
  • if this does not work, test 744, play around till you reach the max value of
  • 766 (owner can do everything, everybody else can read and write)
  • never set all your permissions to 777

To change file permissions in the File Manager, login to your hosting account, launch cPanel, from cPanel launch File Manager.

I am in a typical File Manager. I select file which permissions I want to change and click on Change Permissions.

wp doesnt work change permissions in file manager

I can set whatever I like here. But 644 is enough for this file and it works just fine.

cPanel File Manager change wp css file permissions

Do you have any other CSS errors which we should go over or WordPress CSS not working issues?

Please, ask your questions in the Comments below. Ask anything you like about WordPress or CSS.

Our team, me and our readers might help you fix your problem.

Have you noticed any errors or want to add something? Please, comment, I will be happy to add your stuff.

Ross Karpov

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

How much is Time limit is exhausted. Please reload CAPTCHA.