Skip to:
Content
Pages
Categories
Search
Top
Bottom

How to created tabbed interface for profiles?

  • Avatar of Prometheus Fire
    Prometheus Fire
    Participant

    @prometheus-fire

    I’m trying to create a tabbed interface in my theme so that each extended profile group displays in its own tab. There are different ways to do it, here is one: http://wordpress.org/plugins/buddypress-profile-tabs/

    But I’m building this into a theme and don’t want to use a plugin (especially one that loads external JS). I did try using part of that plugin inside profile.php, but wasn’t happy with the result since the method it uses is to use JS to add #tab to each profile group. This results in a jumping of the page, even when I apply the CSS.

    Chris Coyier has a better solution here: http://css-tricks.com/functional-css-tabs-revisited/
    It doesn’t involve Javascript and it prevents the page jumping around to #links that the other solution causes.

    Here is the problem I am having:
    In order to use Chris’s solution I need to get the id’s of the input type of radio (shown in the code below) to read as id=”tab-1″, id=”tab-2″, etc for each profile group in the loop. I know there is a php way of doing it, but I don’t understand how. Once I get the id’s numbered sequentially in the output, adding the CSS is a simple issue.

    
    <div class="profile-tab">
    				
       <input type="radio" id="tab" name="profile-tab-group" checked>
          <label for="tab"><?php bp_the_profile_group_name(); ?></label>
    
       <table class="profile-fields">
          <?php while ( bp_profile_fields() ) : bp_the_profile_field(); ?>
             <?php if ( bp_field_has_data() ) : ?>
                <tr<?php bp_field_css_class(); ?>>
                   <td class="label"><?php bp_the_profile_field_name(); ?></td>
                   <td class="data"><?php bp_the_profile_field_value(); ?></td>
                </tr>
            <?php endif; ?>
    
             <?php do_action( 'bp_profile_field_item' ); ?>
    
          <?php endwhile; ?>
    
       </table> <!-- end profile-fields -->
    
    </div> <!-- end profile-tab -->

You must be logged in to reply to this topic.