Skip to content

Menus

Menus allow you to create navigation menus that can be managed via the Wordpress admin interface rather than having to hardcode the links into the template files. To create and enable a menu, take the following steps:

Register a menu location

In the functions.php file, there is a function called bs_register_menus. In that function, menu locations are defined and given names. E.g. :

add_action( 'after_setup_theme', 'bs_register_menus' );
function bs_register_menus() {
  register_nav_menu( 'bsmenu-main', 'Main Navigation' );
  register_nav_menu( 'bsmenu-homepage', 'Homepage Hero Menu' );
  register_nav_menu( 'bsmenu-sites', 'Bridge School Sites' );
}

Make sure you use a unique name for the menu when you register it. For consistency, try to adhere to the same naming convention used for the other menus. bsmenu-<menu_name>.

Include the tempate location in a template file

Once you have registered the menu, you can add it to your template. Make sure you use the same name for the tempate that you defined above. The following example defines the lcoation for the Bridge School Sites menu in the footer:

<?php
$options = array(
  'theme_location' => 'bsmenu-sites',
  'container' => 'nav',
  'container_id' => 'bs-sites-menu',
  'walker' => new BS_Menu_Walker_FooterSites(),
  'items_wrap' => '%3$s'
);
wp_nav_menu( $options );
?>

Some basic markup changes can be made using the options object when creating the menu location. For more precise control of the generated markup though, you'll have to use a Menu Walker function.

The Menu Walker functions are defined in includes/menuwalkers.php. There is a separate walker function for each menu. Once a Menu Walker is defined, it can be referenced when outputting the menu in the template file. In the example above, we're using the BS_Menu_Walker_FooterSites Walker function. That function looks something like this:

Class BS_Menu_Walker_FooterSites extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $output .= sprintf( '<a href="%s" class="footer-link">%s</a>' . "\n", $item->url, $item->title );
  }
}

This allows us to have much more fine-grained control over the output of the menu for theming reasons.

Create a menu in the Admin interface

Once you have the completed the above steps, you can log into the Wordpress admin site and go to the Menus section (Appearance > Menus). There you can create a new menu. Populate the menu with existing pages or links to externals sites as necessary and rearrange them.

Assign your new menu to a location

Once your menu is created, click on the Manage Locations tab on the Menus page. Here you can define which menu you want to output for the Menu Locations that you've set up in your templates. Find the dropdown for your Menu Location and select your newly created menu. Note that setting a menu to be used for a menu location outputs that menu for all instances of that location. For example, the bsmenu-main location is included in two different places (once for the main navigation and once for the mobile version of the main navigation). By setting the Main Navigation Menu as the menu for the bsmenu-main menu location, it will be output in both of those instances.