Navigation

We discontinue development of the required+ Foundation theme – here is why.×

Finding what you are looking for is what navigation is all about. Read through what Foundation provides in terms of navigation. Here is how required+ Foundation implements it.

WordPress Menus

The theme makes use of the brilliant and simple Nav Menus in WordPress. Giving you three menus in the child theme to use or customize.

Implement Menus

A powerful custom Walker Class is in the parent theme to build the navigation elements Foundation provides you with, learn how.

Subnavigation

Building a sub navigation on your own is easy, we give you a helping hand with a smart little function. Some of our page templates already use it.


When you install required+ Foundation and the child theme you will find 3 existing menu locations for you to use.

Primary Menu

This is the primary navigation element on your site. When you install the theme and no menu is selected for this menu location, a warning helps you getting started with the Navigation Menus in WordPress. By default the navigation in the primary menu location looks like the standard Nav Bar from Foundation.

The primary menu can be found in the required-foundation/functions.php, required-foundation/nav.php and required-foundation/nav-top-bar.php (only used in the Off Canvas page template by default) files.

Secondary Menu

The secondary menu is located in the footer and uses the Link list element from Foundation, combined with the helper class right.

You will find the code in required-foundation/functions.php and required-foundation/footer.php.

Meta Menu

We added this menu in the child theme to show you how to build add a custom menu location in your theme. It uses the Link list element from Foundation, combined with the helper class right.

You will find the code in required-starter/functions.php and required-starter/header.php.


Implement Menus

Creating custom menus in your design is necessary from time to time, the following guide will help you to add your own menus or remove menus used in required+ Foundation.

Adding your own menu location

First you need to create your own menu location with WordPress register_nav_menus() in your child theme.

The following example is used to register the Meta Menu in our required+ Starter child theme:

// Register an additional Menu Location
register_nav_menus( array(
    'meta' => __( 'Meta Menu', 'requiredstarter' )
) );

Note: We register the additional menu location in the child theme setup function required_starter_themesetup() located in required-starter/functions.php.

Show the menu in the template

WordPress wp_nav_menu() function is used to display the registered menu in your template.

The following example is used to display our Meta Menu navigation in the required-starter/header.php:

wp_nav_menu( array(
    'theme_location' => 'meta',
    'container' => false,
    'menu_class' => 'inline-list right', // classes on ul
    'fallback_cb' => false // no menu is displayed by default
) );

Demo: The code above generates a navigation looking like this:

More examples

The following examples show you how we use wp_nav_menu to create all the default navigation elements:

Nav Bar

Note: Located in required-foundation/nav.php.

wp_nav_menu( array(
    'theme_location' => 'primary',
    'depth' => 2,
    'items_wrap' => '<ul class="nav-bar">%3$s</ul>',
    'fallback_cb' => 'required_menu_fallback', // workaround to show a message to set up a menu
    'walker' => new REQ_Foundation_Walker() // custom walker class
) );

Demo: The code generated by the example above could look like this:

Top Bar

Note: Located in required-foundation/nav-top-bar.php (used in Off Canvas layout).

wp_nav_menu( array(
    'theme_location' => 'primary',
    'depth' => 0,
    'items_wrap' => '<ul class="left">%3$s</ul>',
    'fallback_cb' => 'required_menu_fallback', // workaround to show a message to set up a menu
    'walker' => new REQ_Foundation_Walker( array(
        'in_top_bar' => true,
        'item_type' => 'li'
    ) ),
) );

Advanced: Custom Walker Class

To display Foundation navigation elements with flyouts and dropdowns like Top Bar and Nav Bar with the correct markup, we extend the Walker_Nav_Menu with our own custom walker REQ_Foundation_Walker located in required-foundation/includes/req-foundation.php.

Default options

The custom walker can has two options, by default the are:

$defaults = array(
    'item_type' => 'li',
    'in_top_bar' => false,
);
  • item_type (string) list item li or dd
  • in_top_bar (bool) is the navigation used in the top bar?

Sub Menus

What do we mean by Sub Menus? Let’s say your pages have child pages or even grand child pages and you need to display them in your navigation. That’s when required_side_nav( $args ) is coming in handy. A helper function to display child pages as used in our page templates Left Sub Nav and Off-canvas.

Default options

The function comes with default options in store and makes it easy for you to customize the output for your needs. Here are the default parameters:

$defaults = array( 
    'show_home' => false, 
    'depth' => 1, 
    'before' => '<ul class="side-nav">', 
    'after' => '</ul>',
    'item_type' => 'li',
);
  • show_home (bool) link home as first nav item
  • depth (int) levels of child pages
  • before (string) opening list element
  • after (string) closing list element
  • item_type (string) list item li or dd

Examples

Example usage of required_side_nav( $args ) helper function in the theme.

Left Sub Nav example

Using the helper with the default options:

// Check for existance 
if ( function_exists( 'required_side_nav' ) ) 
    required_side_nav(); // no options given

Off-canvas example

As you can see in the following code, we customize the before and after options to display another navigation style from Foundation.

// Check for existance 
    if ( function_exists( 'required_side_nav' ) ) { 
        // Customize for use in off-canvas-page.php 
        $args = array( 'before' => '<ul class="tabs vertical">', 'after' => '</ul>', ); 
        required_side_nav( $args ); 
}

Using a filter

If you wish to overwrite the default options only on certain pages you can drop a function like the following in your functions.php:

// Display link back home on page with ID 8 and it's child pages function
required_themes_side_nav_filter ( $args ) { 
    global $post; 
    // 8 is the specific page ID, use your own 
    if ( $post->post_parent == 8 || $post->ID == 8 ) { 
        $args['show_home'] = true; 
    } return $args; 
} 
add_filter( 'req_side_nav_args', 'required_themes_side_nav_filter' );

Advanced: Overwrite our function

The function is pluggable which means you can overwrite it in your child theme or plugin if you like to do something different with it:

function required_side_nav( $nav_args = '' ) { 
    // Your custom code here
}

It’s about style

Learn more about using stylesheets and what stylesheets are already there when you create a child theme based on required+ Foundation. Make it look unique!

The stylesheets »