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.
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' );
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' );
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', );
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' => , );
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', );
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,);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',);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' => ,);
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' => ,);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>',);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);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' =>);