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