WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've got a design for my webpage that uses tabbed navigation with two levels. In this example 'TAB2' tab is selected and it's children item are desplayed below of it.

          |TAB1|    |TAB2|    |TAB3|               
 tab2-item1    tab2-item2    tab2-item3ˬ   tab2-item4 ...

The only webpage I could find that uses something simmilar is really old fashioned but shows what I want in general. sample webpage (not mine)

I think that I need the following html structure for this - using bootstrap:

 //Bootstrap 2.32 nav tabs
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">TAB 1</a></li>
    <li><a href="#tab2" data-toggle="tab">TAB 2</a></li>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
    <div class="tab-pane" id="tab2">

What is the best way to print the menue out in this format?

share|improve this question

What a pitty that nobody responded. I had a hard way checking the walker class first before I found out that it'll be much easier with wp_get_nav_menu_items()

This is what I came up with. Not perfect but it works (only two levels which is enought for my page).

$menu_name = 'primary';

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 ( (array) $menu_items as $key => $menu_item ) 
    $title = $menu_item->title;
    $url = $menu_item->url;
    $curr_item_parent = $menu_item->menu_item_parent;
    $curr_item_id = $menu_item->db_id; 

        $sub_list[$curr_item_parent][] = array('title' => $title, 'url' => $url, 'id' =>$curr_item_id, 'parent_id' => $curr_item_parent);
        $parent_list[] = $curr_item_parent;
        $tab_list[] = array('title' => $title, 'url' => $url, 'id' =>$curr_item_id);
        $toplevel_list[] = $curr_item_id;
        $complete_list[] = $curr_item_id;

$parentless_list = array_diff ($toplevel_list, array_unique($parent_list)); 


$menu_output .="<ul class='nav nav-tabs'>";

foreach($tab_list as $tab)
    $tab = (object)$tab;
    $menu_output .="<li class=''><a href='#{$tab->id}' data-toggle='tab'>{$tab->title}</a></li>";

$menu_output .= "</ul>";
$menu_output .= "<div class='tab-content'>";

    foreach($sub_list as $key=>$sub_array)
        $menu_output .= "<div class='tab-pane' id='{$key}'>";

        foreach($sub_array as $sub)
            $sub = (object)$sub;
            $menu_output .="<li class=''><a href='#{$sub->url}' data-toggle='tab'>{$sub->title}</a></li>";

        $menu_output .= "</div>";

    foreach($parentless_list as $dummy_item)
        $menu_output .= "<div class='tab-pane' id='{$dummy_item}'></div>";


$menu_output .= "</div>";

echo $menu_output;
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.