How to Fix WordPress Customizer Not Working

The WordPress Customizer is such a powerful assistant in building a unique and appealing website.

It allows us to easily and drastically make changes to our site’s appearance with just a few clicks in the options panel. We can even preview these changes in real-time and roll back to some recent changes when necessary.

However, this awesome assistant sometimes suddenly shuts down for some unknown reason. Common symptoms are the preview stops loading or the settings remain unsaved.

The question is, how can you fix the WordPress Customizer not working?

In this article, we will be spelling out why your WordPress customizer stops working as well as suggesting some workable solutions.

Why WordPress Customizer Not Working and How to Fix

There are a few reasons why your WordPress Customizer doesn’t work. It could be due to plugin conflicts (conflict between 2 plugins), plugin script errors in your preview, or the 500 – Internal Server Error.

Another reason could be that your server doesn’t have enough memory to run all of the software installed, including WordPress, themes, and plugins. The difference between “WordPress Addresses (URL)” and “Site Addresses (URL)” also causes the WordPress Customizer not to work properly.

Every culprit behind the faulty Customizer will be identified and listed below, along with some effective measures.

However, before we get started, make sure that you update your WordPress, update themes and plugins to the latest version, as well as back up your website. Whenever you’re done preparing, we’re good to go!

Plugin Conflicts

The most common reason for the defective Customizer is plugin conflicts. It can cause the Customizer Preview to stop loading or part of it to stop working properly. Even if you don’t make any changes or haven’t installed any new plugins, this problem is still caused by the previously installed plugin. For example, the plugin leftovers on your website.

How to fix:

In case you don’t know which plugin causes the conflict, then just disable all plugins and see if it solves the Customizer issue.

  • If you’re using caching plugins or server cache, it’s necessary to cleat all caches or even disable caching for your site.
  • Deactivate all of your plugins at once.
  • Clear your browser history and visit Appearance > Customize to see how things are going. If it works precisely, there is a high chance that there is a conflict somewhere on your site.
  • Re-activate plugins, one by one.
  • After each activation, visit Appearance > Customize to see if it works. If the problem reoccurs, then you’ll know which plugin needs more attention.

When you’ve found the plugin that breaks your WordPress Customizer, you can:

  • Keep that plugin activated and deactivate all other plugins.
  • Visit Appearance > Customize to see if it works.

If it works, it’s probably not the plugin conflict but your server is not having enough resources. When it doesn’t, then you’ve found a plugin causing conflict.

Difference Between “WordPress Address (URL)” and “Site Address (URL)”

The difference between “WordPress Addresses (URL)” and “Site Addresses (URL)” will lead to the preview not loading. To prevent this from happening, your WordPress Address and Site Address need to be identical.

How to fix:

  1. First, log in to your WordPress Dashboard.
  2. Go to Setting and choose General.
  3. Edit the WordPress Address and Site Address options.Edit WordPress address and site address
  4. Click on the Save Changes button to save your settings. You can now visit Appearance > Customize to see whether it works properly.

Note: Different URLs are also the reason behind the Too Many Redirects error in WordPress.

Missing or Invalid Menu Items

Another culprit causing the WordPress Customizer to stop working is the missing or invalid menu items. If you deleted any pages or posts added to your WordPress menu, there could be some blocking issues.

How to fix:

  1. Head over to Appearance > Menu to check if there’re any invalid items.
  2. Locate the invalid menu items (usually marked in red).
    Invalid menu items
  3. To delete the invalid items, click the arrow to expand it, then click Remove.
  4. Press on the Save Menu button to finish.

Browser Problems

The error does not always come from WordPress, sometimes your browser can make the customizer stop working.

You may be using a browser extension that breaks the live Customizer. For instance, the Dashlane extension for Chrome has been reported to be in conflict when using the WordPress Customizer.

How to fix:

Disabling add-ons one by one is something you can try to see if it has any effect:

  • In the Chrome menu, select More Tools > Extensions.
  • In the Firefox menu, choose Add-ons.
  • In the Edge menu, click Extensions.
  • In the Safari menu, go to Preferences > Extensions.

If it’s not an extension that ruins everything, it might be a corrupted cache of data. You should try to uninstall and reinstall your browser, or clear your browser cache:

  • In the Chrome menu, open up Settings > Clear browsing data.
  • In the Firefox menu, head to Preferences > Privacy & Security > Clear Data.
  • In the Edge menu, press Settings > Privacy and Services, then select What to clear under Clear browsing data on the menu.
  • In the Safari menu, pick Preferences > Privacy > Manage Website Data. If the cache option is hidden, you need to go to the Advanced tab in the Preferences pane and enable the Show Develop menu in menu bar. Then open up the newly revealed Develop menu and press Empty Caches.

500 – Internal Server Error

When you try to save the Customizer settings and this error shows up, then you might have to consider these major causes:

  • The server is using an old version of PHP.
  • The server is running out of resources.
  • PHP has an error processing the request.

How to fix:

The Server is Using an Old Version of PHP

If your server has an outdated version of PHP, the WordPress Customizer won’t load and display an error like this: “Parse error: syntax error, unexpected T_FUNCTION in…

First, you need to check your current PHP version:

  1. In your WordPress admin dashboard, go to Tools > Site Health
  2. Click on Info

Here, you will find everything you need to know about your server, including the PHP version. Then, follow these steps to update your PHP version:

  1. Navigate to your WordPress admin dashboard
  2. Press on the Updates button under Dashboard

If there are any available updates, it will be shown on this screen.

The Server is Running Out of Resources

Follow the guide below to increase your PHP memory limit:

  1. Open the wp-config.php file via FTP.
  2. Right before the sentence “That’s all, stop editing! Happy blogging,” add the following code:
define( 'WP_MEMORY_LIMIT', '128M' );

You can change the limit to the value you want, for example, 128M. That limit works pretty well for most live sites.

But please notice that altering the wp-config.php file may not work if your host doesn’t allow expanding the PHP memory limit.

In this case, you need to contact your hosting company and ask them if the server is running out of resources. If yes, ask them to allocate more memory to your PHP. Your host company will be able to fix this by updating the PHP configuration.

PHP Has an Error Processing the Request

You need to check the PHP error logs to see if there’re any errors. If you aren’t able to interpret the data, contact your hosting provider and they will be able to check the PHP error logs, as well as determine the root cause of the error.

Theme Customizer Loading without Styling

A rare possibility is that the live preview of the theme customizer loads without CSS styling. In that case, you will only see blank and awful HTML output in the customizer, instead of your glamorous website.

How to fix:

First, you should try to troubleshoot and disable your plugins. What if it doesn’t help and you also can’t identify the reasons for your issue? Then you can add the code snippet below to the file wp-config.php of your WordPress installation:

define('CONCATENATE_SCRIPTS', false);

However, if the customizer in WordPress doesn’t load the CSS stylesheets, this could be related to hosting environment problems. For instance, insufficient file permissions on your server.

You’ve tried to disable the plugins or add the mentioned code snippet but you still can’t fix it. Now it’s high time to contact your hosting company for further analysis.

The Final Solution on How to Fix WordPress Customizer Not Working

In case you’ve tried examining all of the possibilities above but the WordPress Customizer is still not working, and you have no idea why the issue arises, then you should try out this way.

Add the following code snippet to the file functions.php of your child theme, and see if it helps to solve the issue.

remove_action('shutdown', 'wp_ob_end_flush_all', 1);

Sweet Bonus: Customizing Email Templates Using YayMail

In some cases, even when you deactivated plugins, their configs and settings still remain in the database. Especially when your website has switched among a couple of themes and plugins that use the WordPress customizer, it can act weird due to some conflicts.
WordPress Customizer's multiple customizer options

In order to prevent some Woo customizer plugins from being built into the WordPress Customizer, you can use alternative plugins that provide the functionality you need.

For instance, instead of using the customizer for WooCommerce emails, you can use a dedicated email builder like YayMail.
Yaymail

It’s a drag and drop email builder framework that helps you design and reorder every email block. YayMail overcomes the limitations of WooCommerce default email settings and the fixed page customizer. Just like using the Elementor page builder, it makes designing email templates a breeze.

You can download the YayMail free version today and enjoy customizing by Drag and Drop.

Conclusion

If you’re struggling to diagnose your WordPress Customizer problem, as well as figure out how to fix it, this article hits the spot!

We’ve pointed out several possible culprits behind your faulty Customizer and provided you with detailed and practical solutions.

By following our guide, you’ll gain considerable knowledge about how to deal with your WordPress Customizer when it stops working. Plus, you can use YayMail to extend the WooCommerce default email settings and the fixed page customizer.

Have you ever faced the WordPress Customizer that stopped working? And how did you fix it? Let us know by leaving comments below!