Using BuddyPress for Social Networks

BuddyPress Customisation Tips

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:

1
2
3
4
5
6
7
8
#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:

1
2
3
4
5
6
7
8
#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:

1
2
3
4
5
6
7
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

1
2
3
4
5
6
$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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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:

1
2
3
4
5
6
7
8
9
10
11
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;
    }
}

 

4+
    • sean on April 7, 2017 at 4:17 pm

    Reply

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

    1+
    • Venutius on April 11, 2017 at 4:31 pm
    • Author

    Reply

    Hi Sean,

    Are you trying to change the group layout to columns?

    3+
  1. Reply

    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?

    0
      • Venutius on April 19, 2019 at 1:46 pm
      • Author

      Reply

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

      0
    • Achim on March 26, 2019 at 9:50 pm

    Reply

    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.

    0
      • Venutius on April 19, 2019 at 12:09 pm
      • Author

      Reply

      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.

      0
  2. Reply

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

    0
      • Venutius on April 19, 2019 at 12:02 pm
      • Author

      Reply

      Sorry about that, fixed now

      0
      1. Reply

        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?

        0
          • Venutius on April 20, 2019 at 6:33 am
          • Author

          Reply

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

          1+
          1. 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).

            0
    • Venutius on April 21, 2019 at 6:38 am
    • Author

    Reply

    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 ?

    0
    1. Reply

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

      0
        • Venutius on April 23, 2019 at 6:50 am
        • Author

        Reply

        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?

        0
    • EunJong on May 7, 2019 at 11:20 am

    Reply

    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?

    0
      • Venutius on May 7, 2019 at 12:32 pm
      • Author

      Reply

      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/

      0
        • EunJong on May 7, 2019 at 3:18 pm

        Reply

        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

        0
          • Venutius on May 7, 2019 at 5:00 pm
          • Author

          Reply

          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

          0
    • EunJong on May 8, 2019 at 12:11 am

    Reply

    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!!!!!

    0

Leave a Reply

Your email address will not be published.

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