Skip to main content
Zalbi Theme registers two custom menu locations for site navigation: a primary header menu and a legal footer menu.

​
Registered Menu Locations

The theme defines two menu locations in functions.php:38-43:
functions.php
register_nav_menus(
    array(
        'menu-1'     => esc_html__( 'Primary', 'zalbi' ),
        'menu-legal' => esc_html__( 'Menú Legal Footer', 'zalbi' ),
    )
);

​
Primary Menu (menu-1)

Location: Header navigation bar
Purpose: Main site navigation (Home, Services, Catalog, Events, Contact, etc.) Location: Footer information section
Purpose: Legal links (Privacy Policy, Legal Notice, Cookie Policy)

​
Assigning Menus

1

Create a menu

Go to Appearance > Menus in WordPress admin.Click Create a new menu and give it a name (e.g., “Main Menu”).
2

Add menu items

Select pages, posts, custom links, or categories from the left panel.Click Add to Menu to include them.
3

Assign to location

Under Menu Settings, check the box for:
  • Primary for header navigation
  • Menú Legal Footer for footer links
4

Save menu

Click Save Menu to apply changes.

​
Primary Menu Implementation

The primary menu is displayed in header.php:45-56:
header.php
<nav id="site-navigation" class="main-navigation">
    <?php
    wp_nav_menu(
        array(
            'theme_location' => 'menu-1',
            'menu_id'        => 'primary-menu',
            'container'      => false,
            'menu_class'     => 'menu',
        )
    );
    ?>
</nav>
  • theme_location - Uses the registered menu-1 location
  • menu_id - Adds id="primary-menu" to the <ul> element
  • container - Set to false to remove wrapper div
  • menu_class - Adds class="menu" to the <ul> element

​
Mobile Menu Toggle

The header includes a hamburger button for mobile navigation (header.php:41-43): 
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
    <i class="fas fa-bars"></i>
</button>
JavaScript handling is in js/navigation.js, enqueued at functions.php:125. The legal footer menu is displayed in footer.php:87-109:
footer.php
<?php
if ( has_nav_menu( 'menu-legal' ) ) {
    wp_nav_menu( array(
        'theme_location' => 'menu-legal',
        'menu_class'     => 'footer-links',
        'container'      => false,
        'depth'          => 1,
    ) );
} else {
    // Fallback manual links
    echo '<ul class="footer-links">';
    echo '<li><a href="' . home_url($url_prefix . '/aviso-legal') . '">' . $link_aviso . '</a></li>';
    echo '<li><a href="' . home_url($url_prefix . '/politica-privacidad') . '">' . $link_priv . '</a></li>';
    echo '<li><a href="' . home_url($url_prefix . '/politica-cookies') . '">' . $link_cookies . '</a></li>';
    echo '</ul>';
}
?>
  • theme_location - Uses the registered menu-legal location
  • menu_class - Adds class="footer-links" for styling
  • container - Set to false to remove wrapper div
  • depth - Set to 1 to show only top-level items (no submenus)

​
Fallback Behavior

If no menu is assigned to menu-legal, the theme displays default legal links:
  • Legal Notice (/aviso-legal)
  • Privacy Policy (/politica-privacidad)
  • Cookie Policy (/politica-cookies)
The fallback links automatically adjust URLs based on the current language ($url_prefix) when using Polylang.

​
Multilingual Menu Support

​
Polylang Integration

When Polylang is active, you should create separate menus for each language:
1

Create Spanish menu

Create menu with Spanish items and assign to Primary location.
2

Create Basque menu

Create menu with Basque translations and assign to Primary location.
3

Polylang handles switching

Polylang automatically displays the correct menu based on current language.
The footer menu (menu-legal) also supports multiple languages:
footer.php
if ( has_nav_menu( 'menu-legal' ) ) {
    // Polylang automatically detects which menu to load
    wp_nav_menu( array(
        'theme_location' => 'menu-legal',
        // ...
    ) );
}
Menu styles are defined in style.css. Key classes:

​
Primary Menu

.main-navigation .menu {
    /* Main menu container */
}

.main-navigation .menu li {
    /* Menu items */
}

.main-navigation .menu a {
    /* Menu links */
}

.main-navigation .menu li:hover {
    /* Hover state */
}

.footer-links {
    /* Footer menu container */
}

.footer-links li {
    /* Footer menu items */
}

.footer-links a {
    /* Footer links */
}

​
Adding Submenus

WordPress menus support hierarchical structures:
1

Drag and drop items

In Appearance > Menus, drag a menu item slightly to the right under another item.
2

Create hierarchy

The indented item becomes a submenu of the parent.
3

Save menu

Click Save Menu.
The footer menu uses depth => 1, which prevents submenus from displaying. To show submenus, remove or increase the depth parameter.

​
Custom Menu Classes

Add custom CSS classes to individual menu items:
1

Enable CSS classes

In Appearance > Menus, click Screen Options (top right).Check the CSS Classes box.
2

Add class to item

Expand a menu item and enter class name in the CSS Classes field.
3

Style in CSS

Target the class in your stylesheet:
.menu .my-custom-class {
    color: red;
}
For advanced menu customization, use a custom walker class: 
class Zalbi_Custom_Walker extends Walker_Nav_Menu {
    // Custom HTML structure
}

wp_nav_menu( array(
    'theme_location' => 'menu-1',
    'walker'         => new Zalbi_Custom_Walker(),
) );
The theme does not currently use a custom walker, but this is available for future enhancements.

​
Programmatically Adding Menu Items

To add items programmatically: 
function zalbi_add_custom_menu_item($items, $args) {
    if ($args->theme_location == 'menu-1') {
        $items .= '<li><a href="/custom-page">Custom Link</a></li>';
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'zalbi_add_custom_menu_item', 10, 2);

​
Checking if Menu Exists

Use has_nav_menu() to check if a menu is assigned: 
if ( has_nav_menu( 'menu-1' ) ) {
    // Display menu
} else {
    // Display fallback
}
Available attributes for wp_nav_menu():
ParameterDescriptionDefault
theme_locationRegistered menu locationNone
menuMenu ID, slug, or nameNone
menu_classCSS class for <ul>menu
menu_idID attribute for <ul>Menu slug
containerWrapper element (div, nav, false)div
container_classClass for containerNone
container_idID for containerNone
depthHow many levels to show0 (all)
fallback_cbFallback function if menu missingwp_page_menu
beforeHTML before link textEmpty
afterHTML after link textEmpty
link_beforeHTML before link anchorEmpty
link_afterHTML after link anchorEmpty
items_wrapCustom <ul> wrapperStandard
walkerCustom walker classNone

​
Best Practices

1

Keep menus organized

Limit primary menu to 5-7 top-level items for usability.
2

Use descriptive labels

Menu labels should be clear and concise.
3

Test responsive behavior

Verify mobile menu toggle works correctly.
4

Maintain multilingual menus

Keep Spanish and Basque menus synchronized.

​
Troubleshooting

  • Verify navigation.js is enqueued (functions.php:125)
  • Check browser console for JavaScript errors
  • Ensure Font Awesome is loaded for hamburger icon
  • Test button has correct aria-controls="primary-menu"

Build docs developers (and LLMs) love

Get started for freeTalk to us