Customizing the User Profile Header
-
Hello All,
Longtime WordPress guy, first time BuddyPress developer. So, before I begin I should say that I am actually using the BuddyBoss plugin and corresponding theme, which as many of you may already know is a fork of BuddyPress and bbPress that the developers describe as still backwards compatible with BuddyPress. And in fact as I’ve been working through the code to customize the User Profile Header I have noticed that much of it is still almost all from the BuddyPress documentation – at least from what I’ve found for the latest version of BuddyPress (I understand it is/has recently gone through a major overhaul). As someone who is new to BuddyPress/BuddyBoss I am learning as I go along from making these simple adjustments to doing major new functionalities that I have planned, so I’m also basically learning plugin and widget development, as well as seeking to advance my theme development skills in WordPress in this latest project (i.e. a whackadoodle). My strategy in doing so is to share what I learn and get feedback from those more knowledgeable than me.Here is what I’m attempting to do to the user profile header in a nutshell (again any extra features off-the-bat is either coming from the BuddyBoss plugin or theme. This screengrab is actually from the demo):
The changes include:
- move the nickname/handle just to the right of the main display name (in this case it’s only the first name
- Add the custom User Headline field to the area just below the main display name. Also, remove the nickname/handle and join date that is currently at that location.
- Add the custom User Location field to the area just below the Headline and (possibly) add the existing join date to the right of that.
- Add a settings cog icon to the upper right-hand corner of the user profile area.
- Move the existing “connect,” “follow,” and “message” buttons under the user profile image (these are currently huge buttons that take up as much as 50% of the header space in desktop view and drop below the followers/following meta when in tablet/mobile view).
To be continued…
-
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!
- You must be logged in to reply to this topic.