Episode 25 of 32

The WordPress Menu

Create and manage navigation menus in WordPress — register menu locations, assign menus, and style the output.

The WordPress Menu

WordPress has a powerful built-in menu management system. Instead of hardcoding navigation links, you register menu locations in your theme and let users build menus from the admin panel.

Registering Menu Locations

In functions.php, register the locations where menus can appear:

function developer_coffee_setup() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'developer-coffee'),
        'footer'  => __('Footer Menu', 'developer-coffee'),
        'social'  => __('Social Menu', 'developer-coffee'),
    ));
}
add_action('after_setup_theme', 'developer_coffee_setup');

Creating a Menu in the Admin

Go to Appearance → Menus
Enter a menu name (e.g., "Main Navigation") → click Create Menu
Add items from the left panels: Pages, Posts, Categories, or Custom Links
Drag to reorder, drag right to create sub-menus (dropdowns)
Under "Menu Settings", check the display location (e.g., "Primary Menu")
Click Save Menu

Displaying the Menu in Templates

<nav id="main-nav">
    <?php wp_nav_menu(array(
        'theme_location' => 'primary',
        'container'      => false,
        'menu_class'     => 'nav-list',
        'fallback_cb'    => false,
        'depth'          => 2,
    )); ?>
</nav>

wp_nav_menu() Parameters

Parameter	What It Does
`theme_location`	Which registered location to use
`container`	Wrapping element (`div` by default — `false` to remove)
`menu_class`	CSS class on the `<ul>`
`menu_id`	ID attribute on the `<ul>`
`fallback_cb`	Fallback function if no menu is assigned (`false` = show nothing)
`depth`	How many levels of sub-menus (0 = all, 1 = no sub-menus)

WordPress Menu HTML Output

WordPress generates this HTML structure:

<ul class="nav-list">
    <li class="menu-item current-menu-item">
        <a href="/">Home</a>
    </li>
    <li class="menu-item menu-item-has-children">
        <a href="/blog">Blog</a>
        <ul class="sub-menu">
            <li class="menu-item">
                <a href="/category/html">HTML</a>
            </li>
            <li class="menu-item">
                <a href="/category/css">CSS</a>
            </li>
        </ul>
    </li>
</ul>

Useful CSS Classes WordPress Adds

Class	Added When
`current-menu-item`	The current page's link
`current-menu-parent`	Parent of the current page
`menu-item-has-children`	Has a sub-menu
`sub-menu`	The nested `<ul>` for dropdowns

Styling the Sub-Menu (Dropdown)

/* Hide sub-menus by default */
.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #2c3e50;
    min-width: 180px;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Show on hover */
.menu-item-has-children:hover > .sub-menu {
    display: block;
}

.sub-menu li a {
    display: block;
    padding: 10px 16px;
    color: #ccc;
    font-size: 14px;
    border-bottom: 1px solid #34495e;
}

.sub-menu li a:hover {
    background: #34495e;
    color: #fff;
}

/* Highlight current page */
.current-menu-item > a {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

Key Takeaways

Register menu locations in functions.php with register_nav_menus()
Create and manage menus in Appearance → Menus
Use wp_nav_menu() to display menus in templates
WordPress adds helpful CSS classes like current-menu-item for styling
Sub-menus use the .sub-menu class — style them as dropdowns