Using Zurb's Foundation Tabs as Wordpress Nav (Active Tab)

Question

This is a question more geared towards those of you out there that have experience working with the popular SASS/JS Framework, Foundation by Zurb. I am trying to use it as my structural core to my new Wordpress theme and had a question...

Built into Foundation are stylings for buttons, forms, and of course the famous 12-column grid. However, it also comes with jQuery Tabs that can be used to display tabbed content! Well, I wanted to use these to display my theme's navigation and have no clue as to where to start.

Currently, I have the below in place:

<nav class="row" role="navigation">

        <dl class="tabs">
            <dd class="active">
                <a href="#home">Home</a>
            </dd>
            <dd class>
                <a href="#about">About</a>
            </dd>
            <dd class>
                <a href="#contact">Contact</a>
            </dd>
        </dl>

        <ul class="tabs-content">
            <li id="homeTab">Home Page?</li>
            <li id="aboutTab" style="display: none;">About Page?</li>
            <li id="contactTab" style="display: none;">Contact Page?</li>
        </ul>

    </nav>

Again, I'm just beginning with the Foundation framework and as I can tell, this is correct to display the actual tabs... however, this is just for pure content within the tab - NOT a link to a new part of the site that will show an active tab for that section.

How can I use this Foundation Tab logic and meld it with Wordpress so when a user clicks on it, it loads that part of the site and show the correct "active" tab per page.

Examples:

• User clicks on "News" > An Article and is on single.php. The "News" tab should remain "active" while in the News section of the site.
• User clicks on "Contact" which loads a Wordpress page containing a contact form. "Contact" tab is active.
• etc

Any and all help would be greatly appreciated. If you're unclear on what the Foundation Framework is, click here to be taken to their Documentation center and the section on Tabs. I'm honestly at a lose and it's probably in front of me... figured I'd open a conversion to see if someone sees it. LOL

Thanks all!

Answer 1

The Foundation tabs assume that the content to display already exists in the <li> elements. You could go with that assumption, and just pre-load your whole website up-front, but that's probably going to cause more problems than it fixes. If nothing else, it'll take forever to load.

One option (the Foundation page you linked to suggests this) is use the styling of the tabs and load the rest of the page as you normally would with Wordpress & Php. This means you keep this part:

<nav class="row" role="navigation">
    <dl class="tabs">
        <dd class="active">
            <a href="<?php echo get_bloginfo('url'); ?>/home/">Home</a>
        </dd>
        <dd>
            <a href="<?php echo get_bloginfo('url'); ?>/about/">About</a>
        </dd>
        <dd>
            <a href="<?php echo get_bloginfo('url'); ?>/contact/">Contact</a>
        </dd>
    </dl>
</nav>

...but you don't need the <ul>. Change the href values to link to the page you want to display.

This does have the problem that every page would load up with the "Home" tab marked as active, so you might turn it into a php loop and check which page you're on:

<nav class="row" role="navigation">
    <dl class="tabs">
    <?php
    // listing out all the pages we want in the navigation with 
    // their slugs & titles
    $pages = array(
        "home" => "Home",
        "about" => "About",
        "contact" => "Contact"
    );

    // finding out what page we're on by slug
    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 set up the active class
        $active = ( $slug == $post_slug ) ? "class='active'" : "";

        // echo each dd item with a link to the page
        echo "<dd ".$active.">
            <a href='". get_bloginfo('url') ."/".$slug."/'>".$title."</a>
        </dd>";
    }
    ?>
    </dl>
</nav>

Another option would be to dynamically load the content using Ajax. I'm not proficient with Ajax, so maybe someone else knows how to do that and could offer a solution?