Walker WordPress Menu
A WordPress menu is the part of a theme that controls navigation on a website – in other words, the menu items users click to move between pages. To make it possible to customize how this menu is displayed on the frontend, a Walker WordPress menu is often used. A walker works as a “translator” between WordPress’s internal menu structure and the output that is shown in the browser.
When WordPress retrieves a menu from the database, it only contains the structure itself – information about which pages and links exist and how they relate to each other. The Walker class then steps in and builds the actual menu markup, so each menu item gets the correct tags, classes, and hierarchy.
A Walker WordPress menu is especially useful if you use frameworks like Bootstrap. Bootstrap requires a specific structure for dropdowns, active links, and hover effects to work correctly. With a custom Navwalker class, you can easily make the WordPress menu follow Bootstrap’s structure without having to write everything manually.
The walker ensures that menu items with sub-items automatically get the correct class. It also adds the necessary Bootstrap classes such as nav-link, dropdown-item, and active, so everything looks correct from the start. In addition, it wraps submenus in the proper way, ensuring everything behaves exactly as intended.
This means you can build and edit your WordPress menu directly in the WordPress dashboard, and the walker takes care of the rest. The result is a fully responsive navigation where dropdowns and animations work immediately.
In short: a Walker WordPress menu makes it easy to integrate an advanced navigation structure with modern frameworks like Bootstrap. It automates the handling of classes and structure, so the developer doesn’t have to code the menu markup by hand.
In your header.php, you can then call the menu using the wp_nav_menu function and add your walker as a parameter. This way, your WordPress menu becomes dynamic, easy to maintain, and ready for professional styling with Bootstrap.
The code for the walker menu
<!-- NAVIGATION START -->
<nav id="mainNavbar" class="navbar navbar-expand-lg fixed-top py-3">
<div class="container">
<a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>">
<?php bloginfo('name'); ?>
</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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
wp_nav_menu([
'theme_location' => 'headerMenu_location',
'container' => false,
'menu_class' => 'navbar-nav ms-auto mb-2 mb-lg-0',
'walker' => new Bootstrap_Hover_NavWalker(),
'depth' => 10
]);
?>
</div>
</div>
</nav>
Here you have the Bootstrap Nav Walker class
<?php
class Bootstrap_Hover_NavWalker extends Walker_Nav_Menu
{
function start_lvl(&$output, $depth = 0, $args = null)
{
$indent = str_repeat("\t", $depth);
$submenu_class = 'dropdown-menu';
$output .= "\n$indent<ul class=\"$submenu_class depth_$depth\">\n";
}
function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
{
$indent = ($depth) ? str_repeat("\t", $depth) : '';
// <li> classes
$li_classes = ['nav-item'];
if (in_array('menu-item-has-children', $item->classes)) {
$li_classes[] = 'dropdown';
if ($depth > 0)
$li_classes[] = 'dropdown-submenu';
}
if (in_array('current-menu-item', $item->classes))
$li_classes[] = 'active';
$li_class_string = implode(' ', $li_classes);
$output .= $indent . '<li class="' . esc_attr($li_class_string) . '">';
// <a> classes
if ($depth === 0) {
$link_classes = ['nav-link'];
if (in_array('menu-item-has-children', $item->classes)) {
$link_classes[] = 'dropdown-toggle'; // giver standard Bootstrap 5 pil
}
}
else {
$link_classes = ['dropdown-item'];
if (in_array('menu-item-has-children', $item->classes))
$link_classes[] = 'dropdown-toggle';
}
$link_class_string = implode(' ', $link_classes);
// Data-attribut til dropdown på alle niveauer (mobil klik)
$data_toggle = '';
if (in_array('menu-item-has-children', $item->classes)) {
$data_toggle = ' data-bs-toggle="dropdown" aria-expanded="false"';
}
$attributes = '';
$attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
$attributes .= ' class="' . esc_attr($link_class_string) . '"';
$attributes .= $data_toggle;
$title = apply_filters('the_title', $item->title, $item->ID);
$item_output = '<a' . $attributes . '>' . $title . '</a>';
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
function end_el(&$output, $item, $depth = 0, $args = null)
{
$output .= "</li>\n";
}
}
?>
And here we have the CSS code for the walker menu
@media (min-width: 992px) {
.dropdown:hover > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-left: 1px;
}
.dropdown-toggle i {
margin-left: 1px !important;
font-size: 0.8em;
}
.dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-left: 0.3em solid transparent;
}
Remember to enable the menu in functions.php and call the Nav Walker as well
<?php
require get_template_directory() . '/walker-menu.php';
function test2Files()
{
wp_enqueue_style('bootstrap-css-cdn', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css');
wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('walker-css', get_theme_file_uri('css/walker.css'));
wp_enqueue_style('custom-css', get_theme_file_uri('css/custom.css'));
wp_enqueue_script('bootstrap-js-cdn', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'test2Files');
//tilføj menu til wordpress samt thumbnail
function features()
{
register_nav_menu('headerMenu_location', 'Hoved menu');
register_nav_menu('Footer_location_one', 'Footer menu 1');
add_theme_support('post-thumbnails');
}
add_action('init', 'features');
?>