This post is updated for BuddyPress 1.5!

Showing certain profile fields on a member profile has become really easy since 1.2. By adding a simple code snippet to your member-header.php file, you can display certain fields that are important in your community. With the help from Boone I’ve modified this snippet to only show when the field is actually populated with information. Here’s a quick guide on how to set this up:

Build Better BuddyPress Communities

Bi-weekly curated BuddyPress news, the best community building tips from industry leaders and exclusive offers delivered straight to your inbox.

Step 1: Move the file bp-default/members/single/member-header.php to your Child Theme folder

Like always you need to move over the template to your Child Theme first, to get this working. Make sure that you keep the folder structure intact when copying over the template (so the file stays in the members/single/ directory.

Step 2:  Add the code snippets to the member header file.

Open up the file, and around line 28 (right after the closing “item buttons” div tag) add the following:

[html] <div id="member_profile">
<div class="profile_fields">Category: <span><?php bp_profile_field_data( ‘field=Category’ );?></span></div>
<div class="profile_fields">Playing Age: <span><?php bp_profile_field_data( ‘field=Playing Age’ );?></span></div>
<div class="profile_fields">This Actor Is Currently: <span><?php bp_profile_field_data( ‘field=Availability’ );?></span></div>
</div>
[/html]

In the example I’ve used a few profile fields and I’ve added some basic CSS styling. You can replace the profile fields name with your own fields to get everything working. Keep in mind that the field name is case sensitive and that it will only be shown when filled in.

Step 3 (optional): Add some CSS styling

If you keep the same structure as in the snippet, here’s some CSS you can add to your stylesheet.

[css] div#member_profile {
margin-bottom: 15px;
margin-top: 15px;
}

.profile_fields {
color: #777;
font-weight: 500;
padding-bottom: 2px;
padding-top: 2px;
}

.profile_fields span {
color: #444;
font-weight: 700;
}
[/css]

Result:

Update: Only show a field when it’s filled in

In the comments Onyx asked if it was possible to hide these fields when they are not filled in. This can be done by doing a conditional check to see if the profile field has a value. Here’s the code snippet with a simple example:

[php] <?php if ( $data = bp_get_profile_field_data( ‘field=Country ‘ ) ) : ?>
<div class="profile_fields">
Country: <span><a href="http://cfcommunity.net/members/?s=<?php echo $data ?>" title="<?php echo $data ?>">
<?php echo $data ?></a></span>
</div>
<?php endif ?>
[/php]

That should to the trick! Props to Boone who helped me out with this a while back!

Tagged
Lightning fast managed hosting, rock-solid security and expert support for your Social Network, Membership Site, Learning Management System or anything in between.

Faster

Thanks to our CommunityCaching technology WordPress communities hosted on the WeFoster Platform are on average up to 6x faster than when hosted on a traditional webhost.

Safer

WeFoster lets you relax and focus on building your community, whilst our experts take care of protecting your site from hackers and other security threats.

Stronger

Our next-generation container technology can even handle the biggest traffic spikes. With no limit on pageviews and our grow-as-you-go pricing plans you’ll never be punished for making your community a success.

Smarter

WeFoster is also a free network of community site experts, builders, managers and enthusiasts. Get inspired, get answers, get connected and grow your community.

Leave a Reply

Your email address will not be published. Required fields are marked *