Bootstrap Code snippets

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>

 

Related Articles

  • Je eigen content types: custom post types in WordPress

    Standaard wordt WordPress geïnstalleerd met twee post types: berichten en pagina’s. Maar als je je site echt goed wil structureren is dat meestal niet genoeg. Je kan natuurlijk alles in...
  • vorige volgende post bij een custom post type

    In de single.php, page.php of singular.php van een custom post type kreeg ik het niet voor elkaar om een simpele “vorige”, “volgende” post link toe te voegen. de previous_post_link() van...
  • WordPress functionaliteit gebruiken in een los php bestand

    Voor het ontwikkelen van Really Simple SSL wilde ik een deactivatie optie inbouwen in de plugin, voor het geval je niet meer in de WordPress back-end zou kunnen. Als WordPress...
  • Een enkele sticky post tonen

    Sticky posts zijn handig als je bijvoorbeeld op je homepage één post wilt tonen die blijft “plakken”, dus niet alleen de meest recente, maar een post of artikel die daar...

Laat een reactie achter