Deactivate sections/panels when the Customizer finishes loading

by

Waiting for window load won’t work reliably since once the preview loads it will override any change to a section’s activation you may do. So even if you are able to call deactivate after the preview iframe first loads, the next time that it refreshes due to a setting change or navigating around the site, the section will re-activate. The ready message from the preview to the pane includes the active state for the PHP-registered panels, sections, and controls. The active states are obtained by calling the active_callback on each. Therefore, in order to ensure that the section is deactivated you should override the active_callback to force it to be false. Note that the active_callback for each construct is also called when the customizer is loaded, so this will allow it to be overridden when the customizer first loads as well, preventing the section from momentarily appearing and then being hidden.

There are a few ways you can force the section to be deactivated. Let’s assume it’s the colors section you’re interested in. The first way is to use the customize_section_active filter:

/**
 * Ensure the colors section remains deactivated.
 *
 * @param bool                 $active  Whether the Customizer section is active.
 * @param WP_Customize_Section $section WP_Customize_Section instance.
 * @return bool Active.
 */
function wpse257129_filter_customize_section_active( $active, $section ) {
    if ( 'colors' === $section->id ) {
        $active = false;
    }
    return $active;
}
add_filter( 'customize_section_active', 'wpse257129_filter_customize_section_active', 10, 2 );

A second way is to override the active_callback on the section itself. This assumes the section gets registered at customize_register at priority 10:

/**
 * Ensure the colors section remains deactivated.
 *
 * @param WP_Customize_Manager $wp_customize Manager instance.
 */
function wpse257129_override_colors_section_active_callback( WP_Customize_Manager $wp_customize ) {
    $colors_section = $wp_customize->get_section( 'colors' );
    if ( $colors_section ) {
        $colors_section->active_callback = '__return_false';
    }
}
add_action( 'customize_register', 'wpse257129_override_colors_section_active_callback', 11 );

Yet another way is to just remove the section entirely, which is an approach you can read more about in Resetting the Customizer to a Blank Slate:

/**
 * Remove the colors section.
 *
 * @param WP_Customize_Manager $wp_customize Manager instance.
 */
function wpse257129_remove_colors_section( WP_Customize_Manager $wp_customize ) {
    $wp_customize->remove_section( 'colors' );
}
add_action( 'customize_register', 'wpse257129_remove_colors_section', 11 );

And lastly there is also a JavaScript solution, with the following in a JS file enqueued at customize_controls_enqueue_scripts with customize-controls as its dependency:

wp.customize.section( 'colors', function( section ) {
    section.active.set( false );
    section.active.validate = function() {
        return false; // Prevent preview from updating state.
    };
} );

I suppose the specific method you chose to deactivate the section depends on your use case, and whether or not you’d want to conditionally re-activate the section during the user’s customization session.

Leave a Comment