Create navigation menu In WordPress theme
By Admin
Sep 26, 2017
In this tutorial we will learn how to create a navigation menu in wordpress.
Function : wp_nav_menu()
wp_nav_menu() function is used to create a navigation menu in wordpress. Which comes with several parameters.
This function has several parameters to work with. Here we are using defaults as listed below.
<?php
$defaults = array(
'theme_location' => 'Primary',
'menu' => 'Primary Navigation',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => 'nav',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => ,
'after' => ,
'link_before' => ,
'link_after' => ,
'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>',
'depth' => 0,
'walker' =>
);
wp_nav_menu( $defaults );
?>
We are supplying the $defaults as an argument in the wp_nav_menu() function. which have all the details about theme navigation menu.
(a) Theme Location :
Using this parameter we can set a theme location that location is further used on menus page to set a menu.
The other requirement is that you use the function register_nav_menu() to register those locations. This is done from your function files i.e (“functions.php”).
Now start building our custom menu functions parameter that we have registered a theme location called ” primary”.
$params = array(
'theme_location' => 'primary'
);
(b) Menu :
This parameter is used to define which menu should be used. Here we are using only generic menu location not exact one to use.
We will use a menu called “Primary Navigation“. Then our parameters looks like this:
$params = array( 'theme_location' => 'primary', 'menu' => 'Primary Navigation' );
(c) Container :
By default our menu will be wrapped in a div. If you dont need this and probably want to cut back on the amount of divs.
you can also use this parameter to define a different tag such as <section>tag or <nav>navigation tag.
$params = array(
'theme_location' => 'primary',
'menu' => 'Primary Navigation'
'container' => 'div',
);
(d) Container Class and Container ID :
These two parameter is used to set the class and id to the container. Here we are ommiting this altogether.
$params = array(
'theme_location' => 'primary',
'menu' => 'Primary Navigation'
'container' => 'div',
'container_class'=> ,
'container_id' => ,
);
(e) Menu Class and Menu ID :
These two parameter is used to set the class and id to the menu. We will use menu class=’menu’and menu_id=’nav’ in this parameter.
$params = array(
'theme_location' => 'primary',
'menu' => 'Primary Navigation'
'container' => 'div',
'container_class' => ,
'container_id' => ,
'menu_class' => 'menu'
'menu_id' => 'nav',
);
(f) Echo :
This parameter is used to display the result. This term is boolean, return true or false value.
$params = array(
'theme_location' => 'primary',
'menu' => 'Primary Navigation'
'container' => 'div',
'container_class' => ,
'container_id' => ,
'menu_class' => 'menu'
'menu_id' => 'nav',
'echo' => true,
);
(g) Fallback CB :
This is a callback function that you can fallback to if no menu is found. By default it uses the wp_page_menu().
$params = array(
'theme_location' => 'primary',
'menu' => 'Primary Navigation'
'container' => 'div',
'container_class' => ,
'container_id' => ,
'menu_class' => 'menu'
'menu_id' => 'nav',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
);
(h) Before and After :
These parameter are used to define what content can be placed before and after the anchor tag<a></a>.
You could use these to precede each item with a verticar bar or you can wrap the items in a span tag. Here we are not defining these parametes values.
$params = array(
'theme_location' => 'primary',
'menu' => 'Primary Navigation'
'container' => 'div',
'container_class' => ,
'container_id' => ,
'menu_class' => 'menu'
'menu_id' => 'nav',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => ,
'after' => ,
);
(i) Link Before and Link After :
These parameter are used to define what links should be appear before and after the anchor tag. Here we are not setting these parameter values.
$params = array( 'theme_location' => 'primary', 'menu' => 'Primary Navigation' 'container' => 'div', 'container_class' => , 'container_id' => , 'menu_class' => 'menu' 'menu_id' => 'nav', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => , 'after' => , 'link_before' => , 'link_after' => , );
(j) Items Wrap :
By default items are wrapped in an unordered list with menu class and menu id. You can use them according to your need. Here I have set items_wrap with a value.
$params = array( 'theme_location' => 'primary', 'menu' => 'Primary Navigation' 'container' => 'div', 'container_class' => , 'container_id' => , 'menu_class' => 'menu' 'menu_id' => 'nav', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => , 'after' => , 'link_before' => , 'link_after' => , 'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>', );
(k) Depth :
This parameter is very useful when you want to use same menu twice . But you don’t want any child items to display in the location you are setting up with wp_nav_menu() function.
For Example: If you want the Primary Navigation to include a second level dropdown, you could leave this at the default settings.
And if i want same item in a footer navigation then omit the child items. You can set this parameter of depth 1.
The default “0” means all levels willbe output.Here we are defining default depth i.e. 0
params = array( 'theme_location' => 'primary', 'menu' => 'Primary Navigation' 'container' => 'div', 'container_class' => , 'container_id' => , 'menu_class' => 'menu' 'menu_id' => 'nav', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => , 'after' => , 'link_before' => , 'link_after' => , 'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>', 'depth' => 0 );
(l) Walker :
This parameter is used to define a walker object which can be used to manipulate how the whole function works.
$params = array(
'theme_location' => 'primary',
'menu' => 'Primary Navigation'
'container' => 'div',
'container_class' => ,
'container_id' => ,
'menu_class' => 'menu'
'menu_id' => 'nav',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => ,
'after' => ,
'link_before' => ,
'link_after' => ,
'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>',
'depth' => 0
'walker' =>
);
