Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WordPress Menu & Walker for ZURB's Foundation 3 Nav Bar
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
<?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>';
}
?>
<?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
?>
<?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
?>
@adims

This comment has been minimized.

Copy link

commented Nov 17, 2012

The problem I am facing is that, whenever I hover or click the menu item, the flyout does not appear. I am using foundation framework.

@awshout

This comment has been minimized.

Copy link
Owner Author

commented Dec 6, 2012

Ah, GitHub doesn't notify me of comments on gists? That's not nice of them.
I apologize for not responding to this before. I will take a look at the code again.

@awshout

This comment has been minimized.

Copy link
Owner Author

commented Dec 7, 2012

For some reason I had 'depth' => 1. Sometimes it's the little things. Should be fixed now!

@morkle

This comment has been minimized.

Copy link

commented Feb 28, 2013

I'm having the adverse issue. I've used this code, is there any way to get the dropdown to not show up UNTIL i click the arrow? Right now it shows up automatically on iPhones, and iPads.

@awshout

This comment has been minimized.

Copy link
Owner Author

commented Feb 28, 2013

Hi @morkle, I'm sorry I haven't come across this problem before. Do the menus work properly on other devices?

@morkle

This comment has been minimized.

Copy link

commented Feb 28, 2013

@awshout I'm not sure about other devices. It works great full screen on my PC, but when I go to my iPhone or iPad it has the menu's already popped out and I have to click the arrow for them to shrink back down.

@awshout

This comment has been minimized.

Copy link
Owner Author

commented Feb 28, 2013

That's strange. If you can link to a site or some code, I'd be happy to take a look.

@morkle

This comment has been minimized.

Copy link

commented Feb 28, 2013

@awshout If you could look at it, that'd be fantastic. I've been pulling my hair out over this foundation menu the last few days.

My site is bit.ly/ZyyN68

@awshout

This comment has been minimized.

Copy link
Owner Author

commented Feb 28, 2013

@morkle check the href on .flyout-toggle. Should be href="#", but it's only href

@morkle

This comment has been minimized.

Copy link

commented Feb 28, 2013

I seriously can't believe it was something that simple. It's working on my cellphone, just gotta check the iPad when I get home.

Man, three days of this and your code fixed it immediately. I seriously can't think you enough @awshout!

@awshout

This comment has been minimized.

Copy link
Owner Author

commented Feb 28, 2013

I know the feeling. 😄 Happy to help

@ghost

This comment has been minimized.

Copy link

commented Mar 4, 2013

awshout

I can't begin to tell you how much this walker and function have helped me. Thank you, thank you.

I do have one problem though and I cannot get a third level flout to appear. Any suggestions? I tried depth = 0 and depth = 3.

@awshout

This comment has been minimized.

Copy link
Owner Author

commented Mar 4, 2013

@pointclear Awesome! You're welcome. Unfortunately, the Foundation 3 nav bar didn't support a 3rd level. The top bar does though.

@ghost

This comment has been minimized.

Copy link

commented Mar 5, 2013

Thanks! That helped. I just used the left side of the top-nav and removed the fixed div.

@joviverheyen

This comment has been minimized.

Copy link

commented Mar 5, 2013

Hi, i am using foundation and wordpress to create my portfolio site. For some reason, on smaller screens the dropdown doesn't work. I think your code might help me, but i'm fairly new to wordpress. Can you explain in a little more detail what i have to do?

You can check out my website at www.joviverheyen.be

@awshout

This comment has been minimized.

Copy link
Owner Author

commented Mar 5, 2013

Hi @joviverheyen, nice website! It looks like you're using the top bar from Foundation 4 (Reverie theme maybe?). This gist is for the nav bar in Foundation 3. You can look at my gist for the top bar I've updated it to work with Foundation 4. Also be sure to carefully read the Foundation Docs for the top bar. It's important to use their exact markup or the top bar doesn't function properly.

@joviverheyen

This comment has been minimized.

Copy link

commented Mar 6, 2013

I wasn't actually using reverie, but thanks for pointing it out to me. I installed the theme and I got it working now :)

@visiondesignzoo

This comment has been minimized.

Copy link

commented Jun 21, 2013

Excellent. Everything works. After small adjustments, it also works for Foundation 4.

@morkle

This comment has been minimized.

Copy link

commented Oct 11, 2013

Any reason why my walker would stop working after 6 months? On Foundation 3, and it's just not displaying the set drop down menu. Nothing's changed, what could have happened? Thanks!

@rozeykex

This comment has been minimized.

Copy link

commented Nov 12, 2013

@morkle i had to add a style of my own to get the drop down menu to show in ie. it needed .menu-item:hover .flyout { display:block;} hope that helps :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.