In a previous blog post, I talked about Theme Development From Scratch w/ Underscores & Foundation. However, I really didn’t go into a lot of detail about how to use Foundation with WordPress. The main reason for this is the fact that Foundation has such great  One of the first problems lost of people are going to run into is how to use Foundation’s Top Bar with their WordPress Menu.

Just a warning – this article is more of a tool and less of a tutorial compared to some of my other ones. My goal is to give code that you can use to get WordPress menus to work with Foundation’s Top Bar. Hopefully you will be able to use this code as a starting point towards making your own walker if you need to – but I don’t really go into that too much because honestly I haven’t messed around with it that much.

Also pretty much all of the code in this is based off of this Gist, so big props to the author! I made a few minor modifications but the credit definitely goes to him for figuring it out.

To start off with, lets take a look at the basic outline of how our Top Bar will be setup. This setup is taken directly from the Foundation Docs on the Top Bar:

Please note that although the file above is saved as a .html file, this would be in your header.php file. I only changed the file type to get better syntax colouring.

Once you have that done, its time to move to your functions.php file. The first thing you need to do is make sure that your menu is being registered. If you used Underscores and followed along with my Theme Development From Scratch w/ Underscores & Foundation post, then you should have a line that reads:

If not make sure you add it. You then use the add_action( ‘after_theme_setup’, ‘theme_slug_setup’ ) action assuming you name your function theme_slug_setup. Remember, if you followed the steps in my previous post, then this should all be done for you – so don’t worry about it if that’s the case. This is just so people who haven’t looked at that post can figure out whats happening.

Next we will add the function that we will use to display our menu. This uses the wp_nav_menu function, so if you want to learn more about that please check out the Codex page. Basically this just creates our primary menu with certain attributes:

What’s important to note here is the part that reads ‘walker’ => new top_bar_walker(). We are going to have to create a walker class that extends the normal one and then that will be what our menu uses. Still in your functions.php file, add the following to create the walker class:

This is the heart of what makes our menu work with Foundation. This adds all the appropriate attributes, such as has-dropdown that Foundation needs to use. As mentioned at the start of the article – I won’t go into much detail walkers simply because I haven’t played with them very much. This one suited my needs and that was about all I’ve done.

If you want to make your own walker, then walking through the code should give you a good idea of what’s going on. You can see where the CSS class has-dropdown is added for menu items with children, as well as where the divider classes are added. Hopefully this will be enough to get you started if you want to make your own custom walker. I might revisit making a custom walker and go through what everything does in the future – but for right now I simply don’t know enough to do that.

As always thank you for reading and please share it around as much as you can! If you have any questions or comments please let me know in the comment section below.