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