Add a “loading” notice when Customizer is making changes

While this might not a be the perfect solution but this should work. You can set an interval to check against the preview iframe, like this: var previewDiv = $(‘#customize-preview’); previewDiv.prepend(‘<div class=”loading-overlay”></div>’); var loadingOverlay = previewDiv.find(‘.loading-overlay’); setInterval(function(){ if( previewDiv.children(‘iframe’).length > 1 ) { previewDiv.addClass(‘loading’); } else{ previewDiv.removeClass(‘loading’); previewDiv.addClass(‘loaded’); } }, 100);

How to access the nav_menus panel with the customizer api?

The Nav Menus panel is added at customize_register action priority 11, so you need to set the priority at priority 12 (or above). This works for me: <?php add_action( ‘customize_register’, function ( \WP_Customize_Manager $wp_customize ) { $panel = $wp_customize->get_panel( ‘nav_menus’ ); if ( $panel ) { $panel->priority = 1; } }, 12 );

How do I check if user input in a field in the customizer is a number?

You are right. A couple of fixes/suggestions, though. You should use absint as a sanitization callback. Also, you don’t have to explicitly use the WP_Customize_Control class. The number field can be created with the regular syntax you use for the text field with an exception of the type and additional attributes. Another thing is that … Read more

Conditional Logic to Check for Site Icon

There exists a special function to check if the site icon is set, namely the has_site_icon() function. So you could try: add_action( ‘wp_head’, ‘wpse_default_site_icon’, 99 ); add_action( ‘login_head’, ‘wpse_default_site_icon’, 99 ); function wpse_default_site_icon() { if( ! has_site_icon() && ! is_customize_preview() ) { // your default icons here } } The case when the site icon … Read more

How to mix partial and full page refresh in the same section of the customizer?

tl;dr See standalone example plugin that demonstrates initiating a full refresh when a selective refresh request enqueues different scripts or styles and also which re-initializes JS behaviors for selectively-refreshed partial placement containers. I understand the goal to be to minimize the amount of logic required in the customizer to preview changes to updated partials that … Read more

Theme customizer – possible to disable Live Preview?

Yes, there is a way to disable the Live Preview rendering. 1] Open your theme’s functions.php file. 2] Append the following code snippet at the very end of the file: add_action( ‘customize_preview_init’, function() { die(“The customizer is disabled. Please save and preview your site on the frontend.”); }, 1); 3] Save your functions.php file. That’s … Read more

Add custom background to div in home page

Use the wp-head-callback argument to specify your own handler: add_theme_support( ‘custom-background’, array( ‘wp-head-callback’ => ‘wpse_189361_custom_background_cb’, ‘default-color’ => ‘000000’, ‘default-image’ => ‘%1$s/images/background.jpg’, )); function wpse_189361_custom_background_cb() { ob_start(); _custom_background_cb(); // Default handler $style = ob_get_clean(); $style = str_replace( ‘body.custom-background’, ‘#featured-home-image’, $style ); echo $style; }