Dynamically added controls/settings refreshing the customizer preview.

Here is the JS:

api.bind('ready', function () {
            // Create theme options panel.
                new api.Panel('my_rrp_panel', {
                    title: 'RRP Options',

            // Add section.
                new api.Section('my_rrp_section', {
                    title: 'Example Section',
                    panel: 'my_rrp_panel',
                    customizeAction: 'Customizing ▸ RRP Options'

            var setting = new api.Setting( 'my_rrp_setting', true, {transport: 'postMessage'} );
            api.add( setting );

            // Add checkbox control.
                new api.Control('my_rrp_control', {
                    setting: 'my_rrp_setting',
                    type: 'checkbox',
                    section: 'my_rrp_section',
                    label: 'Check this box to do something.'

Have added filter as well customize_dynamic_setting_args to identify and to update from the server.

Have added partial refresh on customizer_register hook,

        'selector'            => '.rrp-content',
        'container_inclusive' => false,
        'render_callback'     => 'RRP_CLASS::render_partial_rrp_content',

Do I need to dynamically add partials as well? When added

var setting = new api.Setting( 'my_rrp_setting', true, {transport: 'postMessage'} );

It does nothing! Anything missing from my end?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.