Add Bootstrap sidebar menu to wordpress

Question

I Am Trying To Convert a Bootstrap Sample Site To Wordpress Template And Stuck At Navigation

Here Is My Navigation Code

 <!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle">
  <i class="fa fa-bars"></i>
</a>
<nav id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle">
      <i class="fa fa-times"></i>
    </a>
    <li class="sidebar-brand">
      <a class="js-scroll-trigger" href="#top">Start Bootstrap</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#top">Home</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#about">About</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#services">Services</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#portfolio">Portfolio</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#contact" onclick=$( "#menu-
close").click();>Contact</a>
      </li>
      </ul>
    </nav>

and my functions.php

<?php
function mytheme_setup() {

register_nav_menus(
array(
'footer_nav' => __( 'Footer Menu', 'bootpress' ),
'top_menu' => __( 'Top Menu', 'bootpress' )
)

);

}
add_action( 'after_setup_theme', 'mytheme_setup' );
require_once('wp_bootstrap_navwalker.php');

function bootstrap_nav()
{
    wp_nav_menu( array(
            'theme_location'    => 'header-menu',
            'depth'             => 2,
            'container'         => 'false',
            'menu_class'        => 'nav sidebar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
    );
}


function pwwp_enqueue_my_scripts() {
  // jQuery is stated as a dependancy of bootstrap-js - it will be loaded by WordPress before the BS scripts
  wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_scripts');

function pwwp_enqueue_my_styles() {
  wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

  wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

  // this will add the stylesheet from it's default theme location if your theme doesn't already
  //wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');



 ?>

And Its Showing This Output https://imagebin.ca/v/3aEVBnR3NOjd I Am New To Web Deelopment And Trying To Get Some Knowledge About Converting Bootstrap templates to Wordpress

Answer 1

You may have already found your answer, but here's my two cents:

You don't need to create the menu if you want to use the WordPress built in menu functions. So you can remove:

<ul class="sidebar-nav">
    <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle">
      <i class="fa fa-times"></i>
    </a>
    <li class="sidebar-brand">
      <a class="js-scroll-trigger" href="#top">Start Bootstrap</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#top">Home</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#about">About</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#services">Services</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#portfolio">Portfolio</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#contact" onclick=$( "#menu-
close").click();>Contact</a>
      </li>
      </ul>

The actual Navwalker function goes in your headerp.php file. So be sure to remove

    function bootstrap_nav()
{
    wp_nav_menu( array(
            'theme_location'    => 'header-menu',
            'depth'             => 2,
            'container'         => 'false',
            'menu_class'        => 'nav sidebar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
    );
}

from your functions.php file.

Per the WP Bootstrap Navwalker Github page, your header.php file should look something 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(
        '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>

The only thing in functions.php (in regards to the navwalker of course!) should be:

<?php require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

You can play with the classes in the navwalker function in header.php just like you would a regular Bootstrap menu.

The error looks to be caused from the actual navwalker file not being in your theme folder. Make sure the wp-bootstrap-navwalker.php file is in the theme folder (same place as functions.php). If you want to place the wp-bootstrap-navwalker.php files somewhere else, be sure to change '/wp-bootstrap-navwalker.php'; ie 'path/to/file/wp-bootstrap-navwalker.php';in functions.php to point to the file.

Hopefully that helps!