Social, Networking

BuddyPress Customisation Tips

This article attempts to show what type of modification can be made to BuddyPress in order to allow the novice to begin to customise the look and feel of a BuddyPress installation. It is intended that by working this way beginners to BuddyPress can quickly get to grips with the basics of customisation as well as implementing some pretty cool features.

Getting your site ready for customisation

The first thing you need to do is to create some file structures that will allow you to customise your site without those changes being over-written by any new theme or plugin updates:

Create a child theme

Throughout this document I will be asking you to make changes to your sites css template. Ideally your theme will have a section where you can add custom css for your site but if not then typically these changes will need to take place in /wpcontent/themes/yourchildtheme/functions.php and style.css

See the following links for details about creating a child theme:

https://codex.wordpress.org/Child_Themes

https://wordpress.org/plugins/one-click-child-theme/

Creating a child theme will create a directory on your site similar to the following: /wp-content/themes/yourchildtheme/

Inside that directory there should be a file called style.css and another called functions.php, it is these two files that will hold some of your customisations

Install BuddyPress Template overload

Similarly, in order to create a set of BuddyPress configuration files, you need to create what is called a Template Overload. This involves copying a set of default configuration files from the bp-legacy directory of your BuddyPress plugin (/wp-content/plugins/buddypress/bp-templates/bp-legacy/buddypress/...) to a place where you can modify them without risk of them being over-written during a plugin update (They will move to /wp-content/themes/yourchildtheme/buddypress/...). Once you have created these files, you will be able to modify them and their settings will take precedence over any default settings set elsewhere.

The task involves copying the directory structure that is beyond bp-legacy onto your local hard disk, where you will edit them, and then copying the same structure to your /wp-content/themes/yourchildtheme/buddypress directory, at which point they will become your master configuration files for the overload BuddyPress features.

For more details on performing this task see the following:

https://codex.buddypress.org/themes/theme-compatibility-1-7/a-quick-look-at-1-7-theme-compatibility/#how-is-this-useful

For the purpose of this guide, the important files are as follows:

/wp-content/themes/yourchildtheme/buddypress/members/members-loop.php

/wp-content/themes/yourchildtheme/buddypress/groups/group-loop.php

/wp-content/themes/yourchildtheme/buddypress/activity/activity-loop.php

/wp-content/themes/yourchildtheme/buddypress/members/single/member-header.php

Once you have done that, you can start modifying the look and feel of the Buddypress aspect of your site.

Changing the look and feel of the members and group pages display

The Members page displays a list of Buddypress site members and it is generated by executing the members-loop.php file located in the members directory.

You can view the details of the actions available within this file here:

https://codex.buddypress.org/developer/loops-reference/the-members-loop/

To change the list layout to a three column grid layout, add the following to your custom css:

#buddypress #members-list li {
overflow: auto;
list-style: none;
float: left;
width: 30%;
margin: 0 20px 28px 0;
border: 0;
}

For more info on additional customisations you can do to your members list see the following article from Sarah Gooding:

https://premium.wpmudev.org/blog/how-to-create-a-custom-buddypress-members-directory/

There’s also a Useful tutorial on changing some avatar attributes in the BuddyPress Codex.

Similar changes can be made to the group list that is displayed on the Groups Buddypress page

See the following for a background as to how group-loop.php works

https://codex.buddypress.org/developer/loops-reference/the-groups-loop/

In order to change your groups list layout to three columns, add the following css to your site:

#buddypress #groups-list li {
overflow: auto;
list-style: none;
float: left;
width: 30%;
margin: 0 20px 28px 0;
border: 0;
}

The Buddypress Menu items as displayed within the front end user profile etc are a little lackluster, you can add tabs to these items by adding the following code to your custom css:

/* buddypress tabs */ #buddypress #object-nav, #buddypress #subnav, #buddypress #groups-directory-form .item-list-tabs {outline:0;margin:0;text-align:center;}
#buddypress #object-nav ul, #buddypress #subnav ul, #buddypress #groups-directory-form .item-list-tabs ul {display:table;width:100%;table-layout:fixed;font-size:.65em;} #buddypress #subnav ul {width:98%;font-size:.6em;margin:0 1%;} 
#buddypress #object-nav li, #buddypress #subnav li, #buddypress #groups-directory-form .item-list-tabs li {display:table-cell;float:none;text-align:center;height:2em;padding-top:.5em;background-color:#ddd;border:1px solid #c6c6c6;border-bottom: 1px solid #999;text-decoration: none;outline:0;margin:0;} 
#buddypress #object-nav li a, #buddypress #subnav li a, #buddypress #groups-directory-form .item-list-tabs li a{display:block;text-align:center;word-wrap: break-word;padding:0!important;color:#888;text-shadow: 0 0 1px #ddd;outline:0;} 
#buddypress #object-nav li a:hover, #buddypress #subnav li a:hover, #buddypress #groups-directory-form .item-list-tabs li a:hover {color:#000;outline:0;text-shadow: 0 0 1px #fff;} 
#buddypress #object-nav li.current, #buddypress #subnav li.current, #buddypress #groups-directory-form .item-list-tabs li.selected {border-color:#999;border-bottom-color:transparent;background-color:transparent;} 
#buddypress #object-nav li.current a, #buddypress #subnav li.current a, #buddypress #groups-directory-form .item-list-tabs li.selected a {pointer-events:none;cursor:default;color:#222;font-weight:700;} 
#buddypress #object-nav li.current a:hover, #buddypress #subnav li.current a:hover, #buddypress #groups-directory-form .item-list-tabs li.selected a:hover {color:#222;font-weight:700;} 
#buddypress div#subnav.item-list-tabs {margin:0!important;padding-top:1em;} #buddypress div.item-list-tabs ul li a span {display: block!important;border:none!important;background-color:transparent!important;padding:0!important;margin:0!important;} 
#buddypress select#activity-filter-by {font-size:.8em;}

This solution was suggested by Philosopher Rex in the following Buddypress forum post:

https://buddypress.org/support/topic/how-to-make-nice-looking-tabs-in-groups/

Changing the way the activity page works

The Activity page content is created by the Activity-loop.php file located in the /buddypress/activity directory in the overload area.

The reference for this file is located here:

https://codex.buddypress.org/developer/loops-reference/the-activity-stream-loop/

A useful guide by Sarah Gooding to changing the behaviour of this file is located here:

https://premium.wpmudev.org/blog/how-to-customize-the-buddypress-activity-loop/

An example of the types of changes you can make is regarding how comments are displayed. The default is threaded, in other words comments will be displayed beneath the activity item that inspired the comment. the alternative is to display them simply as part of the ongoing stream. This is done by changing the following text in activity-loop.php (located in /buddypress/activity) from:

 if ( bp_has_activities( bp_ajax_querystring( 'activity' ) ) ) :

To:

 if ( bp_has_activities( bp_ajax_querystring( ‘activity’ ) . ’&display_comments=stream’ ) ) :

This was kindly suggested to me by Henry Wright in the following Buddypress forum post:

https://buddypress.org/support/topic/what-could-stop-post-comments-from-displaying

Change the Activity Page search to include the activities user name in the search:

add_filter( 'bp_activity_get_include_user_search', 'venutius_add_name_to_search' );
function venutius_add_name_to_search( $setting ) { return true; }

Adding Members role to profile and page displays

Another common request is for the members roles on the site to be displayed on their profile page, within the members page and also within the group members pages.

Group member

In order to display the group members roles in the group members page, place the following in the functions.php file located in your child theme directory:

function venutius_display_member_role() { 
    global $members_template; 
    if ( $members_template->member->is_confirmed ) echo 'Member'; // This is a group member.
    if ( $members_template->member->is_mod ) echo 'Mod'; // This is a group moderator. 
    if ( $members_template->member->is_admin ) echo 'Admin';
} 
add_action( 'bp_group_members_list_item_action', 'venutius_display_member_role' );

In order to display the member role in the members profile, add the following code to /buddypress/members/single/member-header.php

$user = new WP_User( bp_displayed_user_id() );

if ( !empty( $user->roles ) && is_array( $user->roles ) ) {
	foreach ( $user->roles as $role )
		echo $role;
}

This code snippet was kindly contributed by Shanebp in the following Buddypress forum post:

https://buddypress.org/support/topic/displaying-user-roles-in-profile/

Member list view

To add the member role display to the members list, add the following code to the functions.php file:

function who_are_you_dir() {

$user = new WP_User( bp_get_member_user_id() );

	if ( !empty( $user->roles ) || is_array( $user->roles ) ) {
		foreach ( $user->roles as $role ) {

	/**
	 * Fetch the user's role. See https://codex.wordpress.org/Roles_and_Capabilities
	 * _e('role name', 'text_domain' ) allows use of translation
	 * else use echo "role name"; 
	*/

		// Output
			if ( $role == 'administrator') {
			echo "Administrator";
			} 

			if ( $role == 'subscriber') {
			echo "Subscriber";
			} 

			if ( $role == 'contributor') {
			echo "Contributor";
			}

			if ( $role == 'author') {
			echo "Author";
			}

			if ( $role == 'editor') {
			echo "Editor";
			}

This code snippet was kindly contributed by danbp in the following Buddypress forum post:

https://buddypress.org/support/topic/displaying-members-roles-in-members-list/

Changing the standard text aspects of Buddypress pages

Another common requirement is to add or change text that is displayed in Buddypress pages, for example changing the text displayed on the registration form. To do this a technique involving the language translation files is used, details located here:

https://codex.buddypress.org/getting-started/customizing/customizing-labels-messages-and-urls/

The poedit program, used for editing and creating the translation files is available for free here:

https://poedit.net/download

Cause profile URL’s to open in new tab when clicked

One final code snippet is a handy way of making sure website URL’s located in the members profile open in a different page when clicked.

Simply add this code into your functions.php:

function profile_target_blank( $field_value, $field_type, $field_id ){

    if($field_type == 'url')  { 
	
          $field_value = str_replace('rel="nofollow"', 'rel="nofollow" target="_blank"', $field_value);
   
    }
	
    return $field_value;
}
add_filter('bp_get_the_profile_field_value', 'profile_target_blank', 11, 3);

This code snippet was kindly contributed by snd26 in the following Buddypress Forum post:

https://buddypress.org/support/topic/profile-urls/

Cause links in the activity feed to open in a new tab

add_filter( 'bp_get_activity_content', 			'bpex_activity_make_target_blank_filter' );
add_filter( 'bp_get_activity_content_body',          	'bpex_activity_make_target_blank_filter' );
add_filter( 'bp_get_activity_parent_content',        	'bpex_activity_make_target_blank_filter' );
add_filter( 'bp_get_activity_latest_update',         	'bpex_activity_make_target_blank_filter' );
add_filter( 'bp_get_activity_latest_update_excerpt', 	'bpex_activity_make_target_blank_filter' );
add_filter( 'bp_get_activity_feed_item_description', 	'bpex_activity_make_target_blank_filter' );

function bpex_activity_make_target_blank_filter( $text ) {
	return preg_replace_callback( '||i', 'bp_activity_make_target_blank_filter_callback', $text );
}

function bpex_activity_make_target_blank_filter_callback( $matches ) {
	$text = $matches[1];
	$text = str_replace( array( ' rel="nofollow"', " rel='nofollow'"), '', $text );
	return "";
}

Redirect logged in users from the home page to their profile activity page

There’s two functions you would be interested in. One to redirect the logged in user too their activity page when they view the homepage and one to redirect them to their activity page following login.

These would go in your child themes functions.php:

add_action('template_redirect', 'bpex_render_landing_redirect');

function bpex_render_landing_redirect() {

    if ( is_user_logged_in() and ! current_user_can( 'manage_options' ) ) {
        if ( is_home() ){
            $user_bp_home = trailingslashit( bp_loggedin_user_domain( get_current_user_id() ) . bp_get_activity_slug() );
            wp_redirect( $user_bp_home );
            exit;
        }
    }
}

add_filter( 'bp_login_redirect', 'bpex_login_redirect', 1, 3 );

function bpex_login_redirect() {

    if ( is_user_logged_in() and ! current_user_can( 'manage_options' ) ) {
        $user_bp_home = trailingslashit( bp_loggedin_user_domain( get_current_user_id() ) . bp_get_activity_slug() );
        wp_redirect( $user_bp_home );
        exit;
    }
}

 


Venutius

I've been setting up and managing BuddyPress social networks for a few years. I moved from Ning and other platforms and have come to BuddyPress looking to make sites with similar features to them.

32 Comments

sean · April 7, 2017 at 4:17 pm

I cannot get the css on the groups to work, please help

Venutius · April 11, 2017 at 4:31 pm

Hi Sean,

Are you trying to change the group layout to columns?

Todd Jones · March 22, 2019 at 9:56 am

Thanks for snippet for opening URL’s in new window

any chance of getting a similar snippet to open links from Activity Streams to open new window?

    Venutius · April 19, 2019 at 1:46 pm

    Hi Todd, sorry for taking so long to get back to you, I’ve added this now.

      Ed · May 5, 2021 at 3:04 pm

      I added this to code snippet you suggest (below) and run snippet everywhere on site – bit does not open links in /activity/ or group /activity/ for me – just opens link in same window and takes user away from my site to new site. What am I doing wrong? Thanks.

      add_filter( ‘bp_get_activity_content’, ‘bpex_activity_make_target_blank_filter’ );
      add_filter( ‘bp_get_activity_content_body’, ‘bpex_activity_make_target_blank_filter’ );
      add_filter( ‘bp_get_activity_parent_content’, ‘bpex_activity_make_target_blank_filter’ );
      add_filter( ‘bp_get_activity_latest_update’, ‘bpex_activity_make_target_blank_filter’ );
      add_filter( ‘bp_get_activity_latest_update_excerpt’, ‘bpex_activity_make_target_blank_filter’ );
      add_filter( ‘bp_get_activity_feed_item_description’, ‘bpex_activity_make_target_blank_filter’ );

      function bpex_activity_make_target_blank_filter( $text ) {
      return preg_replace_callback( ‘||i’, ‘bp_activity_make_target_blank_filter_callback’, $text );
      }

      function bpex_activity_make_target_blank_filter_callback( $matches ) {
      $text = $matches[1];
      $text = str_replace( array( ‘ rel=”nofollow”‘, ” rel=’nofollow'”), ”, $text );
      return “”;
      }

Achim · March 26, 2019 at 9:50 pm

Hi, is it possible to change the length of the group description?
On our site, group description is ALWAYS shorted to half of its length or so.

    Venutius · April 19, 2019 at 12:09 pm

    Sorry for the delayed response. if you are using BP Nouveau, in plugins/buddypress/bp-template/bp_louveau/buddypress/groups/groups-loop.php there is a function bp_nouveau_group_description_excerpt() this accepts a length argument for the excerpt. So to set the length to 200 you could use bp_nouveau_group_description_excerpt( null, 200 ).
    Of course you don’t want to edit this file direct as it would be over-written with the next pluhin update so you would need to overload it by creating a themes/your-child-theme/buddypress/groups directory and copying your modified version of the file there.

      Nobody · March 11, 2023 at 4:18 am

      acctualy i adding bp-custom on : C:\xampp\htdocs\wordpressiduy\wordpress\wp-content\plugins
      if adding themes/your-child-theme/buddypress/groups directory to won’t be a problem ?

proctorINVADE · April 18, 2019 at 9:53 pm

that isn’t working. Syntax error, unexpected ‘;’. i.e in line 5 of the code.

    Venutius · April 19, 2019 at 12:02 pm

    Sorry about that, fixed now

      proctorINVADE · April 19, 2019 at 9:17 pm

      still didn’t work, i removed these strings “amp;” and my content was visible, but it didn’t redirect. Can you add comments next time?

        Venutius · April 20, 2019 at 6:33 am

        Yes WordPress did not like the & and replaced them with amps, I’ve changed the text to an alternative.

          proctorINVADE · April 20, 2019 at 7:03 pm

          OK, it works fine now. Upon login, it redirects straight to the user activity. But if the user clicks on the icon or goes to the site homepage, it still shows the homepage. It only works on login.

          Also, how possible is it to add all the activity tabs to the main activity. (Personal, Mentions, Favorites, Friends, Groups).

Venutius · April 21, 2019 at 6:38 am

I’ve just tested the code again and it redirects from the homepage for me.
Have you looked at https://wordpress.org/plugins/bp-profile-activity-wall ?

    proctorINVADE · April 22, 2019 at 9:44 pm

    Yes, I have seen the plugin. But when I marked all the activity tabs, it removed everything and I saw “Oops! Nothing to display”

      Venutius · April 23, 2019 at 6:50 am

      That’s strange, I’ve tested it a lot and not seen that behaviour.

      Regarding the home redirect, do you have any other redirects that may be interfering with it?

EunJong · May 7, 2019 at 11:20 am

I want to get help from you who know a lot of information about BuddyPress.
Because I haven’t found what I want yet.
So I thought I wanted to ask you.

I want to use the avatar of the list in the sent message box as the avatar of the recipient, not the sender.

However, the code is set to ‘last_sender_id’ like this to bring the avatar of the sender.

‘item_id’ = $messages_template->thread->last_sender_id,

Is there a plugin or code that can be added to the function.php associated with this?
I’m not a programmer, so I can’t do it myself, and I have to find someone who contributes the answer, but I haven’t found it yet.

By any chance, can you help me?

    Venutius · May 7, 2019 at 12:32 pm

    This sounds similar to a thread we had on buddypress.org recently, have you looked at: https://buddypress.org/support/topic/only-receiver-of-message/

      EunJong · May 7, 2019 at 3:18 pm

      Ah, I saw that too.
      But, it’s not what I want.

      I mean, the message list screen I sent to the other person. (screen before viewing message content)

      1. The list of inbox shows the avatar of the other person who sent me,
      2. The list of sentbox shows the avatar of me(=sender)
      3. I want to see the avatar of the recipient on the message list screen I sent.

      This is the screen shot I want.
      https://ibb.co/nbZWYvk

        Venutius · May 7, 2019 at 5:00 pm

        Here’s what I’ve come up with:

        function bpex_recipient_avatar( $sender_avatar, $r ) {
        	global $messages_template;
        	
        	$recipients = $messages_template->thread->recipients;
        
        	$i = 0;
        	foreach( $recipients as $recipient ) {
        		if ( $recipient->user_id == get_current_user_id() || $i >= 1 ) continue;
        		$first_recipient = $recipient;
        		$i++;
        	}
        
        	return bp_core_fetch_avatar( array(
        		'item_id' => $first_recipient->user_id,
        		'type'    => $r['type'],
        		'alt'     => $r['alt'],
        		'css_id'  => $r['id'],
        		'class'   => $r['class'],
        		'width'   => $r['width'],
        		'height'  => $r['height'],
        	) );
        
        }
        
        add_filter( 'bp_get_message_thread_avatar', 'bpex_recipient_avatar', 10, 2 );

        This will go in your child-themes functions.php

EunJong · May 8, 2019 at 12:11 am

Oh my God, oh my God.
You did it. You did it.
I am so surprised and so happy now.
I searched day and night for about five days to solve this problem. But I couldn’t solve it.
You gave me great joy. Thank you so much!!!
I will remember you again and again.
You are my hero, thank you so much.
A great blessing will come upon you.
I pray that all the blessings in this world will be with you.
Thank you. Thank you.
Wow !! w~~~~~~~~~~ow !!
Today is a happy day!!!!!

Bob Whallz · July 28, 2020 at 2:16 am

Hello. How can i change the background color of the buddypress profile page to a different color than white?

Mapesa · September 19, 2020 at 5:24 pm

Please I want to change the font
In the buttons favorite,comment etc

Al · January 15, 2021 at 12:08 pm

Thank you for all that tips !
Please, How do I get the profile URL to open on the “profile” tab and not on the “activity” tab?

    Venutius · January 15, 2021 at 12:37 pm

    Hi there, you’d add the following to your bp-custom.php file:

    define( ‘BP_DEFAULT_COMPONENT’, ‘profile’ );

Karen · March 13, 2021 at 1:16 am

Thanks Venutius, for sharing these great tips! I am new to BuddyPress and your tutorial helped to makes all the different parts a bit clearer. I’m customising the member directory by editing members-loop.php. I’m wondering if you have any advice on how the member name display can be customised to include a prefix (another field). So instead of just bp_member_name, I would like to append a field in front of it. Example if member name is Jane Doe, and I have a field called “Prefix” with the value “Mrs.”, I would like to have it displayed as Mrs. Jane Doe. Has anyone done that before? Thanks in advance.

    Venutius · March 13, 2021 at 8:02 am

    If I were you I’d look at https://wordpress.org/plugins/honorific-buddypress-members-name/ which is an old plugin which appears to do what you are looking for. It might need updating though as it’s not been updated in four year, but don’t let that put you off trying it.

    Venutius · March 13, 2021 at 8:15 am

    Just had a look at it, line 37 of honorific_usernames.class.php has 'field' => 'Honorific', // This is the field name.
    You can change this to 'field' => 'Prefix', // This is the field name.

      Venutius · March 13, 2021 at 8:34 am

      You’d need to make the same change to line 54 also.

Ashutosh Suman · April 30, 2021 at 2:14 pm

Hey tried to use your code to open links of activity stream in a new tab but it dint work. Can you help ?

anisur rahman · August 4, 2021 at 2:11 pm

for privacy reasons, I need only admin to be able to see the user name. everyone else will see the user id. for example: User ID: 8564

This will be everywhere (Members Page and individual profile page and profile link/URL is a must for my website).

Installing BuddyPress Style Modules – BuddyPress User · October 24, 2016 at 3:39 pm

[…] BuddyPress Customisation Tips […]

Leave a Reply

Avatar placeholder

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Contact Me
close slider