Skip to content

Instantly share code, notes, and snippets.

@Narga
Forked from awshout/foundation4-topbar-menu.php
Created March 13, 2013 07:28
Show Gist options
  • Save Narga/5149983 to your computer and use it in GitHub Desktop.
Save Narga/5149983 to your computer and use it in GitHub Desktop.
Adding a Foundation Top Bar to WordPress
foundation-topbar-menu.php and foundation-topbar-walker.php should be included in the WordPress functions.php file.
The code in foundation-topbar.php should be added below the body tag in header.php
Setup a menu in WordPress admin under Appearance > Menus
Use the section class on a menu item to create a menu section title
Foundation Top Bar Doc: http://foundation.zurb.com/docs/components/top-bar.html
<?php
add_theme_support('menus');
/*
http://codex.wordpress.org/Function_Reference/register_nav_menus#Examples
*/
register_nav_menus(array(
'top-bar-l' => 'Left Top Bar', // registers the menu in the WordPress admin menu editor
'top-bar-r' => 'Right Top Bar'
));
/*
http://codex.wordpress.org/Function_Reference/wp_nav_menu
*/
// the left top bar
function foundation_top_bar_l() {
wp_nav_menu(array(
'container' => false, // remove nav container
'container_class' => 'menu', // class of container
'menu' => '', // menu name
'menu_class' => 'top-bar-menu left', // adding custom nav class
'theme_location' => 'top-bar-l', // 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' => 5, // limit the depth of the nav
'fallback_cb' => false, // fallback function (see below)
'walker' => new top_bar_walker()
));
} // end left top bar
// the right top bar
function foundation_top_bar_r() {
wp_nav_menu(array(
'container' => false, // remove nav container
'container_class' => '', // class of container
'menu' => '', // menu name
'menu_class' => 'top-bar-menu right', // adding custom nav class
'theme_location' => 'top-bar-r', // 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' => 5, // limit the depth of the nav
'fallback_cb' => false, // fallback function (see below)
'walker' => new top_bar_walker()
));
} // end right top bar
?>
<?php
/*
Customize the output of menus for Foundation top bar classes
*/
class 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, $args) {
$item_html = '';
parent::start_el($item_html, $item, $depth, $args);
$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";
}
} // end top bar walker
?>
<div class="top-bar-container fixed contain-to-grid">
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<?php foundation_top_bar_l(); ?>
<?php foundation_top_bar_r(); ?>
</section>
</nav>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment