How to created tabbed interface for profiles?
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/
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.