Skip to content

Instantly share code, notes, and snippets.

@pnomolos
Forked from awshout/foundation4-topbar-menu.php
Last active December 18, 2015 21:19
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 pnomolos/5846832 to your computer and use it in GitHub Desktop.
Save pnomolos/5846832 to your computer and use it in GitHub Desktop.
Nav Walker for Wordpress + Foundation 4 for your top nav menu.

Adding a Foundation Top Bar to WordPress

Foundation_Walker_Nav_Menu.php should be required 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 'label' class on a menu item to create a menu section title

Foundation Top Bar Doc: http://foundation.zurb.com/docs/components/top-bar.html

<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(array('theme_location' => 'your_theme_location')); ?>
<?php foundation_top_bar(array('theme_location' => 'your_theme_location_right'), true); ?>
</section>
</nav>
</div>
<?php
// You'll want to include this file from functions.php, and add both theme support and register_nav_menus calls there
//
// add_theme_support('menus');
// 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'
// ));
class Foundation_Walker_Nav_Menu 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 && strlen($output)) ? '<li class="divider"></li>' : '';
$classes = empty($item->classes) ? array() : (array)$item->classes;
if(in_array('label', $classes)) {
$output .= '<li class="divider"></li>';
$item_html = preg_replace('/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html);
}
if (in_array('divider', $classes)) {
$item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '', $item_html );
}
$output .= $item_html;
}
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n<ul class=\"sub-menu dropdown\">\n";
}
}
function foundation_top_bar($options = array(), $is_right = false) {
$options += array(
'container' => false,
'menu_class' => '',
'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 Foundation_Walker_Nav_Menu()
);
$options['menu_class'] += ' ' . ($is_right ? 'right' : 'left');
return wp_nav_menu($options);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment