how to create menu in wordpress theme development

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

  1. Go to Appearance → Menus in the WP Admin.
  2. Create a new menu and add pages, posts, or custom links.
  3. 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.

By admin

Leave a Reply

Your email address will not be published. Required fields are marked *