Skip to:

Creating a tabbed user profile interface

  • 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:

    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:
    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>
            <?php endif; ?>
             <?php do_action( 'bp_profile_field_item' ); ?>
          <?php endwhile; ?>
       </table> <!-- end profile-fields -->
    </div> <!-- end profile-tab -->
Viewing 1 replies (of 1 total)

  • modemlooper


    <input type="radio" id="tab-<?php bp_the_profile_group_slug(); ?>" name="profile-tab-group" checked>
       <label for="tab-<?php bp_the_profile_group_slug(); ?>"><?php bp_the_profile_group_name(); ?></label>
Viewing 1 replies (of 1 total)
  • The topic ‘Creating a tabbed user profile interface’ is closed to new replies.
Skip to toolbar