How to fix the WordPress customizer preview not working ( Appearance -> Customize )

image source: wordpress.org

You may have login to your WordPress dashboard -> Appearance -> Customize and found that it's not loading or some settings are not working properly.

Before doing anything else :

1. Make sure that you have updated WordPress to its latest version
2. Update your active theme and plugins to their latest versions
3. If you use a child theme, switch to the parent theme instead

If those first pre-requisite steps did not solve the problem, you'll need to follow a troubleshooting process.

First of all, install the official WordPress Health Check Plugin : this plugin allows an admin to safely troubleshoot your site, switch theme and disable plugins without changing your visitors experience.

Browser problems

1. Try to clear your browser cache
2. Try to login to your website on another browser
3. You may use a browser extension that breaks the live customizer. For example, the Dashlane extension for chrome has been reported to be in conflict when using the WordPress customizer.

WordPress Address (URL) and Site Address (URL) are not the same

1. Login to your WordPress dashboard
2. Go to Settings -> General
3. Your WordPress Address (URL) and Site Address (URL) have to be identical. The preview will not load if you use different URL

Plugin Conflict or Error 

A plugin conflict can cause Customizer preview to stop loading or part of it to stop working properly.

1. If you have a cache plugin or server cache. You need to purge it's cache contents and disable it.
2. De-active all your plugins
3. Clear your browser history and visit your Appearance -> Customize to see if it works.
4. Re-activate back one plugin at a time. 
5. Clear your browser history and visit your Appearance -> Customize to see if it works.
6. If you have found a plugin that breaks your Appearance -> Customize.
   
   • You can double check by activating only this plugin and deactivate all other plugins.
   • Visit Appearance -> Customize and see if it works.
   • If it works, then it's not a plugin conflict, it's your server not having enough resources.
   • If it does not work, then you have found the plugin that's causing conflict.

Server Memory Issue

1. Deactivate all your plugins.
2. With all your plugins deactivated, visit Appearance -> Customize and see if it works properly. 
3. If the customizer still does not work, go to the next step
4. If the customizer works :
   
   • Randomly active back a few "large" plugins and check if your customizer is working properly. 
   • If yes, this confirms that you are having a memory issue. You will have to contact your web hosting company to increase your resources, or deactivate a few not important plugins

See how to fix memory problems here and here.

Computer Hardware

Some notebook computers may not have enough processing power to run your browser while in customizer Preview.

1. Try to login to your website on another computer
2. Login to your WordPress dashboard, Go to Appearance -> Customize are see if it works properly. 
3. If it works, then your usual computer may not have enough processing power to run web browser in customize preview.

Javascript error

You may have added a custom javascript code snippet somewhere, for example with a plugin, or in a widget, that breaks your site. You can easily see javascript errors on your site by opening the browser developer tool.