Customizer - loading settings/controls/sections/panels based on a id/page id

Question

I am developing a theme that has a lot of theme mods, sections, panels. My issue is that the Customizer loads all of them at once and it can take awhile for it to load. Also, I would really like to load only the settings, sections needed for the page I am currently editing.

I've been looking for some filters in the WP_Customize_Manager but I can't find any that would modify the sections, panels, settings, controls proprieties or the methods they are used into.

At this point I am getting the page id by adding it to the Customizer url, something like wp-admin/customize.php?url=pageurl&apageid=700

Based on that page id I would like to register the needed sections and settings, and remove the rest.

Just an example, did this with panels, controls, sections too:

function test_reg( $wp_customize ) {
    $currentID = isset( $_GET['apageid'] ) ? absint( $_GET['apageid'] ) : '';

    // tmpl_ids() returns an ids array of all the pages that use a certain page template
    if( in_array( $currentID, tmpl_ids() ) {
        $custom_settings = array( 
            'custom_setting_' . $currentID, 
        );

        foreach( $custom_settings as $val ) {
            ... register the setting here.
        }

        foreach( $wp_customize->settings() as $setting ) {
            if( ! in_array( $setting->id, $custom_settings ) ) {
                $wp_customize->remove_setting( $setting->id );
            }
        }
    }
}
add_action( 'customize_register', 'test_reg', 999 );

This will remove the settings, but it will not work for the previewer customize_preview_settings, which will output all of them.

Anyway, any idea how to do this properly? Thank you!

Answer 1

The most robust way to do this is to do JavaScript-based instantiation of the sections, controls, and settings dynamically in response to the URL being previewed. Since you can navigate around the site in the preview, this will ensure that the post/page-specific sections and controls will be created as you need them when you navigate around the site. This depends on the preview communicating to the controls pane parent window with the URL being previewed (and the queried post ID). Both of these are implemented in the Customize Posts feature plugin, and more details on the message passing from the preview can be seen in #36582.

Nevertheless, since you're probably looking for a more static PHP solution, the easiest way to ensure both the controls window and the preview window are able to see the same post ID is to not use a custom query var like apageid but rather to use the actual url parameter that is used to tell the customizer which URL to load into the preview. For example when you are on the frontend on a page or singular post and you click Customize, the url param will be the permalink. With that in hand, you can then read from the url param and pass it through url_to_postid() to get the post ID.

There is one other piece needed here and that is to implement dynamic settings. Because a setting is dynamically created in PHP based on whether or not you are on a given page, once you try updating or publishing the changeset you'll see an error message about the setting not being recognized. By implementing dynamic settings you can tell PHP how to recognize settings based on patterns in their IDs and register them just in time.

Here's a full working example plugin which adds a section for the initially-loaded loaded post and adds a checkbox control for indicating whether the post content should be made all uppercase or not: https://gist.github.com/westonruter/9e9510c7f57dfbd37eb8c0162b971aa2

You may also want to consider checking out Resetting the Customizer to a Blank Slate.