How to add a Visual Edit Shortcut to a theme mod?

Question

I've seen the example for adding a shortcut to the blogname:

$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->selective_refresh->add_partial( 'blogname', array(
    'selector' => '.site-title',
    'render_callback' => 'blogname_render_func',
) );

However, how do you do that for a theme mod?

In my theme, I add a theme mod via Kirki like so:

Kirki::add_config('opts', array(
    'capability' => 'edit_theme_options',
    'option_type' => 'theme_mod',
));

Kirki::add_field('opts', array(
    'settings' => 'button_navigation',
    'type'     => 'toggle',
));

However, when I try:

$wp_customize->get_setting( 'button_navigation' )->transport = 'postMessage';
$wp_customize->selective_refresh->add_partial( 'button_navigation', array(
    'selector' => '.menu-button',
    'render_callback' => 'my_nav_render',
) );

I get:

Warning: Creating default object from empty value

Which is expected, considering I'm adding a theme mod instead of a setting while using get_setting().

If I try something like:

$wp_customize->get_theme_mod( 'button_navigation' )->transport = 'postMessage';

I get:

Fatal error: Uncaught Error: Call to undefined method WP_Customize_Manager::get_theme_mod()

If I remove the part where I set transport = 'postMessage', the shortcut icon appears at the right place in the Customizer preview and clicking on it takes you to the correct controller. However, when you modify the value, the whole page refreshes, instead of just the partial. I'm sure it's because I don't change the transport type. How do I change it?

Answer 1

You need to use the partial refresh feature of kirki

'transport' => 'postMessage',
    'partial_refresh' => array( 
    'my_nav_render_setting' => array( 
        'selector' => '.menu-button', 
        'render_callback' => 'my_nav_render', 
    ) ),