theme customizer - Visible Edit Shortcut for WordPress menu that uses nav walker

I am working on a WordPress theme. In the main navigation menu I had to use the following code to apply Bootstrap4 styles on the menu items (from here).

register_nav_menus( array(
    'menu-1' => esc_html__( 'Primary', 'theme-textdomain' ),
) );

// Now, you can display the menu in your theme via below PHP code addition in the header.php file of your theme.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="<?php esc_html_e( 'Toggle Navigation', 'theme-textdomain' ); ?>">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar-content">
            <?php
            wp_nav_menu( array(
                'theme_location' => 'menu-1',
                'menu_id'        => 'primary-menu',
                'container'      => false,
                'depth'          => 2,
                'menu_class'     => 'navbar-nav ml-auto',
                'walker'         => new Bootstrap_NavWalker(),
                'fallback_cb'    => 'Bootstrap_NavWalker::fallback',
            ) );
            ?>
        </div>
</nav>

If I dont use the nav-walker the edit shortcut is visible and works for the navigation menu.

But, when I use the nav-walker the button goes away.

I tried adding this code in customiser

 $wp_customize->selective_refresh->add_partial('primarymenu', array(
        'selector' => '#site-navigation',
        'render_callback' => 'asensio_customize_partial_primarymenu',
    ));

This has no effect.

I am working on a WordPress theme. In the main navigation menu I had to use the following code to apply Bootstrap4 styles on the menu items (from here).

register_nav_menus( array(
    'menu-1' => esc_html__( 'Primary', 'theme-textdomain' ),
) );

// Now, you can display the menu in your theme via below PHP code addition in the header.php file of your theme.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="<?php esc_html_e( 'Toggle Navigation', 'theme-textdomain' ); ?>">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar-content">
            <?php
            wp_nav_menu( array(
                'theme_location' => 'menu-1',
                'menu_id'        => 'primary-menu',
                'container'      => false,
                'depth'          => 2,
                'menu_class'     => 'navbar-nav ml-auto',
                'walker'         => new Bootstrap_NavWalker(),
                'fallback_cb'    => 'Bootstrap_NavWalker::fallback',
            ) );
            ?>
        </div>
</nav>

If I dont use the nav-walker the edit shortcut is visible and works for the navigation menu.

But, when I use the nav-walker the button goes away.

I tried adding this code in customiser

 $wp_customize->selective_refresh->add_partial('primarymenu', array(
        'selector' => '#site-navigation',
        'render_callback' => 'asensio_customize_partial_primarymenu',
    ));

This has no effect.

• theme-customizer

Share Improve this question edited Oct 6, 2017 at 4:35 Mark Kaplun 23.8k77 gold badges4343 silver badges6565 bronze badges asked Oct 4, 2017 at 11:12 Shafayat AlamShafayat Alam 14966 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Nav menus in will use selective refresh by default when they are output into the page via wp_nav_menu() but with a few restrictions on the arguments. For the exact requirements on the $args, see WP_Customize_Nav_Menus::filter_wp_nav_menu_args().

In short, if you're using a custom walker, then you need to pass it as a class name string instead of as an instantiated object. For example, instead of:

wp_nav_menu( array(
    // ...
    'walker' => new My_Custom_Walker(),
) );

Do this instead:

wp_nav_menu( array(
    // ...
    'walker' => 'My_Custom_Walker',
) );