BuddyPress.org

I’ve started these adjustments by first creating new profile fields for the headline and user location by going to BuddyBoss > Profiles > add new field, making a note of their id’s in the url. I then found a relevant tutorial on the Buddypress codex “Displaying Extended Profile Fields on Member Profiles” but it seems to be based on and older version of Buddypress. I found out some current hooks in the user profile header are bp_before_member_header_meta below the main display name and bp_before_member_in_header_meta below that. So I added the headline and user location, as well as the nickname/handle with this code based on the linked tutorial in my child themes functions.php file:

add_action( 'bp_before_member_header_meta', 'display_user_nickname' );
function display_user_nickname() {
	$args = array(
	'field' => 3,
	);
$user_nickname = bp_get_profile_field_data ( $args );
if( $user_nickname ) {
	echo '<span class="mention-name">@' . $user_nickname . '</span>';
	}
}

add_action( 'bp_before_member_in_header_meta', 'display_user_headline' );
function display_user_headline() {
	$args = array(
		'field' => 12,
	);
	$user_headline_copy = bp_get_profile_field_data ( $args );
	if( $user_headline_copy ) {
		echo $user_headline_copy;
	}
}

add_action( 'bp_before_member_in_header_meta', 'display_user_location' );
function display_user_location() {
	$args = array(
		'field' => 16,
	);
	$user_location = bp_get_profile_field_data ( $args );
	if( $user_location ) {
		echo '<br />' . $user_location;
	}
}

With that, the headline and user location were added (I used a line-break to separate them the way I wanted it), but it left me with two instances of the nickname/handle: the pre-existing one and the new one that I just added. I tried to remove the pre-existing one using:
remove_action( 'bp_before_member_in_header_meta', 'bp_displayed_user_mentionname' );

That is exactly the function used to output the mentionname of a displayed user according to the documentation, but it didn’t work and I still would’ve had to figure out how to remove the span class and @ symbol that’s there too anyways. So I copied the file, \buddyboss-theme\buddypress\members\single\member-header.php, into my child theme and deleted lines 44-50:

<?php if ( bp_is_active( ‘activity' ) && bp_activity_do_mentions() ) : ?>
    <span class=”mention-name”>@<?php bp_displayed_user_mentionname(); ?></span>
<?php endif; ?>

<?php if ( bp_is_active( ‘activity' ) && bp_activity_do_mentions() && bp_nouveau_member_has_meta() ) : ?>
    <span class=”separator”>•</span>
<?php endif; ?>

But to my eternal consternation, that did not work either! (yes I duplicated the same path)

That’s where I’m currently standing:

• I need to figure out if there is a hook to the right of the display name or just create one.
• I need to figure out a way to remove unwanted meta that are currently there in the header – I’m a little suspicious that these are being generated in some kind of loop that remove_action doesn’t have any effect on (bp_nouveau_member_meta?). If so, I need to figure out how to add/remove meta from that loop instead of using add_ remove_ action hooks.
• Once I do all of that I need to figure out if there’s a hook just below the user profile image and use that to move the “connect,” “follow,” and “message” buttons.
• I will then need to locate the code that’s generating the cog icon for the user settings and copy/paste that into the hook to the right of the display name, floating right to place it in the upper right hand corner of the user profile header.

It appears as though I’m really putting tech support over at BuddyBoss to the test with these requests, so I would really appreciate any suggestions if anyone has any to offer over here!

Thanks!

@ripulkr

although BP works with any theme.. i often find myself add too much BP specific CSS tweaks in the customizer

Im trying to keep things as simple as possible and even with twenty seventeen theme – there are some css tweaks that need to happen.

it makes sense — simply because WP is “blog first” so most content is goofy on how it renders and presents BP pages.

As far as I can tell buddyboss is the only game in town that does a great job of having clean design and straighforward code.

my BP-Theme-wish list

1) BP first *which focuses on great Activity page presentation, Members Directory Presentation & Great Member profiles.

2) Mobile First approach would be super awesome. Most people view profiles and not necessarily doing actual “activity” post. So if someone can figure out a great way to render fast and beautiful activity/members-directory/member-profiles that is very readable on mobile it would be super awesoome.

3) Great use of Menus/Accordions — The way BP works right now on members pages is TERRIBLE on mobile. You have scroll past the cover photo -> then pass the Avatar –> then pass 4 menu items to see any content of the users in the Members Profiles page.

4) Great use of Member Profile Fields — I think by default as a “2 column table layout” to render the profile fields is not great.

**I totally understand that the newest release of BP has interesting pre-built options but even with the default twenty-twenty theme it doesnt look great.

Some thoughts..

— The username in the profile page when too long looks weird and awkward — using CSS to ‘breakword’ is OK.
— The Profile Field Name should be studied on how to render that well..
— The Profile Field entries like (text fields, radial buttos, list, etc..) should have a better readable standard implementation like.. *This one is hard because you dont know the exact uses of each unique BP installs..
— The Menus should be “slidable” on mobile so that the user doesnt have to scroll all the way down to start reading whats on that persons profile.

*** It would be great if someone (some BP expert) post an Ultimate BP/CSS guide that shows how to target each of the BP specific elements… without doing theme surgery.. like a cut&paste into the CSS customizer –BONUS if it can include media queries 🙂

anyway.. rant over..

Ok so I have added xProfileFields now and was able to have a color picker in place.

Can someone tell me, where and how I would have to load that hex value now, to make css changes to the users profile?

Would be great if someone could get me on the right track 🙂