Nav menus Fast previewing not working with wp_get_nav_menu_items!

Question

I have a problem and I know why but I can't find a solution or how I can fix it!

The problem is when using the customizer preview in menus the live preview editing it's not working and that's because I didn't use the wp_nav_menu function instead I use wp_get_nav_menu_items because it's more customizable and I need to insert a different icon for each menu item by it's name as you can see at the code below:

// Get the nav menu based on $menu_name (same as 'theme_location' or 'menu' arg to wp_nav_menu)
            // This code based on wp_nav_menu's code to get Menu ID from menu slug
            if ( is_front_page() )
                $menu_name = 'home';
            else
                $menu_name = 'primary';

            if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {

                $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

                $menu_items = wp_get_nav_menu_items($menu->term_id);

                $menu_list = '<ul class="menu nav list-unstyled nav-stacked" role="tablist" id="menu-nav-menu">';


                foreach ( (array) $menu_items as $key => $menu_item ) {
                    $title = $menu_item->title;
                    $id    = $menu_item->ID;
                    $title = strtolower($title);
                    $title = rtrim($title);

                    $url = $menu_item->url;
                    $active = '';
                    $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
                    if($url == $actual_link)
                    {
                        $active = 'active';
                    }
                    else {
                        $active = '';
                    }

                    switch ($title) {
                        case 'profile':
                            $nav_icon = 'fa-user';
                            break;

                        case 'resume':
                            $nav_icon = 'fa-file';
                            break;

                        case 'portfolio':
                            $nav_icon = 'fa-paint-brush';
                            break;

                        case 'plans':
                            $nav_icon = 'fa-map-signs';
                            break;

                        case 'blog':
                            $nav_icon = 'fa-pencil';
                            break;

                        case 'testimonials':
                            $nav_icon = 'fa-quote-left';
                            break;

                        case 'clients':
                            $nav_icon = 'fa-users';
                            break;

                        case 'contact':
                            $nav_icon = 'fa-envelope';
                            break;

                        default:
                            $nav_icon = 'fa-eercast';
                            break;
                    }

                    $menu_list .= "<li id='menu-item-{$id}' class='{$active} menu-item menu-item-type-custom menu-item-object-custom menu-item-{$id}'><a href='{$url}'><i class='fa {$nav_icon}'></i> {$title}</a></li>";
                }
                $menu_list .= '<li><form method="get" action="'.site_url('/').'"><input type="search" name="s" class="form-control" placeholder="Search..."></form></li>';
                $menu_list .= '</ul>';

            } else {
                $menu_list = '<ul class="nav list-unstyled nav-stacked"><li style="color: #fff">Menu "' . $menu_name . '" <strong>empty!</strong>.</li></ul>';
            }

            // $menu_list now ready to output
            echo $menu_list;

So if there any solution at the middle here as I can insert my icons ( with just code as I can't use plugins ) and enable the fast preview customizer I'll be really appreciated.

Answer 1

You must use wp_nav_menu() if you want to get selective refresh (fast previewing). If you want to have a custom nav menu that uses selective refresh, then instead of manually iterating over wp_get_nav_menu_items() you instead need to subclass the Walker_Nav_Menu to implement your custom logic, and then pass it into wp_nav_menu() like this:

wp_nav_menu( array(
    'theme_location' => 'primary',
    'walker' => 'My_Custom_Nav_Menu_Walker',
) );

Here's one example of creating a custom walker: https://wordpress.stackexchange.com/a/116719/8521

Note that you must pass the walker class as a string and not an object in order for selective refresh to be available. See full conditions.