How to use bootstrap nav in wordpress theme
08:40 | 0 comments

You can use wp-bootstrap-navwalker github repostiory.

First of all , you must copy the class-wp-bootstrap-navwalker.php form this repository and put it in the main directory of your theme .

Download Link :

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

Then you must add this code in functions.php

if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
   // file does not exist... return an error.
   return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
   // file exists... require it.
   require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}


Make sure that you enabled menu for your theme by adding this function in your functions.php file .

add_action( 'after_setup_theme', 'wpt_setup' );
    if ( ! function_exists( 'wpt_setup' ) ):
        function wpt_setup() {
            register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
        } 
endif;


consider this bootstrap navigation code : 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>


You should remove ul element and replace this code 

<?php
wp_nav_menu(array(
    'theme_location' => 'primary',
    'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container' => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id' => 'navbarNav',
    'menu_class' => 'navbar-nav mr-auto',
    'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
    'walker' => new WP_Bootstrap_Navwalker(),
));
?>

finally your menu code should be like this :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <?php
        wp_nav_menu(array(
            'theme_location' => 'primary',
            'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
            'container' => 'div',
            'container_class' => 'collapse navbar-collapse',
            'container_id' => 'navbarNav',
            'menu_class' => 'navbar-nav mr-auto',
            'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
            'walker' => new WP_Bootstrap_Navwalker(),
        ));
        ?>
    </div>
</nav>

COMMENTS

Post your comment

Your email address will not be published. Required fields are marked *