In WordPress theme development, creating a custom menu involves registering the menu, displaying it in your theme, and optionally styling it with CSS. Here’s a step-by-step guide:
1. Register the Menu in functions.php
In your theme’s functions.php, register your custom navigation menu using register_nav_menus().
<?php
// Register a navigation menu
function mytheme_register_menus() {
register_nav_menus(
array(
'primary_menu' => __( 'Primary Menu', 'mytheme' ),
'footer_menu' => __( 'Footer Menu', 'mytheme' ),
)
);
}
add_action( 'init', 'mytheme_register_menus' );
primary_menu→ A slug you’ll use in the theme.Primary Menu→ The name shown in WordPress Dashboard.
2. Display the Menu in Your Theme
Where you want the menu to appear (commonly in header.php or footer.php), use:
<?php
wp_nav_menu( array(
'theme_location' => 'primary_menu',
'menu_class' => 'nav-menu',
'container' => 'nav', // could be 'div' or false to remove
) );
?>
This will output an HTML <ul> list of menu items that you can style.
3. Add a Menu in WordPress Dashboard
- Go to Appearance → Menus in the WP Admin.
- Create a new menu and add pages, posts, or custom links.
- Assign the menu to Primary Menu (the one you registered).
4. Optional – Add CSS for Styling
Example:
.nav-menu {
list-style: none;
display: flex;
gap: 20px;
}
.nav-menu li a {
text-decoration: none;
color: #333;
}
.nav-menu li a:hover {
color: #0073aa;
}
✅ Now you have a working custom menu in your theme.