Show WordPress Primary Menu in Zurb Foundation header [_s theme ]

Question

I am creating a theme based on _s & Zurb's Foundation. I have pretty much got everything set up and ready to start into the CSS, but I am having issues getting the 'primary menu' to show on the top bar. I want to leave the 'left nav button' where it is, for a highlighted link (possibly contact us or similar), but I want to replace the current content in ul class="right" for the WordPress Primary Menu. Here is what I have in the current header id="masthead"

<header id="masthead" class="site-header" role="banner">
    <div class="row">
        <div class="site-branding">
            <h1 class="site-title">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </div>

<div class="contain-to-grid sticky">
    <nav id="site-navigation" class="top-bar" data-topbar data-options="sticky_on: large" role="navigation">
        <ul class="title-area">
        <li class="name">
            <h4><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                <?php bloginfo( 'name' ); ?></a></h4>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
        </ul>   
    <section class="top-bar-section">

    <!-- Right Nav Section -->
        <ul class="right">
            <li class="active"><a href="#">Right Button Active</a></li>
            <li class="has-dropdown">    
                <a href="#">Right Button Dropdown</a>
            <ul class="dropdown">    
                <li><a href="#">First link in dropdown</a></li>
            </ul>
            </li>
        </ul>

    <!-- Left Nav Section -->
        <ul class="left">
            <li><a href="#">Left Nav Button</a></li>
        </ul>
</section>
    </nav><!-- #site-navigation -->    
</div>
</div> <!-- row -->     
</header><!-- #masthead -->

Rose McKeon Rose McKeon · Accepted Answer · 2014-05-02T09:47:50

You need to use wp_nav_menu().

http://codex.wordpress.org/Function_Reference/wp_nav_menu

You will also need to use a walker which customises the output of wp_nav_menu() to match that of Foundation's top bar.

You can add this to your funtions.php

class guts_top_bar_walker extends Walker_Nav_Menu {

    function display_element( $element, &$children_elements, $max_depth, $depth = 0, $args, &$output ) {

        $element->has_children = !empty($children_elements[$element->ID]);
        $element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
        $element->classes[] = ( $element->has_children ) ? 'has-dropdown' : '';

        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

        $item_html = '';

        parent::start_el( $item_html, $item, $depth, $args, $id );

        $output .= ($depth == 0) ? '<li class="divider"></li>' : '';

        $classes = empty($item->classes) ? array() : (array) $item->classes;

        if ( in_array( 'section', $classes ) ) {
            $output .= '<li class="divider"></li>';
            $item_html = preg_replace('/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html);
        }

        $output .= $item_html;
    }

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $output .= "\n<ul class=\"sub-menu dropdown\">\n";
    }

}

You specify the walker within wp_nav_menu(). Replace the section area of the top bar in your header with the following;

<section class="top-bar-section">
  <?php wp_nav_menu(array('container' => false, 'menu_class' => 'left', 'theme_location' => 'primary-left', 'fallback_cb' => false, 'walker' => new guts_top_bar_walker() )); ?>

  <?php wp_nav_menu(array('container' => false, 'menu_class' => 'right', 'theme_location' => 'primary', 'walker' => new guts_top_bar_walker() )); ?>
</section>

Even if you want a highlighted link to remain in the left section, I'd recommend setting up another menu so that you can make future changes directly through the wordpress dash, instead of requiring edits to your theme.

You can register a new menu area like this in functions.php:

register_nav_menu( 'primary-left', __( 'Left Navigation Menu', 'guts' ) );

more info here: http://codex.wordpress.org/Function_Reference/register_nav_menus

Show WordPress Primary Menu in Zurb Foundation header [_s theme ]

1 Answers