Developing WordPress Themes - Adding Menus

In the previous article, we created a very simple template, with some template and conditional tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    <title><?php wp_title("-", true, "right"); ?> - <?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
</head>
<body>
    <div class="content">
        <?php if (have_posts()) {
            while (have_posts()) {
                the_post();
                the_content();
            }
        }; ?>
    </div>
    <?php wp_footer(); ?>
</body>
</html>

Next, we are going to add menus to our template. This will allow users to define menus in the admin panel and add onto the page.

To use menus in your theme, you first need to provide a location for the menu links to be displayed inside your template file, and then register different menus into those locations.

Defining Menu Locations

Use wp_nav_menu() in your template files to define where you want menus to appear.

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Change header-menu with the machine name of the menu location.

Register Menu

Registering a menu simply means assigning it to a location, as well as giving it a human-readable name. You'd register menus inside the functions.php file.

register_nav_menu('header-menu',__( 'Header Menu' ), 'brew');

The header-menu is the machine-name of the menu location name, while Header Menu is the human-readable name, which is wrapped inside __() to make it translatable. brew is the text domain which is used in translation.

We can use register_nav_menu to register one menu, or register_nav_menus to register multiple menus.

register_nav_menus(
  array(
    'header-menu' => __( 'Header Menu' ),
    'footer-menu' => __( 'Footer Menu' )
  )
);

Lastly, we need to ensure that our menus are registered after the init action.

function brew_prepare_menu () {
    register_nav_menu('header-menu', __('Header Menu'), 'brew');
    register_nav_menu('action-menu', __('Action Menu'), 'brew');
    register_nav_menu('footer-menu', __('Footer Menu'), 'brew');
}

add_action('init', 'brew_prepare_menu');

Adding Menus

And now you can go to Appearance > Menus, which is available now because we have a menu registered. If you go to the 'Manage Locations' tab, we can see our menu location under 'Theme Location'.

Let's go back to the 'Edit Menus' tab and create a new menu called 'Header Menu'.

Go back to the 'Manage Locations' and now you can assign the 'Main Menu' menu we created using the GUI, into the 'Header Menu' menu location we defined in our template file.

Carry on adding more menu locations and menus. For example, this 'Social Menu' will be placed inside the 'Header Menu' location.

Adding Classes

You can give the <ul> element of the menu a class or id by adding to the array passed to wp_page_menu().

<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => 'container', 'menu_class' => 'menu',) ); ?>

Will produce this markup.

<div class="container">
    <ul id="menu-main-menu" class="menu">
        ...
        <li>...</li>
        ...
    </ul>
</div>

If you followed the steps above, you should have something like this:


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
        <title><?php wp_title("-", true, "right"); ?> - <?php bloginfo('name'); ?></title>
        <?php wp_head(); ?>
    </head>
    <body>
        <div class="header-bar">

            <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => 'header-menu-container', 'menu_class' => 'header-menu',) ); ?>

        </div>
        <div class="content">

            <?php if (have_posts()) {
                while (have_posts()) {
                    the_post();
                    the_content();
                }
            } ?>

            <?php wp_nav_menu( array( 'theme_location' => 'footer-menu', 'container_class' => 'footer-menu-container', 'menu_class' => 'footer-menu',) ); ?>
        </div>
        <?php wp_footer(); ?>

    </body>
</html>

If you enjoyed this article, why not take a look at the rest of the series on Developing WordPress Themes!

comments powered by Disqus