How to add “Edit Shortcuts” icon to WordPress customizer

These are called ‘Visible Edit Shortcuts’ in Customizer Preview. You should read more about it here:

It’s an extension of the selective refresh:

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

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

Where the render callbacks call bloginfo( 'name' ); and bloginfo( 'description' );

Also check out the official Customizer documentation

So basically if you had the selective refresh in your customizer, these will appear by default 😉

Leave a Comment