Whether it is the admin page or settings page or any other page of the site, the CSS not loading issue can be a sitewide issue as the stylesheet/JS files are inserted in the site’s header/footer by plugins/themes, and the WP CMS’s CSS/JS is loaded on all pages of the website. Below, we’ve shared two solutions to fix this problem:
CSS not loading because of cache
When you make some changes to the website stylesheet file or add custom Cascading Style Sheets code to the site, and the site doesn’t do anything, you should clear the cache. If you’re using a page caching WP plugin, first delete the cache of a single page to check or learn whether the cached files on the server are causing the problem. If doing so doesn’t fix the problem of WordPress CSS not loading, clear the web browser cache.
All browsers ship with a mechanism to store static files, such as images, JS code or stylesheet files, etc on the PC of the visitor. They store the files because the webserver or caching plugin instructs them to do so via the expire headers. If you clear the browser’s cache, you should see the latest design on the website, as the browser will store the latest version of the stylesheet or JavaScript files after removing the old cached files.
CSS not loading because of a permission issue
If the webserver doesn’t have permission to access any of the stylesheet files, it will throw an error for the respective file, and the browser won’t apply styling to the elements whose code is in the file. To find the file in question, use the browser’s built-in developers tool.
How to find this file? The browser may show an error in the developer’s tools console. The error may show the link to the file. Or, click on the Networks tab of the browser and reload the currently opened page of your WordPress site or open the page of your WP site. The browser will now show a list of URLs it has requested and their status code. All status codes should be 200. If the HTTP status code is not 200, you must fix the issue by letting Nginx/Apache access the file. To do so, change the permission of the file/folder on the server using this command:
chown -R user:user folder_name
In the above code, replace folder_name with the path to the directory where your WP site’s stylesheet file is saved/stored and user by the Apache/Nginx user i.e. www-data, nginx, or httpd.
Closing words: CSS not loading on WordPress sites is a serious issue and can make the website visitor close the page without going through the content. The above two methods should fix the error on your site.
