Support >
  About cloud server >
  How to create a theme navigation menu using WordPress?
How to create a theme navigation menu using WordPress?
Time : 2025-02-19 16:19:51
Edit : Jtti

The menu management tool in the WordPress backend makes it easy to create and customize navigation menus. If you need to manually call or register the menu location, you can do so through the code in the theme file. Creating a theme navigation menu in WordPress can be done by following these steps:

Step 1: Create a menu

Log in to your WordPress admin.

In the left menu, click Appearance > Menus.

Enter a name for your menu (e.g., "Main Menu"), then click Create Menu.

Step 2: Add menu items

On the Menu page, select the page, category, post, or custom link you want to add to the menu.

Check the items you want to add and click Add to Menu.

You can drag menu items to order them and adjust their hierarchy (e.g., submenus can be created by indenting).

Step 3: Set menu position

In the Menu settings area, select where you want the menu to appear on the page (e.g., "Main Menu," "Top Menu," or "Footer Menu").

Each theme may provide different menu positions, so select the option that suits your theme.

Step 4: Save the menu

Click the Save Menu button to save your changes.

Step 5: Display the menu in your theme

If your theme already supports navigation menus, it will automatically display the menu you set. Otherwise, you need to add the following code to your theme's header.php or the corresponding template file:

<?php
    wp_nav_menu(array(
        'theme_location' => 'primary',  // Menu location name
        'menu_class' => 'main-menu',     // CSS classes for the menu
    ));
?>

In this example, primary is the name of the menu location, which may be different depending on your theme's settings. If you are unsure of the location name, you can check your theme's functions.php file and look for the register_nav_menus() function, which defines the available menu locations.

Step 6: Style the menu

You can use CSS to adjust the style of the menu, for example:

.main-menu {
    list-style: none;
    display: flex;
}

.main-menu li {
    margin: 0 15px;
}

.main-menu a {
    text-decoration: none;
    color: #333;
}

That’s it! You can create and display a custom WordPress navigation menu. If you want a more complex menu, such as a multi-level menu, WordPress supports drop-down menus by default. You just need to nest menu items under other menu items.

JTTI-Defl
JTTI-COCO
JTTI-Selina
JTTI-Ellis
JTTI-Eom