Hello everyone! Today, We will explore how to integrate a Bootstrap menu into a WordPress website. Many individuals who develop websites using WordPress often wonder how they can incorporate a Bootstrap menu. I will demonstrate the step-by-step process of adding a Bootstrap menu to a WordPress site.
WordPress is a popular platform for website development, and Bootstrap is a widely used front-end framework. Combining the power of both can enhance the design and functionality of your website.
Integrating Bootstrap Menu into WordPress: Enqueueing Files
To begin, make sure you have a WordPress site up and running. We will first need to enqueue the necessary Bootstrap CSS and JS files. Open the functions.php file of your WordPress theme, which can be found in the theme’s main directory.
Within the functions.php file, add the following code:
|
1 2 3 4 5 6 7 |
function mytheme_enqueue_styles() { wp_enqueue_style('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'); wp_enqueue_script('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', array('jquery')); } add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles'); |
Integrating ‘WP Bootstrap Navwalker’ Library for Bootstrap Menu in WordPress
Now, we will include the ‘WP Bootstrap Navwalker’ library from GitHub into our WordPress site.
Firstly, let’s create a class file within WordPress to house the relevant code. In your WordPress theme’s directory, navigate to the ‘includes’ folder or create one if it doesn’t exist. Inside the ‘includes’ folder, create a new PHP file and name it ‘wp_bootstrap_navwalker.php’.
Next, visit GitHub and search for ‘WP Bootstrap Navwalker’. This library provides a custom nav walker class that extends the WordPress Walker_Nav_Menu class, enabling the Bootstrap navigation menu functionality in WordPress. Once you locate the repository, open the ‘wp_bootstrap_navwalker.php’ file.
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
Copy all the code from the GitHub file and paste it into the ‘wp_bootstrap_navwalker.php‘ file you created within your WordPress theme’s ‘includes’ folder.
Finally, save the ‘wp_bootstrap_navwalker.php‘ file, and you’re done with the integration of the ‘WP Bootstrap Navwalker’ library.
By including this library, you can enhance the functionality and styling of your Bootstrap menu within WordPress.
Adding Bootstrap Navbar Container and Toggle Button to WordPress Theme
Now, before using the wp_nav_menu function, let’s copy the necessary code for the Bootstrap navbar container and toggle button from the Bootstrap website.
Visit the Bootstrap website and navigate to the Navbar section. Locate the HTML code for the navbar container and the toggle button. Copy both sections.
Open the header.php file in your WordPress theme’s directory. Find the appropriate location where you want to insert the navbar container and toggle button code. Paste the copied code into the header.php file.
Ensure that the navbar container code is wrapped in a <nav> element. This element represents the navigation section in HTML.
Here’s an example of how the code might look in the header.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <?php // wp_nav_menu code ?> </div> </nav> |
Adding wp_nav_menu Function with Sample Code in header.php
Now, let’s copy the sample wp_nav_menu function code from GitHub and paste it into the appropriate location in the header.php file. Please note that we will update the theme_location and container_id values later.
Open the header.php file in your WordPress theme’s directory. Locate the section where you want to insert the menu code. Update the following sample code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbarmenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns. 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'mynavbar-menu', 'menu_class' => 'navbar-nav mr-auto', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker(), ) ); ?> </div> </nav> |
Ensure that you replace the placeholders 'your_theme_location', 'your_container_element', 'your_container_class', 'your_container_id', and 'your_menu_class' with appropriate values.
'your_theme_location'should be replaced with the location of your menu in the theme.'your_container_element'should be replaced with the HTML element you want to use as the container for the menu.'your_container_class'can be replaced with any custom class you want to assign to the container element.'your_container_id'should be replaced with a unique ID for the container element.'your_menu_class'can be replaced with any custom class you want to assign to the menu.
Registering and Configuring WordPress Menu with Bootstrap Integration
Now, let’s register a menu using the register_nav_menus function. I have registered a menu called “Main menu”. Afterwards, we can add some links to the “Header menu” from the WordPress admin panel. Finally, we will update the theme_location value in the wp_nav_menu function to “header menu”.
Open the functions.php file in your WordPress theme’s directory. Scroll to the file and change the following code:
|
1 2 3 4 5 6 7 8 9 |
// This theme uses wp_nav_menu() in one location. register_nav_menus( array( 'menu-1' => esc_html__( 'Primary', 'hayrikk' ), 'main-menu' => 'Main Menu' ) ); |
In this code, we define a function named register_my_menus() that uses the register_nav_menus function to register a menu location called “Header menu”. You can modify the name to match your preferred menu name. Don’t forget to save the changes to the functions.php file.
Adding Links to “Header Menu” from WordPress Admin Panel and Updating wp_nav_menu Function
Great! You have successfully registered a menu location. Now, let’s add some links to the “Header menu” from the WordPress admin panel.
Login to your WordPress admin panel and navigate to “Appearance” -> “Menus”.
Make sure you have selected the “Main menu” from the “Select a menu to edit” dropdown. If not, select it and click the “Select” button.
Now, you can add links to your menu by selecting the pages, categories, or custom links from the left-hand side and clicking the “Add to Menu” button.
Once you have added all the desired menu items, scroll down to the “Menu Settings” section.
You will see the “Theme locations” option with a dropdown menu. Select the “Main menu” option from the dropdown.
Finally, click the “Save Menu” button to save your changes.
Excellent! You have added links to the “Header menu”. Now, let’s update the wp_nav_menu function in the header.php file.
Open the header.php file in your WordPress theme’s directory. Locate the wp_nav_menu function code that we previously inserted.
Update the 'theme_location' value in the wp_nav_menu function to 'main-menu'.
Here’s an example of how the updated code might look:
|
1 2 3 4 5 6 7 8 9 10 |
wp_nav_menu(array( 'theme_location' => 'header-menu', 'container' => 'your_container_element', 'container_class' => 'your_container_class', 'container_id' => 'your_container_id', 'menu_class' => 'your_menu_class', 'walker' => new WP_Bootstrap_Navwalker(), )); |
Enabling Dropdown Toggles with Infixed Data Attribute in Walker – functions.php Update
Now, let’s add the code snippet that enables the walker to use the infixed data attribute for dropdown toggles. Copy the following code and paste it into your functions.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
add_filter( 'nav_menu_link_attributes', 'prefix_bs5_dropdown_data_attribute', 20, 3 ); /** * Use namespaced data attribute for Bootstrap's dropdown toggles. * * @param array $atts HTML attributes applied to the item's `<a>` element. * @param WP_Post $item The current menu item. * @param stdClass $args An object of wp_nav_menu() arguments. * @return array */ function prefix_bs5_dropdown_data_attribute( $atts, $item, $args ) { if ( is_a( $args->walker, 'WP_Bootstrap_Navwalker' ) ) { if ( array_key_exists( 'data-toggle', $atts ) ) { unset( $atts['data-toggle'] ); $atts['data-bs-toggle'] = 'dropdown'; } } return $atts; } |
In this code, we define a function named prefix_bs5_dropdown_data_attribute that hooks into the nav_menu_link_attributes filter. This function checks if the current menu item has children (dropdown menu) and adds the necessary data attributes (data-bs-toggle and data-bs-target) to the menu item output.
Remember to save the changes made to the functions.php file.
Great! You have successfully added the code snippet to your functions.php file, which enables the walker to use the infixed data attribute for dropdown toggles.
If you have any questions or need further assistance, please let me know. I’m here to help.
Thank you for following along with this tutorial!”
