How to add UI buttons in customizer like twentyseventeen

Question

So its been days since i've been looking into this and still found zero clue as to how to do it in my own custom theme. I've also had a look at this, but nothing. I had a look at the customizer of twenty-seventeen and found that the code responsible was

$wp_customize->selective_refresh->add_partial( 'blogname', array(
    'selector' => '.site-title a',
    'render_callback' => 'twentyseventeen_customize_partial_blogname',
) );

I tired the same with my customizer in my custom theme but it didn't work at all.

MY CODE

$wp_customize->add_section( 'footer_section', array(
    'title' => __( 'Footer Section', 'healthtech' ),
    'panel' => '',
) );
/*
* Settings for copyright text
*/
$wp_customize->add_section( 'footer_section', array(
    'title' => __( 'Footer Section', 'healthtech' ),
    'panel' => '',
) );
/*
* Settings for copyright text
*/
$wp_customize->add_setting( 'copyright_text', array(
    'default' => '',
) );
$wp_customize->add_control( new WP_Customize_Control(   $wp_customize,  'copyright_text',   array(
            'label'    => __( 'Copyright Text', 'healthtech' ),
            'section'  => 'footer_section',
            'settings' => 'copyright_text',
        )
    )
);
$wp_customize->selective_refresh->add_partial( 'copyright_text', array(
    'selector' => 'span#copy-write', // You can also select a css class
    'render_callback'     => 'check_copy_right_text',
) );

Callback function for the render_callback

function check_copy_right_text(){
   echo get_theme_mod('copyright_text');
 }

Answer 1

Your code is good i think you are missing the front-end part, here is the complete code for functions.php:

/* Customizer fields */

function your_customizer_settings($wp_customize) {
    $wp_customize->add_section('footer_section', array(
        'title' => __('Footer Section', 'healthtech'),
        'panel' => '',
    ));
    /*
     * Settings for copyright text
     */
    $wp_customize->add_section('footer_section', array(
        'title' => __('Footer Section', 'healthtech'),
        'panel' => '',
    ));
    /*
     * Settings for copyright text
     */
    $wp_customize->add_setting('copyright_text', array(
        'default' => '2342',
        'transport' => 'postMessage'
    ));
    $wp_customize->add_control(new WP_Customize_Control($wp_customize, 'copyright_text', array(
        'label' => __('Copyright Text', 'healthtech'),
        'section' => 'footer_section',
        'settings' => 'copyright_text',
            )
            )
    );
    $wp_customize->selective_refresh->add_partial('copyright_text', array(
        'selector' => 'span#copy-write', // You can also select a css class
        'render_callback' => 'check_copy_right_text',
    ));
}
// Customizer action
add_action('customize_register', 'your_customizer_settings');

function check_copy_right_text(){
   echo get_theme_mod('copyright_text');
 }

and put this in the front-end since its a copyright text lets assume footer.php:

<span id="copy-write"><?php check_copy_right_text(); ?></span>

if you go to the customizer you should see the Edit Shortcut Button like this:

if not you will have to add a bit of CSS to position better the button, you can add that CSS to style.css or create a CSS file only for correcting the buttons if you have more buttons that need CSS, remember to use add_action( 'customize_preview_init', 'my_function_with_wp_enqueue_with_my_css_only_for_the_customizer' );

i added an extra value in your setting:

$wp_customize->add_setting('copyright_text', array(
        'default' => '2342',
        'transport' => 'postMessage' //this one
    ));

if you dont set transport to postMessage the entire preview will reload since it will default to refresh, this way only that placement (that is what is called the part of a selective refresh) will update.

I recommend you to read this and this.

Dont hesitate to ask, this feature is kind of new and i am adding Selective Refresh Partials to all my theme options too.

By the way for options that render a Google Map (or similar) you will need to add JavaSCript.