wordpress customizer selective refresh what is it/how to use it

functions.php

<?php
/* Selective refresh is a feature in the WordPress Customizer that allows you to update a specific section of a page without having 
to reload the entire page. It works by using JavaScript to dynamically update only the content that has changed, rather than reloading 
the entire page.

This is especially useful for live previewing changes to your website's appearance or content, as it allows you to see how your 
changes will look in real-time without disrupting the user experience.

For example, if you make a change to the site title in the Customizer, instead of reloading the entire page, only the site title 
element would be updated. This makes for a smoother and more efficient editing experience.

To create a WordPress customizer option including selective refresh function, you'll need to register your setting with the 
WordPress Customizer API. Here's an example: 
*/

// Register setting
function mytheme_customize_register( $wp_customize ) {
    $wp_customize->add_setting( 'mytheme_setting', array(
        'default'           => '',
        'sanitize_callback' => 'sanitize_text_field',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

/* This creates a new setting called mytheme_setting with a default value of an empty string. 
It also specifies a sanitize callback function (sanitize_text_field) to ensure that the user input is safe.

Next, you'll need to add a control for your setting. Here's an example: */

// Add control
function mytheme_customize_register( $wp_customize ) {
    $wp_customize->add_setting( 'mytheme_setting', array(
        'default'           => '',
        'sanitize_callback' => 'sanitize_text_field',
    ) );

    $wp_customize->add_control( 'mytheme_control', array(
        'label'             => __( 'My Setting', 'mytheme' ),
        'section'           => 'mytheme_section',
        'settings'          => 'mytheme_setting',
        'type'              => 'text',
        'priority'          => 10,
        'transport'         => 'postMessage',
        'partial_refresh'   => array(
            'selector'      => '.my-element',
            'render_callback' => 'my_render_callback',
        ),
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

// Add selective refresh function
function my_render_callback() {
    $mytheme_setting = get_theme_mod( 'mytheme_setting' );
    ?>
    <div class="my-element">
        <?php echo esc_html( $mytheme_setting ); ?>
    </div>
    <?php
}

/* This code creates a new setting called mytheme_setting with a default value of an empty string and a sanitize callback 
function using the add_setting() function. 

It then adds a text input control for the setting to a customizer section using the add_control() function, and specifies that it 
should use the postMessage transport method and partial refresh with a selector of .my-element and a render callback function 
called my_render_callback(). 

Finally, it defines the my_render_callback() function to retrieve the value of the mytheme_setting 
setting using get_theme_mod() and render it inside a <div> element with the class my-element. 
*/