Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save bryanwillis/af21d7e7082b6842e9d3 to your computer and use it in GitHub Desktop.
Save bryanwillis/af21d7e7082b6842e9d3 to your computer and use it in GitHub Desktop.
Add Foundation Top-Bar Navigation to Wordpress Genesis Child Theme
// A Fork of: http://garethcooper.com/2014/01/zurb-foundation-5-and-wordpress-menus/
/**
*
* Do Primary Top-Bar Navigation
*
**/
add_action('genesis_header', 'custom_do_top_bar_navigation', 11);
function custom_do_top_bar_navigation() { ?>
<nav class="nav-primary top-bar" data-topbar itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation">
<section class="top-bar-section">
<?php
$options = array(
'theme_location' => 'primary',
'container' => false,
'depth' => 3,
//'items_wrap' => '<ul id="%1$s" class="right %2$s">%3$s</ul>', // Right or left for nav alignment
'walker' => new walker_primary_nav_menu()
);
wp_nav_menu($options);
?>
</section>
</nav>
<?php
}
/**
*
* Apply '.dropdown' to submenus using a walker
*
**/
class walker_primary_nav_menu extends Walker_Nav_Menu {
// add classes to ul sub-menus
function start_lvl(&$output, $depth) {
// depth dependent classes
$indent = ( $depth > 0 ? str_repeat("\t", $depth) : '' );
// build html
$output .= "\n" . $indent . '<ul class="dropdown">' . "\n";
}
}
Adding the Foundation5 Top-Bar to Wordpress using a Genesis Child Theme
Remember to add/use the correct Foundation style and javascript files:
> Javascript
- jquery.js
- foundation.js
- foundation.topbar.js
- Reinitialize: $(document).foundation();
> SCSS
- @import "foundation/settings";
- @import "foundation/components/top-bar";
// Top-Bar Example Settings - http://foundation.zurb.com/docs/components/topbar.html
$(document).foundation({
topbar : {
sticky_class : 'sticky',
custom_back_text: true, // Set this to false and it will pull the top level link name as the back text
back_text: 'Back', // Define what you want your custom back text to be if custom_back_text: true
is_hover: true,
mobile_show_parent_link: false, // will copy parent links into dropdowns for mobile navigation
scrolltop : true // jump to top when sticky nav menu toggle is clicked
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment