12

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

5 Answers 5

23

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

8
  • What does the bootstrap navwalker do? does it put an option in Appearance > Menus to add dropdowns? Aug 15, 2014 at 19:34
  • 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
    – Devin
    Aug 15, 2014 at 19:35
  • So then how would I add dropdown's in the menu with this? Aug 15, 2014 at 19:37
  • 1
    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
    – Devin
    Aug 15, 2014 at 19:45
  • No I know how to do that, I misunderstood your post. Great that's done the job. Thank you Aug 15, 2014 at 19:54
1

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>
1

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";

0
 <?php  wp_nav_menu( array('menu' => 'primary', ) ); ?>
0
-1

Here is a my take to the issue that provided me the flexibility I needed to create a vertical, accordeon type, bootstrap 5 menu:

https://github.com/exonianp/wp-bootstrap5-accordeon-vertical-menu

I opted to go the old fashioned way, and create a rather complex JOIN query because simply I had enough with the limitations of both the wp_get_nav_menu_items and the various walkers that are circulating around (that still use ,

  • ) and need a lot of time to fully understand what they are doing.

  • 1
    • 1
      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. May 28, 2021 at 7:02

    Your Answer

    Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

    By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

    Not the answer you're looking for? Browse other questions tagged or ask your own question.