Search code examples
wordpressdrop-down-menunavigationnav

how can i prepare menu (arrays) for this code


I am learning wordpress together with bootstrap and i don't kno how to prepare menu for following code :

<div class="collapse navbar-collapse" id="navbarSupportedContent">
 <ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true">
    <li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 1</a></li>     <li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 2</a></li>
    <li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 3</a></li>
    <li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 4</a></li>
</ul> </div>

for this code i am using

<div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <?php
 wp_nav_menu(
        array(
        'menu'                 => 'primarym',
        'container'            => 'ul',
        'container_class'      => 'navbar-nav nav-dropdown nav-right',
        'menu_class'           => 'menu',
        'menu_id'              => 'primary-menu',
        'echo'                 => true,
    )
    ); ?>   
     </div>

which is not working in my templates, can anyone help me.


Solution

  • No need to create custom walker. Just use additional argument and set the filters for nav_menu_css_class and nav_menu_link_attributes.

    Please check below which help you.

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <?php
     wp_nav_menu(
            array(
            'menu'                 => 'primarym',
            'container'            => 'ul',
            'container_class'      => '',
            'menu_class'           => 'navbar-nav nav-dropdown nav-right',
            'menu_id'              => 'primary-menu',
            'add_li_class'         => 'nav-item',
            'echo'                 => true,
        )
        ); ?>   
    </div>
    

    Notice the new 'add_li_class' argument. And set the filters on functions.php

    function add_additional_class_in_li($classes, $item, $args) {
        if(isset($args->add_li_class)) {
            $classes[] = $args->add_li_class;
        }
        return $classes;
    }
    add_filter('nav_menu_css_class', 'add_additional_class_in_li', 1, 3);
    
    
    function add_additional_class_in_ancher($atts) {
      $atts['class'] = "nav-link link text-black display-4";
      return $atts;
    }
    add_filter( 'nav_menu_link_attributes', 'add_additional_class_in_ancher');