Using the world’s most popular front-end component library, this article gives an example on how to add a Bootstrap 4 navigation menu to a Genesis Child Theme.
I tried to avoid it. I didn’t want to do it. I didn’t think it would be absolutely required. But after much trial and error I finally gave up and conceded there was no way to successfully add a Bootstrap Navigation Menu to a Genesis child theme without using the Walker_Nav_Menu class. Then, just before I started write any lines of code, I stumbled upon a GitHub project by WP Bootstrap named wp-bootstrap-navwalker. This project was exactly what I needed! I didn’t need to write any code because someone else did the hard work for me. And they probably did a much better job than I would have.
But wp-bootstrap-navwalker seems to specifically target WordPress themes and not necessarily Genesis child themes. Could I use this project to achieve my goals? Fortunately, yes I can thanks very much to Genesis’ excellent library of hooks and filters and also those from WordPress.
Genesis WP Bootstrap Navwalker
Genesis WP Bootstrap Navwalker is a spin-off project which is 100% dependent on the original project named wp-bootstrap-navwalker. You can view Genesis WP Bootstrap Navwalker on its GitHub Project Page.
Follow these steps to use Genesis WP Bootstrap Navwalker in your Genesis child theme project.
- Make a backup of your current Genesis child theme.
- Review functions.php for potential conflicts that could affect your current Genesis child theme.
- After your review, copy and paste the contents of functions.php to your child theme’s existing functions.php file.
- Copy the class-wp-bootstrap-navwalker.php file to the root of your child theme. If you store the file elsewhere, be sure to update the
require_oncestatement to point to the new file system path.
- Finally, if you haven’t already done so, create and assign a primary navigation menu to your Genesis child theme.
Genesis WP Bootstrap Navwalk targets the primary navigation menu. Other menus are not affected.
Bootstrap does not support navigation menus deeper than 2 levels. So, if your navigation menu contains items deeper than 2 levels, they will not be displayed. This is a development decision by the authors of Bootstrap. If you absolutely must have a navigation menu deeper than 2 levels, However, a quick Google Search should reveal multiple working solutions.