Selective Refresh In Customizer Options

Since WordPress 4.5 update, it introduced Selective Refresh In Customizer feature in it, which helps you to view the exact change to that part in Customize Options, without the Customizer Options being refreshed. Well, so what is its advantage for the users you may think of, right? So, to answer to it is, since it is refreshed without the page load, the user will have fast experience on the Customizer settings and can save you lots of time while playing with the Customizer Options.

Advantages Of Selective Refresh In Customizer

So, as we have already told you about what selective refresh in customizer is for, hence, you may want to know about what the advantage for this is for your theme? Well, for this to answer, let’s say that in your theme, you have 1000’s of Customizer Options. Now, if you are trying to change only one part of the theme settings via not supporting this feature then, what you notice is, your customize options will get fully refreshed.

Now, from that, what we can say is, your site loading will need full refresh to see the changes, which will consume some of your precious time. So, you now may know about what is the importance of this feature, ie, selective refresh in customizer, since it will reflect the changes right away when you change the theme settings associated with it, hence, you can rapidly change the theme settings without having the customize options page refreshed.

How To Use Selective Refresh In Customizer

Now, after knowing the advantage of the selective refresh in customizer options, you may want to implement it in your theme, right? So, why the wait for this, let’s move ahead and implement it for the site title and description for your theme.

First of all, what we have to do is, we have to create a customizer options hooking it to the: customize_register function. Now, let’s move ahead and create the function to hook into that customize_register function. Here below, you can see that we have created the function named as the_newsmag_customize_register() and hooked it as described previously.

function the_newsmag_customize_register( $wp_customize ) {
    $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
    $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';

    if ( isset( $wp_customize->selective_refresh ) ) {
        $wp_customize->selective_refresh->add_partial( 'blogname', array(
            'selector'        => '.site-title a', // Add the class/id wrapped to display the site title 
            'render_callback' => 'the_newsmag_customize_partial_blogname',
        ) );

        $wp_customize->selective_refresh->add_partial( 'blogdescription', array(
            'selector'        => '.site-description', // Add the class/id wrapped to display the site description
            'render_callback' => 'the_newsmag_customize_partial_blogdescription',
        ) );
    }
}
add_action( 'customize_register', 'the_newsmag_customize_register' );

Now, from that function creation and hooking, you have created the Customizer Options for your theme to include the selective refresh for site title and description for your theme. Also, since we called up the render_callback function for partial refresh, we need to create those functions associated with that function for the selective refresh to work out properly. So, let’s move ahead and create it.

function the_newsmag_customize_partial_blogname() {
    bloginfo( 'name' );
}

function the_newsmag_customize_partial_blogdescription() {
    bloginfo( 'description' );
}

Here, in the above code, we have created the function for render_callback from which, it will be rendering the site title and description on changing those settings from customize options.

If you want to learn about how to create the child theme and integrated selective refresh in customizer via the child theme created, you can follow this link.

Conclusion

If you have followed up this tutorial properly and successfully implemented Selective Refresh In Customizer for your theme then, we can assume that you are now more familiar on this feature than before and can implement it in your upcoming or existing WordPress theme projects. But, if you are still confused on this and want more help on this then, drop us the comment below on the comment box and we will follow it up.