Custom menu wordpress page Updated 2022

Ok we can show navigation links in page using wordpress function like this

        <nav class="site-nav">
            <?php
                $args = array(
                    'theme_location'       => 'primary',  // menu location
                    'add_li_class'         => 'nav-item',  // this will add class to li check function below add_additional_class_on_li()
                    'menu_class'           => 'navbar-nav ml-lg-4 pt-3 pt-lg-0', // this class will attach to ul
                );
            ?>
            <?php wp_nav_menu($args); ?>
        </nav>

For Adding class in Li

// Adding classes to navigation li. Also Selecting nav link for current page.


function add_additional_class_on_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_on_li', 1, 3);

Check current page link as active

function add_additional_class_on_li($classes, $item, $args) {
    
    if (in_array('current-menu-item', $classes) ){
        $classes[] = 'active ';
      }


    if(isset($args->add_li_class)) 
    {
        $classes[] = $args->add_li_class;
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

As active page will have a class "current-menu-item". we can add class active as given above.

Adding class to Anchor Tag

// Adding classes to navigation anchor tag.

function add_link_atts($atts) {
    $atts['class'] = "nav-link";
    return $atts;
  }
add_filter( 'nav_menu_link_attributes', 'add_link_atts');

Notice we are defining Theme location as "Primary"

Now in "functions.php" file we need to register this "Primary theme location" as given below

    //Navigation Menu

    register_nav_menus(array(
        'primary' => __('Primary Menu')
    ))

Notice "Primary" is registering as "Primary Menu"

Now create menu in dashboard

You should see menu under "Appearance" option

In above Image you can see we can add menu options from left site box where it says "Pages". and We can save our custom menu by clicking "save menu" button

Here we added pages "portfolio","about us" and "contact us" and added to menu then selected menu location and this menu will be complete once click on save menu button