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?

2022年2月6日 19:02

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"Testingi class="icon-angle-down" /i/a
        ul class='nav-dropdown nav-dropdown-default'
            lia 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("\nli 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("\nli %sa 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$indentul 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 );
  ?

Topic walker jquery menus Wordpress

Category Web

HeroWeb512 · Accepted Answer · 2017年11月16日 10:44

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.

GDY · Accepted Answer · 2017年11月16日 09:13

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.

JoseLazo · Accepted Answer · 2017年11月16日 08:29

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

how do you create this customize menu using wp_nav_menu function?

No.1 functions.php

No.2 header.php

About