Dynamically Adding an Active Class to a Custom Menu in WordPress with Bootstrap
As a WordPress developer, one of the common challenges you might face is how to dynamically add an "active" class to a custom menu, especially when using the popular Bootstrap framework. This article will explore two approaches to this problem, discussing the pros and cons of each method.
The Quick and Dirty Way: Using If Statements
The quickest way to do this (but not the recommended "WordPress" way of doing this) is to add an if statement on your <li>
or <a>
tags to check for the current page ID. Here's an example:
<div id="leftnav">
<ul class="nav-bar">
<li>
<!-- Link to section at level 2 -->
<a href="<?php echo get_page_link(202); ?>">The Battle & Beyond</a>
<!-- navigation object : Menu - Left Navigation -->
<ul class="nav-bar">
<li <?= (is_page(204)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(204); ?>">Map</a></li>
<li <?= (is_page(212)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(212); ?>">The Ravine</a></li>
<li <?= (is_page(215)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(215); ?>">Groggin's Field</a></li>
<!-- ... and so on -->
</ul>
</li>
</ul>
</div>
This approach works by checking the current page ID using the is_page()
function and then adding the "active" class to the corresponding <li>
element if the conditions are met.
While this method is quick and easy to implement, it has a few drawbacks:
- Maintainability: As your website grows and the number of pages and menu items increases, this approach can become unwieldy and difficult to manage, especially if you need to update the page IDs.
- Flexibility: This method is tightly coupled to the specific page IDs, making it less flexible if you need to reorganize your website or change the page structure.
- Separation of Concerns: Mixing the presentation logic (adding the "active" class) with the content (the menu items) violates the principle of separation of concerns, which can make your code harder to understand and maintain.
The "WordPress" Way: Registering a Custom Menu
The recommended "WordPress" way of dynamically adding an active class to a custom menu is to register a new nav menu and let WordPress handle the active class automatically. Here's how you can do it:
- In your
functions.php
file, register a new nav menu:
function register_my_custom_menu() {
register_nav_menu('sidebar-menu', __( 'Sidebar Menu' ));
}
add_action( 'init', 'register_my_custom_menu' );
- In your
sidebar.php
file, display the dynamic menu:
<div id="leftnav">
<ul class="nav-bar">
<li>
<!-- Link to section at level 2 -->
<a href="<?php echo get_page_link(202); ?>">The Battle & Beyond</a>
<!-- navigation object : Menu - Left Navigation -->
<?php wp_nav_menu( array(
'theme_location' => 'sidebar-menu',
'menu_class' => 'nav-bar'
)
); ?>
</li>
</ul>
</div>
This approach has several advantages:
- Maintainability: By registering a custom menu, you can manage your menu items in the WordPress admin, making it easier to update and maintain the menu structure.
- Flexibility: If you need to reorganize your website or change the page structure, you can simply update the menu in the WordPress admin without having to modify any code.
- Separation of Concerns: The presentation logic (adding the "active" class) is handled by WordPress, which helps to maintain a clear separation of concerns in your codebase.
Additionally, WordPress will automatically add the "active" class to the appropriate menu item based on the current page, making it easy to style the active menu item with Bootstrap.
Conclusion
While the quick and dirty approach of using if statements to add an active class to a custom menu in WordPress with Bootstrap might seem like a simple solution, it's generally not the recommended way to handle this task. The "WordPress" way of registering a custom menu and letting WordPress handle the active class is a more maintainable, flexible, and separation-of-concerns-friendly approach.
By following the "WordPress" way, you'll end up with a more scalable and manageable codebase, making it easier to maintain and update your website over time. Flowpoint.ai can help you identify any technical errors that are impacting the conversion rates on your website and generate recommendations to fix them.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.