Convert Bootstrap navbar to WordPress menu

Question

I know there are a lot of topics about this on the net but I find them very complicated. Basically I want to convert a Bootstrap navigation menu to a WordPress Menu.

Say I have the default Bootstrap Navbar:

<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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

The way I would normally link this navbar with my WordPress pages is instead of manually listing each <li> I would use the following:

    <ul class="nav navbar-nav">
     <?php wp_list_pages('title_li=');?>
     </ul>

The output of this would list all my pages I created in WordPress:

 <ul class="nav navbar-nav">
    <li class="page_item page-item-9"><a href="...">About</a></li>
    <li class="page_item page-item-2"><a href="...">Sample Page</a></li>
  </ul>

This is all fine as I can add a page and it gets included in my menu as expected.

The problem

The problem is I don't know how to include a dropdown item in the menu bar and integrate that into WordPress, for example the dropdown item:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
     <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
     </ul>
  </li>

How would I integrate this with WordPress so next time if I want to add a new dropdown list I can easily do it the same way as the normal menu items?

I would appreciate it if you don't provide links to WordPress codex websites and other tutorials as I have already tried many things

Solution 1

You need to use this https://github.com/twittem/wp-bootstrap-navwalker , add the nav walker file and follow the instructions. Here's a sample from a random site I made, I'm not adjusting it to your own site because you'll need to learn this for all your future WP developments. It's incredible easy, check it out:

    <div id="nav">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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 bloginfo('url'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" /></a>
        </div>


        <?php
        wp_nav_menu( array(
                'menu'              => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'navbar-collapse collapse',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
      </div><!-- /.container-fluid -->
    </nav>
</div><!-- #nav -->

As you may have noticed, basically you have to replace what is after your code's

 <!-- Collect the nav links, forms, and other content for toggling -->

with

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

and voila

Solution 2

You can replace the ul element inside the div of class collapse navbar-collapse with wp_nave_menu as follow example.

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <?php wp_nav_menu(
                        array(
                            'theme_location' => 'primary',
                            'container' => false,
                            'menu_class' => 'nav navbar-nav navbar-right'))
                    ?>
                </div>

Solution 3

To fix the dropdown menu problem you should:

1. go to class-wp-bootstrap-navwalker.php file

2. look for $atts['data-toggle'] ="dropdown"; and replace it with $atts['data-bs-toggle'] ="dropdown";

Comments

[user3574492]

What does the bootstrap navwalker do? does it put an option in Appearance > Menus to add dropdowns?

[Devin]

no, it just adds a "bridge" to use WP with Bootstrap, you'll use Wp as usual, that nav walker will take care of everything, converting your WP menus to Bootstrap menus

[user3574492]

So then how would I add dropdown's in the menu with this?

[Devin]

wait, I'm confused. it seems you're asking how to use WP, this is not related to Bootstrap. If that's the case, in your Menu > Appearance section, simply place your sub-pages under the main page and then drag them to the right to make them act as sub-menus. This is basic WP knowledge, so not sure if this is what you're asking for

[user3574492]

No I know how to do that, I misunderstood your post. Great that's done the job. Thank you

[user3574492]

I still have an issue however... now the responsive menu toggle doesn't work

[Devin]

I can't tell without seeing your site, make sure you didn't delete any additional row, just what you needed, this code doesn't affect your toggle (or anything else), so you probably have an unclosed div or something

[user3574492]

Ah I fixed it, was missing the 'container_id' => 'bs-example-navbar-collapse-1'

[Don't Panic]

Welcome to SO. While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.