Blending Foundation's Tabs with Wordpress Nav Menu & Display Active Tab

Question

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">

    <?php
    // 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>
        </dd>";
    }
    ?>

</dl>

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.

Thanks!

Answer 1

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.

Answer 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() ) ); ?>