-
-
Save awshout/3184243 to your computer and use it in GitHub Desktop.
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 | |
/* | |
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 | |
?> |
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.
I wasn't actually using reverie, but thanks for pointing it out to me. I installed the theme and I got it working now :)
Excellent. Everything works. After small adjustments, it also works for Foundation 4.
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!
@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 :)
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