Welcome to FindNerd.
Today we are going to discuss the navigation management in word-press. We all knows WordPress provides text as well as functionality management using admin end. If you talk about the navigation then we can use the function wp_nav_menu for the same. Before this I would like to mention the registation of different types of menus. Please have a look.
function register_menu_modes()
{
register_nav_menu('custom_menu',__('Custom Menu'));
}
add_action('init','register_menu_modes');
You can put the above code in theme's function.php. It will create a theme location in menu section to categories the menus. You can use the wp_nav_menu function to display the menu on frontend. You can create a new menu under custom menu category. We are going to explain the different arguments of the function wp_nav_menu. Please have a look.
It takes only one argument that is an array. Array contains different elements. Keep in mind array agruments are optional. We are going to explain these terms one by one.
| Elements |
Description |
| menu |
You need to pass the menu name with this argument |
| menu_class |
Default class will be menu but you can change that change for ul element if required |
| menu_id |
Default id is the menu slug and you can change it for ul element if required. |
| container |
Default is div over ul element. You can pass either true or false. you can also write the particular element for container instead of div. |
| container_class |
Default class is menu-{menu-slug}-container. You can put the class of your choice. |
| container_id |
You can put the id to container if required. |
| feedback_cb |
You can set the desired function to call if menu does not exist. you can also set the false for no feedback. Default, function wp_page_menu will be fired. |
| before |
Useful to put the text before the achor tag text |
| after |
Useful to put the text after the achor tag text. |
| link_before |
Useful to put the text before the achor tag. |
| link_after |
Useful to put the text after the achor tag. |
| echo |
Useful to return or print the menu. Default is true to print. |
| depth |
Useful to set to the level of hierarchy Default is zero, means all. |
| walker |
Custom walker class object to make the changes in menu. |
| theme_location |
Registered theme locations can be applied to the menu. |
| items_wrap |
Default ul is used. we can use numbered placeholders with printf format |
Above mentioned arguments have its own importance in navigation management. Read out the above table and analize the importance. In theme development we can face the problem in menu management. If we use the wp_nav_menu function then it will add their own class and id in navigation then we can manage the navigation with above elements. Please have a look.
function mypoint()
{
// write your feedback
}
wp_nav_menu(array('menu'=>'header_one','container'=>'section','container_class'=>'main_nav','container_id'=>'main_nav_bar','feedback_cb'=>'mypoint','before'=>'<span>bar</span>'));
In above code we are using the function in two different ways. In first one we are using the element menu and passed the menu name in it and in second we are using theme_location not the menu element to display so we can use the either way to print the menu. We are also using container to false which will remove the container above ul tag. Lets see the another options as well.
function mypoint()
{
// write your feedback
}
wp_nav_menu(array('menu'=>'header_one','container'=>'section','container_class'=>'main_nav','container_id'=>'main_nav_bar','feedback_cb'=>'mypoint','before'=>'<span>bar</span>'));
In above code we are using container element and set the container section as well as set the class/id for it. You can see the feedback function as well. We are also using before element to put the span tag before link text. Lets see another one.
wp_nav_menu( array(
'theme_location' => 'custom_menu',
'items_wrap' => '<nav class="navbar navbar-default"><div class="container"><div class="navbar-header"><button aria-expanded="false" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle collapsed" type="button"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div><div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li id="item-id"><?php __( "Menu:", "textdomain" ); ?></li>%3$s</ul><ul class="nav navbar-nav navbar-right"><li><a href="' . admin_url() . '"><i aria-hidden="true" class="fa fa-lock"></i> Admin</a></li></ul></div></div></nav>',
'fallback_cb' => false
) );
In above function we are using items_wrap element to customize the html strcture if required. There is walker class as well to make the change in html structure.
0 Comment(s)