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>

Result Should Be Like This In Wordpress Function enter image description here

Here The Solution With The Help Of Walker_Nav_Menu Function

Walker_Nav_Menu Function


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,
    } 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

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

3 Answers 3


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:

$args = array(
    'menu_class' => 'nav header-nav header-bottom-nav nav-center  nav-
    '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


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.


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
 //now register the menu
 function my_menu(){
    register_nav_menu('header', ' Header Menu');

Secondly code in your header.php

 <div class="header_menu" id="header_menu">
                        $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' => ''

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

enter image description here

That's all.

  • You welcome @FarhanDharsi
    – HeroWeb512
    Commented Nov 16, 2017 at 11:07
  • You can also accept the answer if it solved your question @FarhanDharsi. You can ask more about your question if something missed
    – HeroWeb512
    Commented Nov 16, 2017 at 13:01
  • thanks brother i need to ask one more question how can i get most view post or most clicked post and display in template?
    – user131591
    Commented Nov 17, 2017 at 5:32
  • Post another question, I will answer this question with complete code @FarhanDharsi
    – HeroWeb512
    Commented Nov 18, 2017 at 4:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.