WordPress Output Bootstrap navigation bar Structure Menu Example

Recently tennfy in using bootstrap rewrite blog theme, because before not used bootstrap, so it is also spent a lot of effort to understand Bootstrap. Bootstrap provides a complete CSS style layout that is really handy for people with a certain front-end base.

The first problem of using bootstrap to do WordPress theme is to output the menu of bootstrap navigation bar structure, so that we can use the style provided by bootstrap to display the menu. This article will introduce how to realize the menu structure of WordPress output bootstrap.

Bootstrap navigation bar Structure

The common bootstrap navigation bar is the following form:

Defaultnavbar_demo

Its HTML structure is:

<nav class= "NavBar navbar-default" role= "Navigation" >


<div class= "Navbar-header" >


<a class= "Navbar-brand" href= "#" >W3Cschool</a>


</div>


<div>


<ul class= "Nav navbar-nav" >


<li class= "Active" ><a href= "#" >iOS</a></li>


<li><a href= "#" >SVN</a></li>


<li class= "Dropdown" >


<a href= "#" class= "Dropdown-toggle" data-toggle= "dropdown" >


Java


<b class= "Caret" ></b>


</a>


<ul class= "Dropdown-menu" >


<li><a href= "#" >jmeter</a></li>


<li><a href= "#" >EJB</a></li>


<li><a href= "#" >jasper report</a></li>


<li class= "Divider" ></li>


<li><a href= "#" > Separate links </a></li>


<li class= "Divider" ></li>


<li><a href= "#" > Another separate link </a></li>


</ul>


</li>


</ul>


</div>


</nav>


Custom Wp_nav_menu functions

Familiar with WordPress's friends know, WordPress generally uses the Wp_nav_menu function output menu, and through the function output menu is not get the above HTML structure. However, it is gratifying to note that the Wp_nav_menu function supports custom output HTML structures.

The parameters for the Wp_nav_menu function in WordPress are as follows:

<?php





$defaults = Array (


' Theme_location ' => ',


' Menu ' => ',


' Container ' => ' div ',


' Container_class ' => ',


' container_id ' => ',


' Menu_class ' => ' menu ',


' menu_id ' => ',


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





?>

One of the things we need to change is Walker parameters.

Output bootstrap navigation bar Structure menu

In header.php, you output the navigation bar menu by using the following code:

<nav class= "NavBar navbar-default" role= "navigation"
   <div class= "Navbar-header" >
      <a class= "Navbar-brand" href= "#" >tennfy wu</a>
   </ Div>
   <div>
       <?php  
      Wp_nav_menu (array  
   ' theme_location ' => ' Cat_nav ', 
   ' Depth ' => 2,  
   ' container ' => false,  
     & nbsp;   ' menu_class ' => ' nav navbar-nav ',  
   ' fallback_cb ' => ' Wp_page_menu ' ,  
  //Add or change Walker parameters   
   Walker ' => new Wp_bootstrap_navwalker ())   
     );  
 ?>
   </div>
</nav>

The value of the Walker parameter in the code above is a class, so next you need to add this class and add the following code to the subject's functions.php file:

&lt;?php





/**


* Class Name:wp_bootstrap_navwalker


* GitHub Uri:https://github.com/twittem/wp-bootstrap-navwalker


* DESCRIPTION:A Custom WordPress Nav Walker class to implement the Bootstrap 3 navigation style in A custom theme using T He WordPress built in Menu manager.


* version:2.0.4


* Author:edward mcintyre-@twittem


* license:gpl-2.0+


* License Uri:http://www.gnu.org/licenses/gpl-2.0.txt


*/





Class Wp_bootstrap_navwalker extends Walker_nav_menu {





/**


* @see WALKER::START_LVL ()


* @since 3.0.0


*


* @param string $output passed by reference. Used to append additional content.


* @param int $depth Depth of page. Used for padding.


*/


Public Function Start_lvl (&amp; $output, $depth = 0, $args = Array ()) {


$indent = Str_repeat ("T", $depth);


$output. = "\n$indent&lt;ul role=\" menu\ "class=\" dropdown-menu\ "&gt;\n";


}





/**


* @see Walker::start_el ()


* @since 3.0.0


*


* @param string $output passed by reference. Used to append additional content.


* @param object $item Menu Item data object.


* @param int $depth depth of menu item. Used for padding.


* @param int $current _page Menu item ID.


* @param object $args


*/


Public Function Start_el (&amp; $output, $item, $depth = 0, $args = Array (), $id = 0) {


$indent = ($depth)? Str_repeat ("T", $depth): ';





/**


* Dividers, Headers or Disabled


* =============================


* Determine whether the item is a divider, Header, Disabled or regular


* Menu item. To prevent errors we use the strcasecmp () function to so a


* Comparison that isn't case sensitive. The strcasecmp () function returns


* A 0 if the strings are equal.


*/


if (strcasecmp ($item-&gt;attr_title, ' divider ') = = 0 &amp;&amp; $depth = = 1) {


$output. = $indent. ' &lt;li role= ' presentation ' class= ' divider ' &gt; ';


else if (strcasecmp ($item-&gt;title, ' divider ') = = 0 &amp;&amp; $depth = = 1) {


$output. = $indent. ' &lt;li role= ' presentation ' class= ' divider ' &gt; ';


else if (strcasecmp ($item-&gt;attr_title, ' dropdown-header ') = = 0 &amp;&amp; $depth = = 1) {


$output. = $indent. ' &lt;li role= ' presentation ' class= ' Dropdown-header ' &gt; '. Esc_attr ($item-&gt;title);


else if (strcasecmp ($item-&gt;attr_title, ' disabled ') = = 0) {


$output. = $indent. "&lt;li role=" presentation "class=" disabled "&gt;&lt;a href=" # "&gt;". Esc_attr ($item-&gt;title). ' &lt;/a&gt; ';


} else {





$class _names = $value = ';





$classes = Empty ($item-&gt;classes)? Array (): (array) $item-&gt;classes;


$classes [] = ' menu-item-'. $item-&gt;id;





$class _names = Join (', apply_filters (' Nav_menu_css_class ', Array_filter ($classes), $item, $args));





if ($args-&gt;has_children)


$class _names. = ' dropdown ';





if (In_array (' Current-menu-item ', $classes))


$class _names. = ' active ';





$class _names = $class _names? ' class= '. Esc_attr ($class _names). '"' : '';





$id = apply_filters (' nav_menu_item_id ', ' menu-item-'. $item-&gt;id, $item, $args);


$id = $id? ' Id= '. Esc_attr ($id). '"' : '';





$output. = $indent. ' &lt;li '. $id. $value. $class _names. ' &gt; ';





$atts = Array ();


$atts [' title '] =! Empty ($item-&gt;title)? $item-&gt;title: ';


$atts [' target '] =! Empty ($item-&gt;target)? $item-&gt;target: ';


$atts [' rel '] =! Empty ($item-&gt;xfn)? $item-&GT;XFN: ';





IF Item Has_children Add Atts to a.


if ($args-&gt;has_children &amp;&amp; $depth = = 0) {


$atts [' href '] = ' # ';


$atts [' data-toggle '] = ' dropdown ';


$atts [' class '] = ' dropdown-toggle ';


$atts [' aria-haspopup '] = ' true ';


} else {


$atts [' href '] =! Empty ($item-&gt;url)? $item-&gt;url: ';


}





$atts = apply_filters (' nav_menu_link_attributes ', $atts, $item, $args);





$attributes = ';


foreach ($atts as $attr =&gt; $value) {


if (! empty ($value)) {


$value = (' href ' = = = $attr)? Esc_url ($value): Esc_attr ($value);


$attributes. = ". $attr. '="' . $value. '"';


}


}





$item _output = $args-&gt;before;





/*


* Glyphicons


* ===========


* Since The menu item is not a divider or Header we check the


* If there is a value in the Attr_title property. If the Attr_title


* Property isn't null we apply it as the class name for the Glyphicon.


*/


if (! empty ($item-&gt;attr_title))


$item _output. = ' &lt;a '. $attributes. ' &gt;&lt;span class= "Glyphicon". Esc_attr ($item-&gt;attr_title). ' &gt;&lt;/span&gt;&amp;nbsp; ';


Else


$item _output. = ' &lt;a '. $attributes. ' &gt; ';





$item _output. = $args-&gt;link_before. Apply_filters (' The_title ', $item-&gt;title, $item-&gt;id). $args-&gt;link_after;


$item _output. = ($args-&gt;has_children &amp;&amp; 0 = = $depth)? ' &lt;span class= ' caret ' &gt;&lt;/span&gt;&lt;/a&gt; ': ' &lt;/a&gt; ';


$item _output. = $args-&gt;after;





$output. = Apply_filters (' Walker_nav_menu_start_el ', $item _output, $item, $depth, $args);


}


}





/**


* Traverse elements to create list from elements.


*


* Display One element if the element doesn ' t have any children otherwise,


* Display the element and its children. Would only traverse up to the Max


* depth and no ignore elements under that depth.


*


* This method shouldn ' t is called directly, use the walk () method instead.


*


* @see Walker::start_el ()


* @since 2.5.0


*


* @param object $element Data Object


* @param array $children _elements List of elements to continue traversing.


* @param int $max _depth max depth to traverse.


* @param int $depth Depth of current element.


* @param array $args


* @param string $output passed by reference. Used to append additional content.


* @return NULL on failure with no changes to parameters.


*/


Public Function Display_element ($element, &amp; $children _elements, $max _depth, $depth, $args, &amp; $output) {


if (! $element)


Return





$id _field = $this-&gt;db_fields[' id '];





Display this element.


if (Is_object ($args [0]))


$args [0]-&gt;has_children =! Empty ($children _elements[$element-&gt; $id _field]);





Parent::d isplay_element ($element, $children _elements, $max _depth, $depth, $args, $output);


}





/**


* Menu Fallback


* =============


* If This function is assigned to the Wp_nav_menu ' s FALLBACK_CB variable


* and a Manu has not been assigned to the theme location in the WordPress


* Menu Manager The function with display No to a non-logged in user,


* and would add a link to the WordPress menu manager if logged in as a admin.


*


* @param array $args passed from the Wp_nav_menu function.


*


*/


public static function fallback ($args) {


if (Current_user_can (' manage_options ')) {





Extract ($args);





$FB _output = null;





if ($container) {


$FB _output = ' &lt; '. $container;





if ($container _id)


$FB _output. = ' id= '. $container _id. '"';





if ($container _class)


$FB _output. = ' class= '. $container _class. '"';





$FB _output. = ' &gt; ';


}





$FB _output. = ' &lt;ul ';





if ($menu _id)


$FB _output. = ' id= '. $menu _id. '"';





if ($menu _class)


$FB _output. = ' class= '. $menu _class. '"';





$FB _output. = ' &gt; ';


$FB _output. = ' &lt;li&gt;&lt;a href= '. Admin_url (' nav-menus.php '). ' &gt;add a menu&lt;/a&gt;&lt;/li&gt; ';


$FB _output. = ' &lt;/ul&gt; ';





if ($container)


$FB _output. = ' &lt;/'. $container. ' &gt; ';





echo $FB _output;


}


}


}