Displaying Extended Profile Fields on Member Profiles

BuddyPress has some nice built-in tools for collecting data from your members. You’ll be calling the “extended profile data” or “xProfile” in BuddyPress-speak in your theme. You can retrieve and display this data without modifying template files by attaching a new function to an existing action hook provided by BuddyPress.

For example, Carlos has registered your site and filled out the “Preferred Color” xProfile field you added in the profile form you built. And you’d like to display his preference in the header of his member profile. His member profile looks like this by default.

You can add Carlos’ color preference to the profile header by attaching a new function to a hook that BuddyPress provides for you to use. (Read more about action hooks.)

Looking through the BuddyPress template files, you’ll find a file called member-header.php: wp-content/plugins/buddypress/bp-templates/bp-legacy/member-header.php. In that file, look for a line which starts with do_action(…) for the right place to hook your new function to. Line 56 includes 'do_action( 'bp_profile_header_meta' )'. You can add the new code in your theme’s functions.php file, following the example provided at the WordPress Codex: add_action( $hook, $function_to_add, $priority, $accepted_args );

So you will start with:

add_action( 'bp_profile_header_meta', 'display_user_color_pref' );
function display_user_color_pref() {
     //This is where the code to display the user data will go.
}

Then you’ll use the BuddyPress function bp_profile_field_data() to retrieve and display the preference. The function bp_profile_field_data fetches and prints the value to screen (like the_content() does) and expects arguments in an array like this:

$args = array(
		'field'   => 'Favorite Color', // Field name or ID.
		'user_id' => bp_displayed_user_id() // Default
		);

Since you want to show the color preference of the displayed user (the member whose profile you’re viewing) and bp_profile_field_data uses that member’s ID for its default, you only need to specify the ID or field name of the extended profile field. You can check this value by visiting the Users > Profile Fields page in the WordPress admin. The field name is displayed as the field’s title, and, if you hover over “Edit,” the field’s ID is visible in the url: http://example.com/wp-admin/users.php?page=bp-profile-setup&group_id=2&field_id=2&mode=edit_field

In this case, you can use ‘Favorite Color’ or the ID, 2:

function display_user_color_pref() {
	echo 'I choose this color: ';
	$args = array(
		'field'   => 'Favorite Color', // Field name or ID.
		);
	bp_profile_field_data( $args );
}  

or

function display_user_color_pref() {
	echo 'I choose this color: ';
	$args = array(
		'field'   => 2, // Integers do not need to be enclosed in quotes.
		);
	bp_profile_field_data( $args );
}

But there’s a snag: what if the user didn’t input a favorite color?

You can use the function bp_get_profile_field_data instead to retrieve the value. Then, if there is a value, you’ll be able to display it. The complete code:

add_action( 'bp_profile_header_meta', 'display_user_color_pref' );
function display_user_color_pref() {
	$args = array(
		'field'   => 'Favorite Color', // Field name or ID.
		);
	$favorite_color = bp_get_profile_field_data( $args );

	if ($favorite_color) {
		echo 'I choose this color: ' . $favorite_color;
	}
	
}

If the member’s favorite color isn’t specified, then the function outputs nothing.