How To Fix Broken WordPress Website CSS After Logging Out

Written by
Fabrizio Van Marciano
Posted on
April 21, 2021

Does your WordPress website break or appear messy after logging out? Don't need to panic! Here are some solutions that can help you fix it.

A few days ago, I ran into a little bit of a pickle with my WordPress website. For some strange reason, every time I logged out, my site would appear broken. This has happened before, so I knew what was happening.

And when I say broken, I mean that it looked messy. On some of the pages, the actual CSS was stripped away. Just the HTML template remained.

Anyhow, after doing several hours of digging, I found a few solutions that helped me to restore my website to its normal state.

So, if you're experiencing something similar, perhaps your WordPress website appears broken and all messed up when you log out too; here are a few things that you can do to try and fix it.

  1. Deactivate the cache plugin.
  2. Deactivate all other plugins.
  3. Deactivate or change the theme.
  4. Clean up your database.
  5. Flush server cache.
  6. Clear browser cached files.

OK, let's dive into each one in more detail.

1. Deactivate the cached plugin.

If you run a cache plugin on your WordPress sites, such as WP Super Cache or W3 Total Cache, first, deactivate the plugin, log out, then reload your website to see if the problem persists. If it fixes the problem, then great.

I would recommend either reactivating and reconfiguring the cache plugin or look for an alternative. If your website still appears broken after deactivating the cache plugin, try the next step.

2. Deactivate all other plugins

Deactivate, but do not delete, all other plugins you have installed on your WordPress website. Don't forget to log out, then reload your site on the front end to see if this fixes the issue. Yes, I know it's tedious.

Quick tip: To save time logging in and out, I recommend opening up a new browser in incognito mode. This is possible if you're using Google Chrome. Just run the URL in private browsing each time you make a change to your site.

If this works and you find the cluprit plugin, you can simply remove it. Don't forget to get in touch with the plugin developer to explain the issue you experienced. This will help them improve the plugin for the future, hopefully.

If you find that none of the plugins are responsible for your messy WordPress website after logging out, then try the next step.

3. Deactivate or change theme

It could be that it's your WordPress theme that's causing the issue. Maybe the CSS file isn't loading correctly. The only to find out is to change the theme entirely.

Perhaps you can revert to something like the default Twenty Twenty One theme. Reload your website in your private browser (Incognito) to see if that fixes the issue.

If this turns out to be your issue, make sure the theme is updated. If you're using a free WordPress theme and have no idea when it was last updated, I would highly recommend that you consider using a premium quality theme.

Premium themes cost a little bit of money, but you'll get a well-coded theme that receives regular updates. Plus, you'll get access to premium support. Check out Thrive Theme builder or Genesis Theme Framework.

If your theme isn't causing the issue, then try the next step.

4. Clean up your WordPress database

This isn't hard to do, but it's something that you should be doing regularly anyway. Check out this post to discover and learn about some useful plugins for cleaning up your WordPress database.

Word of advice: Make sure you backup your WordPress site before you do any database cleanup. I use and recommend BlogVault for premium backup. Don't rely on free backup solutions because these only backup files and provide zero features to restore your website should you need to.

The plugin that I use for cleaning up my website database are Clean Options and Optimize Database After Deleting Revisions.

The first plugin hasn't been updated in over ten years, so please use this plugin at your own risk. Even though it hasn't been updated, it's a more thorough plugin to remove orphaned options from the wp-options table in WordPress. Again, please use this plugin with care and caution. I won't be held responsible if you screw something up on your site.

If the Clean Options plugin is too risky, there's another plugin you can use called Advanced Database Cleaner. You can find it here.

If your site still appears messy and broken after cleaning up your database and refreshing your site in the private browser, try the next step.

5. Flush server cache

This is the one trick that worked for my website. Now, I'll be honest; I didn't know how to do this originally. The other tactics outlined above have always worked in the past, until a few days ago.

Flushing server cache is easy. All you have to do is log into your web hosting account to access this feature.

If you are using SiteGround, good news! Here's how to do it.

After logging into your SiteGround account -

  1. Go to websites.
  2. Go to Site Tools for the website you want to fix.
  3. In the left-hand navigation column select Security.

6. Clear browser cache

Last on my list is to clear the cache in your web browser. It doesn't matter what browser you're using; this feature should be available. If you are using Google Chrome, here's what you need to do -

On the right-hand side of the screen, with the browser open, you will see three dots stacked on each other. Click on this to open a drop-down menu.

In the options, you will see 'More Tools.' Hover your mouse over this option, and another sub-dropdown menu will appear. You will then see an option called 'Clear Browsing Data…' Click on this.

A new tab will open with options to clear browsing data. Make sure the first two checkboxes are unchecked. You don't want to clear browsing history or cookies if you don't have to. You only need to check the 'Cached images and files' option. Then click clear data. See the image below.

Reload your site in private browsing, and see if that works. If, after doing all of the things mentioned above, your site still appears broken and messed up. Consider getting in touch with your hosting provider to see what they can do to help. Or seek out a WordPress specialist.

I hope this post was useful to you, I want to wish you the best of luck!

Posted in

Are you ready to kickstart your web design project?

Let's work together to turn your website design and creative marketing ideas to life. Hit the 'Start Project' button to book your free 30-minute strategy consultation with me.
Copy link
Powered by Social Snap