how do you create this customize menu using wp_nav_menu function?

Question

how do you create this customize menu using wp_nav_menu function?

function.php file

register_nav_menus( array( 
    'header-menu' => 'Header Menu', 
    'footer-menu' => 'Footer Menu' 
  ) );

header.php file

  <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => '', ) ); ?>

How do i assign class to <ul> and <li>

Html Example

<ul class="nav header-nav header-bottom-nav nav-center  nav-uppercase">
     <li class=""><a href="index.php" class="nav-top-link">Home</a></li>
     <li class="has-dropdown"><a href="testing.php" 
     class="nav-top-link">Testing<i class="icon-angle-down" ></i></a>
        <ul class='nav-dropdown nav-dropdown-default'>
            <li><a href="hello.php">Hello</a></li>
        </ul>
     </li>
 </ul>

Result Should Be Like This In Wordpress Function

Here The Solution With The Help Of Walker_Nav_Menu Function

Walker_Nav_Menu Function

Function.php

class Desktop_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    if (array_search('menu-item-has-children', $item->classes)) {
        $output .= sprintf("\n<li class='menu-item has-dropdown dropdown %s'><a href='%s' class=\"nav-top-link\" >%s <i class='icon-angle-down' ></i></a>
        \n", ( array_search('current-menu-item', $item->classes) || array_search('current-page-parent', $item->classes) ) ? 'active' : '', $item->url,
         $item->title);
    } else {
        $output .= sprintf("\n<li %s><a href='%s'>%s</a>\n", ( array_search('current-menu-item', $item->classes) ) ? '' : '', $item->url, $item->title
        );
    }
}

function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"nav-dropdown nav-dropdown-default\" role=\"menu\">\n";
}
}

Header.php Code

<?php 
   $defaults = array(
         'theme_location'  => 'header-menu',
         'container'       => 'ul',
         'menu_class'      => 'nav header-nav header-bottom-nav nav-center  nav-uppercase',
         'walker'          => new Desktop_Walker_Nav_Menu()           
   );

  wp_nav_menu( $defaults );
  ?>

Answer 1

You can to pass class into function arguments:

'menu_class' (string) CSS class to use for the ul element which forms the menu. Default 'menu'.

So you can try this:

<?php 
$args = array(
    'menu_class' => 'nav header-nav header-bottom-nav nav-center  nav-
uppercase',        
    'menu' => '(your_menu_id)'
);
wp_nav_menu( $args ); 
?>

You can read about Wordpress Menus. I suggest the following: http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/ http://codex.wordpress.org/Navigation_Menus

Answer 2

Actually there is no need for an walker or any additional classes. You struggle with these arrows? Just do it via CSS like so:

.your_ul_selector > li.menu-item-has-children::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #0f0;
}

I think that the .icon-angle-down has a ::after or ::before pseudo element so you can just use the same.

.your_ul_selector should be the ul. This can change depending if there is a menu container and what the slug is etc. ... but i think you get the idea?

If you would provide a demo i could be much more specific.

Answer 3

You have to work with two files of the theme

No.1 functions.php

No.2 header.php

Firstly you have to add theme support for menu and then register the menu in your theme functions.php like

 // For theme support in functions.php
 add_theme_support('menus');
 //now register the menu
 function my_menu(){
    register_nav_menu('header', ' Header Menu');
 }
 add_action('init','my_menu');

Secondly code in your header.php

 <div class="header_menu" id="header_menu">
                    <?php 
                        $defaults = array(
                            'theme_location' => 'header',
                            'menu' => '',
                            'container' => '',
                            'container_class' => '',
                            'container_id' => '',
                            'menu_class' => 'main_menu',
                            'menu_id' => '',
                            'echo' => true,
                            'fallback_cb' => 'wp_page_menu',
                            'before' => '',
                            'after' => '',
                            'link_before' => '',
                            'link_after' => '',
                            'items_wrap' => '<ul id="header_main_nav" class="nav header-nav header-bottom-nav nav-center  nav-uppercase">%3$s</ul>',
                            'depth' => 0,
                            'walker' => ''
                            );
                        wp_nav_menu($defaults);
                    ?>
                </div>

and for sub menu just go to your admin panel, appearance, menu and just drag the link as sub menu as shown in figure

That's all.