Setting Up Navigation In WordPress

I think you’ll agree when I say that website navigation in WordPress is one of the more important areas of creating a template. After all, without navigation, our visitors are going to have a mightily challenged experience while attempting to traverse our sites. With this in mind, in this post, I’m going to cover some of the more critical areas of setting up site navigation in template files.

If you’re creating your own theme in WordPress, you may ask yourself a question. “Hey, how do I add a menu to my WordPress theme?” Well, there are a few steps to complete this task and I’m going to go over them in this post.

add_theme_support

The very first thing you need to do is to get WordPress to recognize that you would like to include a menu in your theme. Without doing this, you’ll notice that there’s no link to “Menus” in your WordPress admin area. In order to have the Menus link appear, we need to add some code to the functions.php file.

add_theme_support( 'menus' );

By adding the above line of code into your PHP block inside the functions.php file, you’ll signal to WordPress that it should give you the ability to create menus for your theme. Once it’s done, you’ll notice that you can now roll over the “Appearance” link in the admin and the link, “Menus” will appear. You can now begin creating custom menus. Before you do that though, you should probably educate yourself on the add_theme_support function and its parameters. The parameter, “menus” is just one of them.

register_nav_menus

Once you’ve got a menu or two created inside the WordPress admin, you need to go back to the functions.php file and tell WordPress that it should actually use the menus you created. There’s a fairly simple way to do this – it again involves a bit of code.

function register_theme_menus() {
  register_nav_menus(
    array(
      'primary-menu'  => __( 'Primary Menu' )      
    )
  );
}
add_action( 'init', 'register_theme_menus' );

There are a few new functions in use here. First, the “register_theme_menus” functions is one we created to hold another function we’ll discus below. This function will encapsulate all menus in our theme.

The second function is called, “register_nav_menus.” This function registers multiple custom navigation menus in the custom menu editor and allows for the creation of custom menus in the dashboard for use in your theme. If you are were interested in only using one menu in your theme, you may want to go ahead and take advantage of the “register_nav_menu” for that. The reason we’re using the function that contains an array is because if we decide to add menus in the future, this function will simplify their addition.

The register_nav_menus function requires the use of a $locations parameter and, again, is used via an array. You can see this in the above code. I’ll show you another example of an array used with multiple menus here:

register_nav_menus( 
  array(
    'pluginbuddy_mobile' => 'PluginBuddy Mobile Navigation Menu',
    'footer_menu' => 'My Custom Footer Menu',
  ) 
);

The $locations parameter uses the menu location slugs and their descriptions.

If you go back to the example above this last one, you’ll see that we have one last function that’s called “add_action.” If I’m not mistaken, I believe I discussed this function in previous posts, but if not, I’ll go over it here.

In this case, the add_action function calls the register_theme_menus as WordPress is initializing. You can see this via the two parameters used inside the function. If you take a look at the add_action function here:

<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

You can see that we’re taking advantage of the $hook and $function_to_add parameters. The $hook parameter is name of the action to which $function_to_add is hooked. So like I said above, when WordPress initializes, the function gets called. If you’re familiar with PHP or coding in general, you’ll recognize that functions just sit there in sort of a reserve until they are called later on.

So, just to recap what went on above:

1. WordPress had no idea that we wanted to use menus inside our theme. We used the “add_theme_support” function to solve that problem. By doing that, the “Menus” link inside the admin area was enabled.

2. Once we created a menu in the admin area, it sat there in limbo. WordPress didn’t know what to do with it or what “menu area” to attach it to. In order to rectify this issue, we registered a new menu location inside of the functions.php file by using the “register nav menus” function. We told WordPress that we’d like to create an area in which to attach our menu to.

3. Lastly, since our new location was sitting idly inside a function, we need to make it come alive. In order to do this, we used the “add_action” function inside the functions.php file. This called the previous function.

Now, you’ll notice that I’m not covering the other side of creating a menu – the side inside the admin area. Since that’s more of a user interface post and not a development post, I’m going to go over that in another article. For now, I’m simply covering the programming aspect of creating menu locations inside WordPress template files.

wp_nav_menu

Now that we’ve got everything written inside our functions.php file, along with having a menu set up in the admin of our site, we can go ahead and place some code in the header.php file that will tell WordPress exactly where our menu should be located in our template. The function we’re going to use to tell WordPress this is the “wp_nav_menu” function. This function will display the menu that we specify from the “Appearance -> Menus” page.

Before we use the function though, we have to establish a few parameters. We need to create an array that will answer some questions. If you take a look at the functions page in the WordPress Codex, you’ll see all the parameters for this function. While we’re not going to take advantage of them all here, it’s a good idea to scan over what each parameter is capable of for an idea of how you might use them in the future. Check out this code:

$defaults = array(
  'container' => false,
  'theme_location'  => 'primary-menu',
  'menu_class'  => 'no-bullet'
);
wp_nav_menu( $defaults );

In the above code, you can see the array and the parameters we’ve chosen to use. Again, you can visit the Codex page to see what each of these does. Like any variable and just like the functions we wrote in our functions.php page, the “$defaults” variable with its array isn’t going to do much unless we call it. That’s where the wp_nav_menu function comes in. It’ll call the $defaults variable and show our “primary-menu” in the header of our template.

Well, that’s all for my WordPress navigation post. If you have any questions or comments, please leave them below. Also, if you’re interested in more posts that cover WordPress, please check out my WordPress category. Thanks!