How to easily add a WordPress menu to a custom theme

This is the fourth article on How to build a custom WordPress theme, using any HTML template. Today we are going to add a WordPress menu to our theme. The one that can be edited using Admin Dashboard, not hardcoded.

In our latest article How to add the logo to a custom WordPress theme we added a logo to our custom theme. In this article we are going to do similar thing, but with WordPress menu.

Register WordPress menu

The first thing we need to do is register our menu in functions.php. For that we are going to use built-in WordPress function register_nav_menu. This function accepts two parameters.

$location – it is slug like string. For example: ‘primary-menu’, ‘top-menu’, ‘main-menu’, etc. This string will later be used in our theme as a trigger for showing the menu in desired spot.
$description – it is a short description of our menu. This will be shown in the Apperance > Menus as the name for our location.

<?php

/**
 * We need to add this code to our functions.php
 * */
 
 function theme_add_nav_menu() {
    register_nav_menu(
        'primary-menu', __("Primary menu, at the header")
    );
}

add_action('after_setup_theme', 'theme_add_nav_menu');

Let’s analyze code snippet above. We created function in our functions.php and inside of it we called register_nav_menu(). We passed two parameters. $location as 'primary-menu' and $description as Primary menu, at the header. We can notice that $description is wrapped inside __(). That is built-in WordPress function that is used to print strings that we want to be translatable. So, if we decide to add some other language later, besides English, this string would be translatable.

After we add code about to our functions.php we will be able to use this menu in Appearance>Menus. This is what it will look like.

WordPress menu screeshot after we add previous code snippet to our functions.php — See that we got a new option in our WordPress menu dashboard

How to use it in our theme

So, after we have registered our WordPress menu in our functions.php, it is time for use to use it in our theme. In order to activate our WordPress menu inside a theme, we have to use wp_nav_menu() function, provided by WordPress. This function accepts an array of 18 arguments. For more info about wp_nav_menu() we can visit official WordPress docs. For now, we will use only the first argument 'theme_location'.

This arugmet accepts a string that we used when we were registering our menu in functions.php. We used 'primary-menu' as our slug (take a look at code snippet above).

<?php 
//This piece of code we will add in a place
//where we want our menu to be show
wp_nav_menu(
    array(
        'theme_location' => 'primary-menu',
    )
); 

?>

We should add this code snippet where we want our menu to be positioned inside our theme. Since we are using FREE HTML template by Nathan, we are going to put this piece of code in our header.php. Let’s see how our header.php file looks now.

<?php

/**
 * The header for our theme
 *
 * This is the template that displays all of the 
 * <head> section and opening body tag
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package theme
 */
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">

    <?php wp_head(); ?>
</head>

<body>
    <header class="header sticky">
        <div class="container">
            <?php the_custom_logo(); ?>
            <?php wp_nav_menu(
                array(
                    'theme_location' => 'primary-menu',
                )); ?>
        </div>
    </header>

We can see that our code is much, much cleaner than when we first started with this series of articles. That is what is cool about WordPress. It offers so many functionalities that can help us write faster, better and more maintainable code.

Unlock the Full Potential of WordPress Today! 🚀

Are you tired of struggling with WordPress? Ready to become a confident, skilled WordPress user?

Don’t miss this comprehensive course by renowned expert Nat Miletic! 🔥

What you’ll gain:

✅ A solid understanding of WordPress fundamentals
✅ Step-by-step guidance on hosting setup and installation
✅ Mastery over plugins, console, themes, and WooCommerce
✅ Proven SEO strategies to boost your site’s visibility
✅ Expert techniques for fine-tuning performance

🎯 Transform your WordPress experience and create stunning websites with ease. Join hundreds of satisfied learners and take your skills to the next level! 👉 Click here to enroll in the Ultimate WordPress Course by Nat Miletic now!“
Ad

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like Array entries method in JavaScript