WordPress custom bootstrap menu
Integrate the bootstrap nav Into a WordPress Template
This step assumes that you already have WordPress installed and the theme you’re developing has been activated.
1. Prepare Your Theme for the Menu
Open your functions.php file and register your navigation if you haven’t yet
function RolandMenu( ) {
$menu_name = 'menu-1'; // specify custom menu slug
$menu_list ='';
if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);foreach( $menu_items as $menu_item ) {
if( $menu_item->menu_item_parent == 0 ) {
$parent = $menu_item->ID;
$menu_array = array();
foreach( $menu_items as $submenu ) {
if( $submenu->menu_item_parent == $parent ) {
$bool = true;
$menu_array[] = '<li><a href="' . $submenu->url . '">' . $submenu->title . '</a></li> ' ."\n";
}}
if( $bool == true && count( $menu_array ) > 0 ) {
$menu_list .= '<li class="dropdown">' ."\n";
$menu_list .= '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">' . $menu_item->title . ' <span class="caret"></span></a>' ."\n";
$menu_list .= '<ul class="dropdown-menu dropdown_costumize">' ."\n";
$menu_list .= implode( "\n", $menu_array );
$menu_list .= '</ul>' ."\n";
} else {
$menu_list .= '<li>' ."\n";
$menu_list .= '<a href="' . $menu_item->url . '">' . $menu_item->title . '</a>' ."\n";
$menu_list .= '<li>' ."\n";
}
}
// end <li>
}
} else {
$menu_list = '<!-- no menu defined in location "'.$theme_location.'" -->';
}
echo $menu_list;
}
2. Create a Menu in the Back-End
Navigate to your WordPress site back-end Appearance->Menu. Create a new menu called “Primary” and add items to it. Go to tab Manage Locations and for theme location called “Primary” assign the menu “Primary”. Save changes.
3. Integrate Navigation Bar Mock-Up Into a Template
Open your header.php and copy & paste the navigation bar mock-up into the place where you want it to appear. Now we replace parts of the mock-up with WordPress’ template functions. Firstly place the correct link for the logo. Change this line:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
With:
<ul class="nav navbar-nav">
<?php if (function_exists(RolandMenu()))RolandMenu(); ?>
</ul>
Now you have bootstrap Navbar component integrated into your theme.