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';
                $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';

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

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

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

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

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

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

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

                            $nav_icon = 'fa-eercast';

                    $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.


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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.