Adding Bootstrap menu to WordPress theme

This tutorial goes over how to create and add the Bootstrap navbar or menu to WordPress. The first step is to add a custom Walker menu to create the Bootstrap menu for the WordPress theme. We will then go over how to add the custom menu to the header of our WordPress theme and some minor customization options. You will also learn how make sure the menu has all the markup needed to be responsive and support child menu items.

Steps

  1. Create a new file called bootstrap-walker.php in the /inc/ directory
  2. In this file add the following code:
  3. Save the boostrap-walker.php file
  4. Open functions.php
  5. At the bottom of this file, you will want to write the code to include our new bootstrap-walker.php file. It should look like the following:
  6. Save the functions.php file
  7. Now we need to add the PHP code to our header file to use the new Bootstrap Walker menu.
  8. Open the header.php file
  9. Edit the code in the header.php file to look like the following:

    Note: I also removed the “skip to content” link from this code. I go over this in the next video tutorial.
  10. Save the header.php file
  11. Now that we have all the code in place, we can create a new Menu from the WordPress Dashboard. Login to the backend of your WordPress site (wp-admin) and go to Appearance -> Menu
  12. Create a new menu, select and add a few pages to the menu, and assign it to the Primary Menu theme location.
  13. Reload the front-end of your WordPress and play with your awesome Bootstrap menu!

Notes from the Video

If you want to learn more about the Walker Class you can read more about it here.

You can also read more about the Bootstrap Navbar classes and options here. Again, we will be adding other Navbar features into our theme when we cover the theme options panel.

Feedback

What did you think of this tutorial? Do I need to explain something in more detail or maybe I went into too much detail? Please let me know!

  • If you’re as interested in developing WordPress with Bootstrap as I am, this truly is a great way to watch a WordPress theme come together on your local machine or your live domain! Brad offers a calm and methodical explanation of what, where and why.

  • mirel imbrea

    hello , I’m getting this error:

    Strict Standards: Declaration of Bootstrap_Walker_Nav_Menu::start_lvl() should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) in C:MAMPhtdocswp-contentthemeshotel-gardenincbootstrap-walker.php on line 9

    • Please go back over the markup and code that was inserted into the theme for this tutorial. I am sure you just missed a step.

  • Fonai

    Hi , there is a problem with the responsive , because the hamburger icon , when clicked doesn’t show the menu

    • Do you have any console errors? Did you make sure to include jQuery? If you can’t figure out where you went wrong, lets move this discussion to the support forum to get sorted out.

      • Fonai

        ok i’ll do that … thansk s !

  • Anyone having issues with there menu not rendering correctly here is a working version to copy and paste and modify to your liking:

    • Looks like you are missing some code there above ‘primary’. Be sure you are getting all the code. It is better to write the code rather than copy & pasting if you really want to learn the development process.

      • Hi Brad its all there but Disque looks like its stripping it out. I just modified the code which you have to since I was running into some troubles. not too sure why Disque is not showing the code…

        • Damian, please remove the custom code you added to the markup to see if you are still having problems. If you are still having problems, please add it to the support forum. Any reported problems thus far from users have been due to missed code or typos.

          • I saw where I went wrong. I didnt copy the nav_walker class I just used the one from the repo which has the class named differently.

          • Glad you got this sorted out!

  • Code Ecstasy

    Very nice tutorial πŸ™‚ . I would like to know how to show the
    third/fourth level menu item. It seems whatever I have this tutorial
    showing only second level menu item. Also would like to know how to
    appear drop down menus without clicking first level menu item by just
    mouse hovering them. It seems now I need to click on the first level
    menu item to appear the second level menu item in the drop down. Can you
    please let me know or you have covered these things in the following
    tutorial

    • These tutorials are based off the Bootstrap navbar (http://getbootstrap.com/components/#navbar), which supports one level of dropdowns. It also requires the user to click the main navigation link in order for the dropdown menu to appear. This is mostly due to the fact that Bootstrap is a mobile-first framework. Remember mobile devices don’t have a hover state. A lot of people on the web want the same functionality you are looking for, so you can find customization with a simple Google search to get the navbar to work on hover. Hope this helps!

      • Code Ecstasy

        Thanks for the info πŸ™‚ . I’ll follow your suggestion. After creating the theme if I need any help regarding this, I’ll ask you to the support forum πŸ™‚

        Thanks

  • Code Ecstasy

    Hi Brad,

    Great tutorial. I’ve finished all the tutorial and also I added some option to my theme with Redux. My base theme is ready except the MENU. Couple of days ago I asked you a question that this menu walker class does not support multilevel menu item, only support upto two level menu. You replied me as follows

    “A lot of people on the web want the same functionality you are looking for, so you can find customization with a simple Google search”

    I thought that I’ll complete the menu very last following your advice. But unfortunately I did not find any suitable bootstrap walker class which support multilevel menu item. As it is a tutorial based on wordpress thus it is very important to work multilevel menu. Can you please think a about it and give us some solution. You’ve covered a lots of other thing which is easy to find in the web but unfortunately I did not find any suitable bootstrap walker class which support multilevel menu item.

    Can you please help me about this
    Regards

    CodeEcstasy

    • I replied with:
      “These tutorials are based off the Bootstrap navbar (http://getbootstrap.com/compon…, which supports one level of dropdowns. It also requires the user to click the main navigation link in order for the dropdown menu to appear. This is mostly due to the fact that Bootstrap is a mobile-first framework. Remember mobile devices don’t have a hover state. A lot of people on the web want the same functionality you are looking for, so you can find customization with a simple Google search to get the navbar to work on hover.”

      As of now, I don’t have any plans to create a tutorial on a multi-level dropdown with the Bootstrap navbar. This is because Bootstrap doesn’t support multi-level (which as I explained above, they don’t work very well on mobile devices. Mobile support should be one of your top priorities considering how fast mobile traffic is growing and how much weight Google is putting towards mobile..

      You should also consider how the menu works as of now. The user has to click the main menu item for the drop down to appear (this is bc a mobile/tablet device doesn’t have a hover state). If you added another level, the user would have to click twice to just see the third level and then click again to go to the page. In my opinion that is a pretty poor user experience.

      I did a Google search and found this: https://github.com/jeffmould/multi-level-bootstrap-menu
      I haven’t tested it, but it says it supports multi-level. This might be something you could use or hack to work.

      I also found this: http://stackoverflow.com/questions/9758587/twitter-bootstrap-multilevel-dropdown-menu
      You could edit the Walker class to support this markup. It will require some edits to the Walker class.

      Again, I would highly recommend staying away from the third level. Look at the top sites on the web, you rarely see a third level these days on a responsive website. The guys that developed Bootstrap are pretty smart people. There is a reason that a third level isn’t included for the navbar as of now.

      Maybe in the next version of Bootstrap they will figure out an elegant way to support multi-level navigation cross-device? Just thinking about large navigation menus on a mobile devices make me think it probably won’t happen.

      Another route that you might consider is to scrape the Bootstrap navbar and find a jquery script of a WordPress plugin that supports multi-level navigations.

      Hope this helps!

      • Code Ecstasy

        Hello Brad,

        Nice to hear from you πŸ™‚ . I understand what you are saying and agree with most of your thoughts.

        But I’m not agree with your opinion

        “Again, I would highly recommend staying away from the third level” .

        I don’t want to appear the third level after clicking the second level. It can be okay if third level menu is appear as a child of the second level when the second level is appear fater hovering/clicking on first level

        I have some joomla item in ThemeForest and currently switching to wordpress. So it is a ThemeForest requirement to show the multilevel properly.

        Anyway, I’ll follow your two other link where multilevel is discussed. I would highly appreciate if you cover the option for show the multilevel menu item as a child of their respective parent level as soon as you can. No need to click on them just appear them all when clicking on the first level. This way user do not need to click on any level and also multilevel showing problem will solve. I hope you understand what I mean. And thanks again for your fast reply

        Regards
        CodeEcstasy

  • Mascha

    The menu works, but every time I add or change a post or page, I keep getting a warning that is like this.
    Warning: Cannot modify header information – headers already sent by (output started at /wp-content/themes/newtheme/inc/bootstrap-walker.php:1) in /public_html/test/wp-admin/post.php on line 235

    It always refers to line 1 of the bootstrap-walker.php. I already checked if I could find any unneccesary spaces in the code, but as far as I know, this is not the case.

    • This could be whitespace at the end of any of the PHP files. Did you manually edit the wp-config.php file as well?

      Send me your latest theme files and I will see if they work on my end.

  • RenaR

    I’m not sure what the problem is but the menu isn’t working for me. You can see what I’ve done so far here: http://testsitemg.com/ivn/. Thanks!

    • You have a few console errors. Doesn’t look like you have the bootstrap.min.js file in your /js/ directory.. Fix the errors in your console. While in Chrome right click the page and select inspect element, then go to the console tab. If that doesn’t fix your issue, please create a post in the forum.

      • RenaR

        Hi Brad, Thanks for answering so quickly. I recreated the new theme twice, and I guess I forgot a step the second time around. Now the menu is showing, but it doesn’t look like the bar at the top that you have going for you. There still is an error in the console, but it’s for a missing image. It looks like it’s acting like the mobile menu. Do you have any other ideas what might be going on? Thanks!

  • K A

    Just after adding the bootstrap walker to the functions file, I get a lot of numbers in the top of my page just before the ‘Skip to content’

    What did I do wrong?

    • Moving forward can you please take your support questions to the members forum. Can you create a new topic with your header code. I have never seen this or had anyone else report this? Make sure you followed the video and written tutorials correctly.

  • Clay Stockford

    I have the exact same problem as KA with the numbers across the top of my screen, it shows up front end and back end. Despite it being bad practice since I was having such a hard time I didn’t write a single line of code it’s all copied and pasted from the tutorial.

    • Look at the file, you copied all of the line numbers when copy and pasting the custom walker menu class. They need to be removed from the file.

      • Clay Stockford

        Haha what a dumbass move on my part. Thanks so much for the quick reply. Love your site. Look forward to continuing the lessons.

  • Matt Rodriguez

    Do you know if this BS Walker menu is GPL?

  • Lloyd Johnson

    The walker is not working right, http://amtweddings.ljohnsonsolutions.com/honeymoon-registry.html the menu does not work right here but it works anywhere else thats not going to make it active, any idea????

    • Looks to be working to me..? If you have further support questions, please ask them in the forum. Thanks

      • Lloyd Johnson

        posted

  • Tony Ross

    Awesome tutorials. Thanks for taking the time to create them.

    Just one thing would make this more seamless, and that’s if there was a link to the next tutorial on each tutorial page. That would save going back and forth to the main page all the time (unless I’m being thick – quite possible – and can’t see such a link if it already exists!).

    • Glad you are enjoying the tutorials!

      I agree, there should be navigation to the previous and next tutorials. I had to add tutorials to answer FAQs and update things. Because of this things got out of order.. I need to circle back around on this and get it sorted out.

  • kulkarni

    Hi Brad

    Wp codex has the following:

    Class Reference/Walker Nav Menu

    Source File

    Walker_Nav_Menu is located in /wp-includes/nav-menu-template.php

    So what is the difference between the one above and the way the tutorial shows it.
    Thanks

    • Checkout line 9 of the code above. This tutorial shows how to extend the WordPress Walker class. Extending the default WordPress Walker class adds the features we need to work with the Bootstrap framework.

      • kulkarni

        Thanks Brad

  • tom derrig

    hi brad got issues with the header navigation is showing vertical and i got this click button beside test showing too

    • I replied to your question in the support forum. Doesn’t look like you have added the Bootstrap CSS/JS to your theme correctly.

      • tom derrig

        cheers brad, I’m getting there !!!:)

  • Mark

    Would love it if you could expand on this tutorial adding a variety of menu types.

  • Mark

    Does your mobile nav work with this because I am copying the code and pasting it in and not getting the mobile nav to work??

    • This was solved in the support forum. Mark didn’t enqueue the Bootstrap JS file correctly..

  • David GΓ³mez

    Hey Brad! Thanks for the tutorials, they really are very interesting.

    I’m having a strange problem. I managed to successfully add the Bootstrap menu following your instructions, and include top-level elements as well as add some “child elements” one of the “parent elements”, which are automatically placed in a dropdown menu.

    The problem appeared when I added a couple of “grand-child elements” to one of these “child elements” to be located in another dropdown sub-menu . Apparently the walker properly creates the dropdown submenu, but when
    you click on the “child element” for the submenu with the “grand-child elements” unfold, absolutely nothing happens.

    The source code I’m using is exactly the one included in the tutorial, did not customizations of any kind, either in the “header.php”, or the “bootstrap-walker.php”. I am using the most recent versions of Bootstrap and underscores.

    Could you help me with this?

    Regards!

  • Ronnie de Wit

    Hi Brad. Thanks for this great tutorial series!

    I have a problem and it looks like this:

    Fatal error: Class ‘Bootstrap_Walker_Nav_Menu’ not found in C:xampphtdocswordpresswp-contentthemeswpbootheader.php on line 48

    Any idea what I did wrong?

    • Did you rename any from the example code above? Did you do Step 5? If you still have issues please use the support forum.

  • DavidJ36