How to solve collapsed WordPress WP-admin back-end

It is not uncommon for one to login to their WordPress website back-end only to find it collapsed. It will appear as if the CSS has not loaded. And your WordPress back-end layout may look like the image below.

Collapsed WordPress back-end

This can happen because of three reasons:

  1. Updating WordPress to a newer version
  2. Installing a new theme
  3. Installing a plugin

In my case, it happened after successfully cloning an existing website using WP-Staging plugin. WP-staging is a great plugin for cloning your existing site and creating a staging version for your development purposes.

The cloning process was as smooth as butter. But alas! upon logging in I was welcomed by a mess of a back-end.

On investigation, I found that back-end JavaScript files were concatenated. Concatenation is a form of code compression that joins character strings end-to-end.

I installed WP-Rocket a while back, a powerful caching and optimization plugin. My main objective was to optimize website page speed. WP-Rocket file optimization for JavaScript and CSS improved the website page load speed considerably.

The file optimization I did looks to have affected the back-end scripts. JavaScript files were not loading properly. This explains why the back-end was collapsed.

To solve the issue, you will need to edit wp-config.php. The file is located in your WordPress installation root folder.

Simply open the file using any text editor of your choice. Add the following code anywhere in the file on a new line.

define( ‘CONCATENATE_SCRIPTS’, false );
define( ‘SCRIPT_DEBUG’, true );

Save and refresh your back-end and everything should load properly.

If the issue persists, disable any caching and content delivery network plugins you may have activated. Then clear the browser cache and refresh.

If that doesn’t help, consider checking if your WordPress files were extracted properly during the update. You can also check WordPress files integrity by browsing through the WordPress installation root folder.

That should be it. I hope you found this helpful.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: