Underscores Menu Exercise

If you download and install an underscores-based starter theme (underscores.me), you will notice that it comes with only one menu location (called Primary in the dashboard’s menu area):

Menu Location

In this exercise, you will add another menu or two. Then you make one work with font-awesome.

Introducing Functions.php

One of the mandatory files in a WordPress theme is functions.php. It acts like a plugin for your site, calling functions that happen when the site loads. With functions.php we can run setup functions, modify (filter) default WordPress output or other functionality, or add or remove features, etc.

As an aside: as you get more comfortable with theming, you might write plugins to achieve various aims rather than putting such code into functions. The reason for this is that a plugin is portable: it can be easily installed on other sites, whereas functions.php is obviously tied to the theme. At this point, though, file that thought away for future use.

Anyway, open functions.php in your editor.

Scoll down about 40 or 50 lines. You are looking for the register_nav_menus() function. It should look more-or-less like this:

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
    'menu-1' => esc_html__( 'Primary', 'guitarmania' ),
) );

(The theme name, the second argument passed to the esc_html sanitizing function, will be whatever you named the theme at underscores.me ).

What do these elements mean? There’s really only two things we need to make note of here.

  • the register_nav_menus() function is passed an argument in the form of an associative array
  • that array links machine-understandable names with human-friendly names. The former are used in template files to call that particular menu location. The latter are the names seen in the Dashboard menu locations area.

To illustrate, copy the single line that is inside the array and paste it twice, each copy on its own line. Change the number in the first part (ie menu-1, menu-2, etc) and the human-friendly names to the way I have done below:

// This theme uses wp_nav_menu() in three locations.
register_nav_menus( array(
    'menu-1' => esc_html__( 'Primary Menu', 'guitarmania' ),
    'menu-2' => esc_html__( 'Secondary Menu', 'guitarmania' ),
    'menu-3' => esc_html__( 'Social Menu', 'guitarmania' ),
) );

Now go to the Menu area of the Dashboard. You should now see in the MENU LOCATION setting area all three menu locations.

menu locations

The key here is that the human-readable text can have spaces and special characters, whereas the machine naming has to follow typical coding naming conventions.

I do not, moreover, have to keep the menu-1, menu-2, menu-3 machine names as above. I typically change the machine names to something easier to remember, like the following:

// This theme uses wp_nav_menu() in three locations.
register_nav_menus( array(
    'menu-primary' => esc_html__( 'Primary Menu', 'guitarmania' ),
    'menu-secondary' => esc_html__( 'Secondary Menu', 'guitarmania' ),
    'menu-social' => esc_html__( 'Social Menu', 'guitarmania' ),
) );

Since it is this name by which we will call the associated menu in template files, it makes sense to me to name them as above, but you may find other names more obvious for each project.

Menu Locations in Template Files

If you go to the front page of your site now, you will find that your menu does not show up (or worse). The reason is that we changed the machine-name from menu-1 to menu-primary.

We will fix that first. Open header.php in your editor.

Scroll down to where you find the NAV element, somewhere near line 40 after the site-branding section.

<nav id="site-navigation" class="main-navigation" role="navigation">
   <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'midterm' ); ?></button>
   <?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->

Change the value associated with the theme_location key to menu-primary as below:

 <?php wp_nav_menu( array( 'theme_location' => 'menu-primary', 'menu_id' => 'primary-menu' ) ); ?>

You will no doubt have noticed that there is another key here: menu_id. This is the ID that WordPress will attach to the menu in the outputted HTML so that you can refer to it uniquely in your CSS.

A New Menu Location

In the Dashboard, make a menu called Social Links, or something to that effect. Add links to Facebook, Pinterest, YouTube, and Twitter. For the purposes of this exercise, just link to the front pages of those sites: if this were a real site, you would of course link to more specific pages on those sites.

Don’t forget to assign this new menu to the Social Links menu location,

Now back to your code editor: copy the entire NAV element from the header.php file and then open the footer.php file.

Paste your copied content just inside the FOOTER element inside footer.php.

We will need to change a few things here:

  • change the NAV element ID and class
  • remove the BUTTON element: that is for the hamburger menu in the header
  • change the value of the THEME_LOCATION to the machine-readable name
  • change the value of the MENU_ID to a unique ID

We should be left with something like this:

<nav id="social-navigation" class="social-navigation" role="navigation">
   <?php wp_nav_menu( array( 'theme_location' => 'menu-social', 'menu_id' => 'social-menu' ) ); ?>
</nav><!-- #social-navigation -->

Save your footer.php file and then go to any page in your site.

You should now see the links to your social sites, in presumably unstyled text.

In part two of this menu exploration, we will add font awesome and learn about the enqueuing functions that are fundamental to WordPress.