WP Customize refresh problem

Question

Hi I am adding options to WP Customize.

Mostly everything works, but One of my variable is not refreshed in the preview window.

$wp_customize->add_setting('checkbox', array(
        'capability' => 'edit_theme_options',
        'default' => false,
    ));

$wp_customize->add_control('checkbox_control', array(
    'settings' => 'checkbox',
    'label'    => __('Activate Coming Soon Page', 'ln'),
    'section'  => 'general_settings',
    'type'     => 'checkbox',
    'priority' => 1,
));

This is how I add the checkbox and here is my check in functions.php

function template_redirect() {
 if(true == get_theme_mod('checkbox')) {
        include (TEMPLATEPATH . '/coming-soon.php');
        exit;
    }
}
add_action( 'template_redirect', 'template_redirect' );

So everything works. ~The only problem is that the preview window when you are in WP Customize and click the checkbox it reloads the page but it doesn't shows the change. If I click save and refresh manually then everything is fine.

Any suggestion how to fix this issue?

Thank you

UPDATE:

I found what is breaking WP CUSTOMIZER, it is the exit of the redirect. Is there another way how to fix this issue. I need to redirect to that page if the checkbox is TRUE

 function template_redirect() {
     if(true == get_theme_mod('checkbox')) {
            include (TEMPLATEPATH . '/coming-soon.php');
            exit;  !!!!!!!!!!!!!!!!!
        }
    }
    add_action( 'template_redirect', 'template_redirect' );

Answer 1

A likely reason you are not able to see the change in the preview is that your coming-soon.php template doesn't include the requisite wp_head() an wp_footer() calls being made. If you look at your browser's DOM, you should actually see that a secondary iframe is getting created behind the visible iframe. However, if your template doesn't include the standard theme hooks then the customize-preview.js script won't be enqueued and it won't be able to communicate to the parent window that the iframe has loaded and thus is ready to replace the previous iframe.

This same question was actually reported to WP Core Trac in #37981: “template_include not working in customizer previewer” in which I answered similarly:

you have to make sure that the wp_head() and wp_footer() calls are made so that scripts are printed. If customize-preview.js isn't output, then the loaded page won't be able to communicate to the parent frame that the page has finished loading. This issue actually came up recently elsewhere: https://github.com/Automattic/amp-wp/issues/477#issuecomment-247679386

Answer 2

Have you tried explicitly adding the 'transport' option when you call $wp_customize->add_setting?

e.g.

$wp_customize->add_control('checkbox_control', array(
    'settings' => 'checkbox',
    'label'    => __('Activate Coming Soon Page', 'ln'),
    'section'  => 'general_settings',
    'type'     => 'checkbox',
    'priority' => 1,
    'transport'   => 'refresh'
));

Alternatively, you could use a Framework to interact with the WP Theme Customizer. For example, there's a good one by Slobodan Manic call Customizer Boilerplate. For example, to use a checkbox such as yours in Customizer Boilerplate, you would simple download the files to your theme's directory from Github, include a call in your themes functions.php to Customizer Boilerplate (e.g. require( get_stylesheet_directory() . '/customizer-boilerplate/customizer.php' ); then you could modify the options provided in options.php to leave just the checkbox:

                /*
             * ==============
             * ==============
             * Checkbox field
             * ==============
             * ==============
             */
            'new_checkbox_field' => array(
                'setting_args' => array(
                    'default' => true,
                    'type' => 'option',
                    'capability' => $thsp_cbp_capability,
                    'transport' => 'refresh',
                ),                  
                'control_args' => array(
                    'label' => __( 'New checkbox field label', 'my_theme_textdomain' ),
                    'type' => 'checkbox', // Checkbox field control
                    'priority' => 2
                )
            )

Answer 3

You should only use template_redirect when you don't want anything else hooked to template_redirect to be executed. Instead, to include an alternative template, you must use template_include

function ql_template_include( $template ) {
    if ( true == get_theme_mod( 'checkbox' ) ) {
        return TEMPLATEPATH . '/coming-soon.php';
    }
    return $template;
}
add_action( 'template_include', 'ql_template_include' );

There are other filters, like single_template or archive_template. You can find more info at the Codex http://codex.wordpress.org/Plugin_API/Filter_Reference/template_include