Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question
    
I'm not promoting a site but I'm extremely curious, is there a reason my entire original post was pulled onto this site? wjobs.meshwebdev.com/jobs/… I'm trying to fix the below problem I've been describing to guiniveretoo and Googling a solution like mad. Well, the above link popped and I just wanted to bring it to attention. FYI... –  thatguycraig Aug 28 '12 at 19:10

1 Answer 1

up vote 0 down vote accepted

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?

share|improve this answer
    
thank you so much! I will give this a try on my local install this afternoon when I get back to that project! Seriously, thanks!! –  thatguycraig Aug 27 '12 at 13:15
    
I also just realized, I want to make this theme as easy as possible for the end user to customize. I've already gone ahead and enabled the menu support in my functions.php file, how can I use your code above but make it so the enduser can still customize the tabs in the backend? (Wordpress 3.4+) - I'm going to attempt and add a few key customizable features for the Wordpress Dashboard. Thanks! –  thatguycraig Aug 27 '12 at 20:20
    
I can't figure how to make it so the true Home page is displaying the active tab... What is the slug for your domain? My home page for this project is not a static, it's my front page... –  thatguycraig Aug 28 '12 at 17:21
    
If you want the end user to be able to control the menu items, then you'll need to go at this problem a bit differently. You should set up custom navigation, then duplicate the styles that Foundation uses, except with the classes that Wordpress generates by default. That's a bit more "try it out and see what works" than anything else! –  guiniveretoo Aug 31 '12 at 18:21
    
Wordpress automatically adds the classes "current-page-item" and "current-page-ancestor" to list item that matches your current page. –  guiniveretoo Aug 31 '12 at 18:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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