Theme Customizer not loading

Question

I have created a new theme and i use it in some of my sites (multisite) but at one site the customizer preview does not load (spinner never stops). Loading the customizer preview of other themes work just my theme does not work.

There is no error in the console of the chrome development tools.

So i tried a few things...

• renamed the theme (folder and inside the style.css)
• removed ALL files so that just an empty index.php and a style.css, that only contains the necessary comment, was left

But it does load, again, just at one of my multisites.

How can i debug this? Any ideas?

Answer 1

if customizer(live preview) doesnt work or doesnt load and nothing is shown, try these steps:

• do you have redirections on the problematic site (double check and ensure, there might be coded a custom redirection in your plugins/codes)?
• while the circle is still loading, change any option in customizer and click "SAVE & PUBLISH" and see, maybe a simple change will cause to arise the site.
• try deactivating plugins.
• do you have any custom EXIT/ DIE/ VAR_DUMP/ ECHO/ SETCOOOKIE/ commands programmed in core .php files, which may stop website loading if some conditions not met? (for example,i had similar issue, caused by me: i.e. IF (isset($_COOKIE["blabla"])) exit; )
• try to install new WP with different url and install only theme at first, and check. then import everything and check again.. see if any difference.

Answer 2

Also make sure your parent theme styles are getting added before your child theme. Put this in your child theme's "functions.php" file and see if it helps:

// Flush all output buffers in PHP:
remove_action('shutdown', 'wp_ob_end_flush_all', 1);

// Making sure your child theme has an independent version and can bust caches: http://wordpress.stackexchange.com/a/182023/30783

// Filter get_stylesheet_uri() to return the parent theme's stylesheet
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');

// Enqueue this theme’s scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

function use_parent_theme_stylesheet()
{

// Use the parent theme’s stylesheet
return get_template_directory_uri() . '/style.css';
}

function my_theme_styles()
{
$themeVersion = wp_get_theme()->get('Version') . rand();

// Enqueue our style.css with our own version
wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
array(), $themeVersion);
}

Answer 3

I had a customizer that was working OK in IE but not Chrome (coming up blank in Chrome). Here's what fixed this problem for me.

To clarify the wordpress customizer was totally blank on the right hand side (but only in Chrome). There was an error (in the console) about refusing to load the IFrame content because of violation of "Content Security Policy directive: "frame-ancestors 'self'"

The fix was to add another dot to my development domain.

That is, I had a local dev domain name with a single dot - http://foo_online.local and was getting this problem. After I switched to http://foo.online.local the problem went away.

(Don't forget to update your WordPress Address (URL) Site Address (URL) in General Settings on the Dashboard after you change your domain name)

FWIW I tried setting an explicit "Content Security Policy" header (which you configure in your web server settings) but couldn't find a setting that would make Chrome happy. Hope this helps.