Difference between revisions of "WordPress Bootstrap Navwalker"

Revision as of 09:24, 21 April 2016

WordPress Bootstrap Navwalker (wp-bootstrap-navwalker, etc.) describes itself as "a custom WordPress nav walker class to fully implement the Bootstrap 3.0+ navigation style in a custom theme using the WordPress built in menu manager."

Download

• https://github.com/twittem/wp-bootstrap-navwalker

How to use

Place wp_bootstrap_navwalker.php in your WordPress theme folder /wp-content/your-theme/

Open your WordPress themes functions.php file and add the following code:

// Require the library

require_once('wp_bootstrap_navwalker.php');
 
// Register Custom Navigation Walker

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

header.php

Update header.php to use the walker by adding code like this:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?php echo home_url(); ?>">
                <?php bloginfo('name'); ?>
            </a>
    </div>

        <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
    </div>
</nav>

WordPress custom theme examples

See WordPress custom theme examples.

See also

• Navigation bar
• WordPress