Change static nav menu to wordpress dynamic menu

Question

I'm trying to convert my static nav menu to WP dynamic nav.

This is what I've got:

     <nav>
         <ul id="menu">

            <?php 


                $pages = array( 'index.php' => 'Home', 'services.php' => 'Services', 'sitemap.php' => 'Calculators', 'about.php' => 'About'
                , 'contact.php' => 'Contact' );

                $query = $_SERVER['PHP_SELF'];
                    $path = pathinfo( $query );
                    $selected = $path['basename'];

                foreach( $pages as $url => $title ) {
                   $li = '<li ';
                   if( $url === 'index.php' ) {
                       $li .= 'class="alpha"';
                   } else if ( $url === 'contact.php' ){
                       $li .= 'class="omega"';
                   }

                   if( $selected == $url ) {
                       $li .= 'id="menu_active"';
                   }
                   $li .= '><a href="' . $url . '"><span><span>' . $title . '</span></span></a></li>';
                   echo $li;
                }
            ?>

        </ul>
    </nav>

But I've read that I need to use this?

                    <?php wp_nav_menu( array( 
                        'theme_location' => 'primary',
                        'container' => false,
                        'menu_class' => 'menu'
                    ) ); ?>

I really don't get it nor how to implement this? Any ideas? I really am stuck with this so help is much needed and appreciated. Thanks.

Answer 1

// register this menu to function.php<br>
register_nav_menu( 'top', __( 'Top Menu', 'themify' ) );

Now generate new menu from Appearance -> Menus and add this new menu as top-menu.

//call menu to header.php<br>
<div class="top-header">

    if (has_nav_menu('top')) {<br>
      wp_nav_menu( array('theme_location' => 'top' ) );<br>
     }

</div>

Answer 2

            <?php
            $defaults = array(
                'theme_location'  => '',
                'menu'            => '',
                'container'       => false,
                'container_class' => '',
                'container_id'    => '',
                'menu_class'      => 'menu',
                'menu_id'         => '',
                'echo'            => true,
                'fallback_cb'     => 'wp_page_menu',
                'before'          => '',
                'after'           => '',
                'link_before'     => '',
                'link_after'      => '',
                'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                'depth'           => 2,
                'walker'          => ''
                );
            wp_nav_menu( $defaults );
            ?>

Try this. This will use the default menu you have set up in Wordpress. You can specify the menu name of a non default menu also. This will wrap the menu items in a <ul></ul> tag.

Answer 3

You can try this:

wp_nav_menu( array( 'container' => 'ul', 'menu_class' => 'menu', 'depth' => 2,'theme_location' => 'primary' ));

And also write the following code in functions.php:

if ( ! function_exists( 'nav_setup' ) ):
function nav_setup() {

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
    'primary' => __( 'Primary Navigation', 'StreetCoder' ),
) );

}

Try using firebug, you will find some classes in li tag i.e. current-menu-item, sub-menu in li ul li , current-menu-parent in parent li once you clicked the child item , current-menu-ancestor in child li etc. Transfer your css properties into these classes.

Moreover, if you want to include specific class for particular li, so please go to Appearance>menus, you will find an option at right-top corner i.e. "Screen Options", click there. Panel will be expanded then check the option "CSS Classes" under "Show advanced menu properties". Now you will find an input field "CSS Classes (optional)" once you expand menu from right panel. Just put there your specific class for specific li. panel.

I hope this is everything to work with menu. :)