I am currently working with ZURB's Foundation Framework. It's a terrific framework and my project is coming along a lot nicer and quicker than it would have beforehand. Foundation comes with CSS/Javascript that can be called upon within your design. One of these key features is their Tabs system. Now, what I currently have below works brilliantly on the site so far!

<dl class="tabs">

    // List all pages needed in Navigation with their slug and title
    $pages = array(
        "" => "Home",
        "about" => "About",
        "contact" => "Contact",

    // Find which page you're on currently...
    global $post;
    $post_slug = $post->post_name;

    // Looping through the pages to create each tab...
    foreach ( $pages as $slug => $title )
        // Find out if we're on this page and setup the 'active' class.
        $active = ( $slug == $post_slug || ( $slug == '' && is_front_page() ) ) ? "class='active'" : "";

        // Echo each dd item with a link to page...
        echo "<dd ".$active.">
            <a href='". get_bloginfo('url') ."/".$slug."'>".$title."</a>


It shows the active tag and allows me to add new links via hardcode. What I need is flexibility however and I want to blend in the support for Wordpress's new Menu system on the backend and incorporate wp_nav_menu somehow. However, I'm unsure where to begin... I'm testing different things while I post this so, maybe I'll stumble across a resolution but I wanted to check here first.


  • Is this harder than I thought? I believe much of it can be achieved by ripping this code down and using the wp_nav_menu setup to declare markup before and after each link to generate the Tabs BUT then I lose the "active tab" functionality that I desire... this is a tough one for me! I'd appreciate any input, answers, suggestions, ideas... thanks! Commented Aug 30, 2012 at 13:10

2 Answers 2


you can write a custom class to extend Walker_Nav_Menu in your functions.php, in this class you can change all the markup

the more simple is to copy all the class from /wp-includes/nav-menu-template.php and modify what you want

class Walker_Nav_Foundation extends Walker_Nav_Menu {

   function start_lvl() // to change opening <ul>

   function end_lvl() // to change ending </ul>

   ... etc ...

and call it in your template

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new Walker_Nav_Foundation() ) ); ?>

Forget about the custom code built above (though I'm glad you like it!) and just use the vanilla WP nav menus.

Adjust the stylesheet you get from Foundation to recognize "current-menu-item" the same way it recognizes the "active" tab... so if the css used to look like this:

li.active {
    /* some styles here */
li.active a {
    /* some other styles here */

Now it should look like this:

li.active, li.current-menu-item {
    /* some styles here */
li.active a, li.current-menu-item a {
    /* some other styles here */

http://codex.wordpress.org/Function_Reference/wp_nav_menu has lots of good information about customizing the output of wp_nav_menu() more, as well as a long list of all the classes it outputs near the bottom of the page.

  • The wp_nav_menu() functionality is really nice but Foundation's tabs are set-up using Definition List mark-up and not the normal <ul> or <ol>. I'm not sure if that's why it's not working but... it's not working. Developing... Commented Sep 4, 2012 at 20:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.