What is the pencil icon ?

The pencil icon  is a new add on for themes in WordPress. In simpler terms it’s that pencil icon you see in the TwentySevenTeen Theme. It is a nifty way to give users information on which section they are customizing. It also only refreshes that particular section.

Here’s a small tutorial on how to add your very own.

/* 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 the setting:

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

If you don’t 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.