Using Zurb’s Foundation Tabs as WordPress Nav (Active Tab)

Question

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="https://wordpress.stackexchange.com/questions/62852/<?php echo get_bloginfo("url'); ?>/home/">Home</a>
        </dd>
        <dd>
            <a href="https://wordpress.stackexchange.com/questions/62852/<?php echo get_bloginfo("url'); ?>/about/">About</a>
        </dd>
        <dd>
            <a href="https://wordpress.stackexchange.com/questions/62852/<?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') ."https://wordpress.stackexchange.com/".$slug."https://wordpress.stackexchange.com/">".$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?

Related Posts: