Skip to content

Instantly share code, notes, and snippets.

@zslabs
Forked from awshout/foundation3-navbar-menu.php
Created December 17, 2012 16:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zslabs/4319430 to your computer and use it in GitHub Desktop.
Save zslabs/4319430 to your computer and use it in GitHub Desktop.
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. If you choose to not use wp_list_pages the page_walker is not needed.
<?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 || in_array('current-menu-ancestor', $element->classes)) ? '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)) {
$item_html = str_replace('</a>', '</a><a href="'.esc_attr($item->url).'" class="flyout-toggle"><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
http://forrst.com/posts/Using_Short_Page_Titles_for_wp_list_pages_Wordp-uV9
*/
class page_walker extends Walker_Page {
function start_el(&$output, $page, $depth, $args, $current_page) {
$indent = ($depth) ? str_repeat("\t", $depth) : '';
extract($args, EXTR_SKIP);
$classes = array('page_item', 'page-item-'.$page->ID);
if (!empty($current_page)) {
$_current_page = get_page( $current_page );
if (isset($_current_page->ancestors) && in_array($page->ID, (array) $_current_page->ancestors) )
$classes[] = 'current_page_ancestor';
if ($page->ID == $current_page)
$classes[] = 'current_page_item active';
elseif ($_current_page && $page->ID == $_current_page->post_parent)
$classes[] = 'current_page_parent';
} elseif ($page->ID == get_option('page_for_posts') ) {
$classes[] = 'current_page_parent';
}
if (get_children($page->ID))
$classes[] = 'has-flyout';
$classes = implode(' ', apply_filters('page_css_class', $classes, $page));
$output .= $indent.'<li class="'.$classes.'">';
$output .= '<a href="'.get_page_link($page->ID).'" title="'.esc_attr(wp_strip_all_tags($page->post_title)).'">';
$output .= $args['link_before'].$page->post_title.$args['link_after'];
$output .= '</a>';
}
function end_el(&$output, $item, $depth) {
$output .= "</li>\n";
}
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"sub-menu flyout\">\n";
}
function end_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent</ul>\n";
}
} // end page walker
?>
@zslabs
Copy link
Author

zslabs commented Dec 17, 2012

Added-in check for top-level ancestors (so they can get the 'active' class as well for proper menu highlighting

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment