readme.txt

Adding a Foundation 3 Nav Bar to WordPress

This code should be added to the WordPress functions.php file.

Call the menu in your theme by using <?php foundation_nav_bar(); ?>

Setup a menu in WordPress admin under Appearance > Menus

Note: the function main_nav_fb() could be used to echo an error instead of wp_list_pages() as a menu. Another option is to set 'fallback_cb' => false. If you choose to not use wp_list_pages() the page_walker is not needed.

Foundation 3 Navigation Docs: http://foundation.zurb.com/old-docs/f3/navigation.php

foundation3-navbar-menu.php

<?php
add_theme_support('menus'); 

/*
http://codex.wordpress.org/Function_Reference/register_nav_menus#Examples
*/
register_nav_menus( array(
	'main-menu' => 'Main Menu' // registers the menu in the WordPress admin menu editor
) );


/* 
http://codex.wordpress.org/Function_Reference/wp_nav_menu 
*/
function foundation_nav_bar() {
    wp_nav_menu(array( 
        'container' => false,             // remove menu container
        'container_class' => '',          // class of container
        'menu' => '',                     // menu name
        'menu_class' => 'nav-bar',        // adding custom nav class
        'theme_location' => 'main-menu',  // where it's located in the theme
        'before' => '',                   // before each link <a>
        'after' => '',                    // after each link </a>
        'link_before' => '',              // before each link text
        'link_after' => '',               // after each link text
        'depth' => 2,                     // limit the depth of the nav
    	'fallback_cb' => 'main_nav_fb',   // fallback function (see below)
        'walker' => new nav_bar_walker()      // walker to customize menu (see foundation-nav-walker)
	));
}


/*
http://codex.wordpress.org/Template_Tags/wp_list_pages
*/
function main_nav_fb() {
	echo '<ul class="nav-bar">';
	wp_list_pages(array(
		'depth'        => 0,
		'child_of'     => 0,
		'exclude'      => '',
		'include'      => '',
		'title_li'     => '',
		'echo'         => 1,
		'authors'      => '',
		'sort_column'  => 'menu_order, post_title',
		'link_before'  => '',
		'link_after'   => '',
		'walker'       => new page_walker(),
		'post_type'    => 'page',
		'post_status'  => 'publish' 
	));
	echo '</ul>';
}
?>

foundation3-navbar-walker.php

<?php
/* 
Customize the output of menus for Foundation nav bar classes
*/

class nav_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-flyout' : '';
		
        parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }	
	
    function start_el(&$output, $item, $depth, $args) {
        $item_html = '';
        parent::start_el($item_html, $item, $depth, $args);	
		
        $classes = empty($item->classes) ? array() : (array) $item->classes;	

        if(in_array('has-flyout', $classes) && $depth == 0) {
            $item_html = str_replace('</a>', '</a><a class="flyout-toggle" href="#"><span> </span></a>', $item_html);
        }
		
        $output .= $item_html;
    }

    function start_lvl(&$output, $depth = 0, $args = array()) {
        $output .= "\n<ul class=\"sub-menu flyout\">\n";
    }
    
} // end nav bar walker
?>

foundation3-page-walker.php

<?php
/*
Customize the output of page list for Foundation nav classes in main_nav_fb
*/
class page_walker extends Walker_Page {
    
    function start_el(&$output, $page, $depth, $args, $current_page) {
        $item_html = '';
    	parent::start_el($item_html, $page, $depth, $args, $current_page);
    	
    	$css_class = array('page_item', 'page-item-'.$page->ID);
    	
        if ( $args['has_children'] ) {
            $css_class[] = 'has-flyout';
        }
               
        $css_class = implode( ' ', apply_filters( 'page_css_class', $css_class, $page, $depth, $args, $current_page ) );
        
        $item_html = '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';

        $output .= $item_html;
    }

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $output .= "\n<a href=\"#\" class=\"flyout-toggle\"><span> </span></a><ul class=\"flyout $this->flyout_dir\">\n";
    }	

} // end page walker
?>