A navigation menu you can edit from the admin screen

The header nav is, right now, links written directly in the template. This means that every time you add an item the code needs editing—which goes against WordPress’s philosophy of “separating the people who write from the people who build.” This time we replace it with a real nav whose menu you can edit from the admin screen.

Two-part setup: register, then display

The admin-screen menu feature works through two steps on the theme side.

1. Register a “place to hold the menu” in functions.php—declare “this theme has a header menu slot”
2. Display “the contents of that slot” in header.php—output the menu built in the admin screen

Step 1: register_nav_menus

function shimaenagado_setup() {
  add_theme_support('title-tag');
  add_theme_support('post-thumbnails');

  // Register a place to hold the menu
  register_nav_menus([
    'header-nav' => 'Header Navigation',
  ]);
}
add_action('after_setup_theme', 'shimaenagado_setup');

'header-nav' is the slot’s ID (the name used inside the theme), and the right side is the name shown in the admin screen. This makes a “Menus” item appear under “Appearance” in the admin screen.

Step 2: wp_nav_menu

We replace the hard-coded nav in header.php wholesale.

<nav class="site-nav">
  <?php
  wp_nav_menu([
    'theme_location' => 'header-nav',  // which slot's contents to output
    'container'      => false,         // don't output an extra wrapping div
  ]);
  ?>
</nav>

wp_nav_menu outputs the menu built in the admin screen in the form <ul><li><a>…. The very structure we learned in the HTML course—“a nav is really a list of links”—comes right out.

Build the menu in the admin screen

Once the theme side is ready, the rest is the admin screen’s job.

1. Open “Appearance” → “Menus”
2. Give the menu a name (for example, Main Menu) and create it
3. From the list on the left, check and add the Home, About, and News pages/links
4. Under “Menu Locations,” check “Header Navigation” and save

Reload the front end, and the items you arranged in the admin screen appear right in the nav. Drag to reorder and the display order changes too. Now you can grow the nav without touching any code.

Match the CSS to the list structure

Since the output is now a <ul><li> list structure, we match the CSS to it too.

.site-nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: block;
  padding: 8px 16px;
  color: #333;
  font-weight: bold;
  text-decoration: none;
  font-size: 14px;
}
.site-nav a:hover {
  color: #2a6f7c;
}

Summary of this lesson

1. The menu feature is a two-part setup—register_nav_menus (registering the slot) in functions.php, and wp_nav_menu (displaying the contents) in header.php
2. Adding and reordering items is done in the admin screen’s “Appearance” → “Menus”—no more touching the code
3. The output is a <ul><li><a> list structure. The current-location class current-menu-item is added automatically too