How to solve issues with the Theme Customizer / Live Preview
The WordPress Theme Customizer is a great and awesome feature to customize your WordPress website very easily with only a few clicks in the options panel. You can change many aspects of your site or WordPress theme and even see a live preview before you save your changes to the database. But in rare cases it may happen that the theme customizer suddenly stops working.
- Why does the Theme Customizer stop working
- What to do when the Live Preview is not working
- Common fix: Update your WordPress environment
- Theme Customizer is loading without styling
- Theme Customizer is still not working!
Why does the Theme Customizer stop working
When you notice that the WordPress theme customizer suddenly stops working and if the live preview in your WordPress dashboard was working fine before, then the most common reason for the issue is a plugin conflict. Even if you have changed nothing on your site or have not installed any new plugins, your issue still can be caused by a previously installed plugin, for example when a plugin was updated automatically or in case there are plugin leftovers on your website.
The most common issue when the theme customizer is not working anymore, is that people see a blank screen instead of the live preview in their WordPress dashboard. This blank screen can be related to conflicting code on your WordPress website (e.g. conflicting plugins) or even related to a fatal error which usually results in the common White Screen of Death.
Sometimes also the buttons of the menu items in the theme customizer do not work anymore and in very rare cases even the menu items won’t show up. These kind of issues often are related to issues with JavaScript, for example when the JS is blocked by a plugin or other scripts on your site.
What to do when the Live Preview is not working
In most cases you can solve issues with the theme customizer by disabling your plugins in the WordPress dashboard. You could try deactivating your plugins one by one to identify the plugin that is causing the issue and then just replace the specific plugin with a plugin that doesn’t cause issues.
By the way, when a WordPress plugin is causing these kind of issues, it does not necessarily mean that the plugin is bad or not well coded, sometimes the reason simply is that the plugin isn’t compatible with other plugins that you may be using on your website or not compatible with your WordPress theme, which also doesn’t necessarily mean that you’re running a low-quality theme.
There are thousands of WordPress themes and plugins available on the market. When running several plugins on your website, you’re in the end mixing a lot of 3rd party code together and there always is a risk of conflicts. Compatibility issues can’t be 100% avoided in the real world and there never is a guarantee when you install multiple 3rd party plugins on your WordPress website.
Update your WordPress environment
Also a very common issue is when you are running an outdated version of WordPress and the customizer in WordPress shows a blank page. Many WordPress themes nowadays have added custom panels and additional options to the customizer, for example to add theme options.
For example, panels have been introduced in WordPress 4.0 and if you are running an outdated version of WordPress, the customizer may turn blank if you are using a theme that has added panels. You can easily fix this by updating WordPress to the latest version. Here you can find more information about the panel issue: How to fix the add_panel() error when customizer does not work.
In general it’s always very important to keep your WordPress environment up-to-date, this doesn’t only apply to WordPress itself, but also to all WordPress themes and plugins you may have installed on your website. Whenever you’re running outdated code on your site, there is a potential risk that this may result in issues with the WordPress customizer or even lead to security vulnerabilities.
What if the Theme Customizer is loading without styling
In very rare cases it is possible that the live preview of the theme customizer loads without CSS styling and that you only see blank and ugly HTML output in the customizer, instead of your shiny website. Whenever this happens, it’s hard to say what could cause your issue because this would require further analysis and some troubleshooting on your site.
In case troubleshooting and disabling your plugins doesn’t help and if you are desperate because you also can’t find other reasons for your issue, then you could try to add the code snippet below to the file wp-config.php of your WordPress installation and it may resolve your issue:
define('CONCATENATE_SCRIPTS', false);
In case you can’t locate the issue on your site, have checked all installed plugins, have reinstalled WordPress and/or your WordPress theme, have contacted your hosting company and if you have no other ideas anymore what could cause your issue with the theme customizer in WordPress, you could try to add the following code snippet to the file functions.php of your child theme (or by using a plugin to add code) and see if that helps to solve your issue:
remove_action('shutdown', 'wp_ob_end_flush_all', 1);
Conclusion: Solving issues with the WordPress Theme Customizer
We hope that this article was helpful in order to solve your issues with the customizer in WordPress. If you have any other solutions to common issues with the customizer that are missing in this article or if you’re facing other rare issues with the theme customizer, please let us know in the comments below. We’ll then update this article from time to time to help as much WordPress users as possible.