WP.

Bootstrap menu in WordPress gebruiken

Bootstrap is een fantastisch framework om je website op te bouwen, maar om het goed te kunnen gebruiken moet je een paar dingen een beetje aanpassen. Het menu werkt bijvoorbeeld niet out of the box met WordPress. Het installeren van Bootstrap als framework voor WordPress zal ik apart behandelen. Onderstaande gaat ervan uit dat je al een werkende website met Bootstrap hebt, alleen nog geen menu:

/*
*     Drop down menu for bootstrap
*/

class dtc_bootstrap_menu extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth=0,$args=array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
    }
    function end_lvl(&$output, $depth=0,$args=array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n";
    }
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        $item_html = '';
        parent::start_el($item_html, $item, $depth, $args);
        $item_html = str_replace( '<li', '<li itemprop="url"', $item_html);

        if ( $item->is_dropdown && $depth === 0 ) {
            $item_html = str_replace( '<a', '<a class="dropdown-toggle" data-toggle="dropdown"', $item_html );
            $item_html = str_replace( '</a>', ' <b class="caret"></b></a>', $item_html );
        }

        $output .= $item_html;
    }

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
        if ( $element->current )
        $element->classes[] = 'active';

        $element->is_dropdown = !empty( $children_elements[$element->ID] );

        if ( $element->is_dropdown ) {
            if ( $depth === 0 ) {
                $element->classes[] = 'dropdown';
            } elseif ( $depth === 1 ) {
                // Extra level of dropdown menu,
                // as seen in http://twitter.github.com/bootstrap/components.html#dropdowns
                $element->classes[] = 'dropdown-submenu';
            }
        }

        parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

 

Bovenstaande funties komen in de functions.php. In je header.php kan je het menu op de volgende manier invoegen:

  <div id="box-links" class="navbar-collapse collapse navbar-responsive-collapse" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
    <?php
      $defaults = array(
        'container'       =>  false,
        'theme_location'  => 'main_menu',
        'menu_class'      => 'nav navbar-nav',
        //add a default home menu item to the menu
        'items_wrap'      => '<ul id="%1$s" class="%2$s"><li itemprop="url" class="menu-item"><a href="'.home_url().'">Home</a></li> %3$s</ul>',
        'walker'          => new dtc_bootstrap_menu()
      );
      wp_nav_menu($defaults);
    ?>
  </div>