BuddyPress Customisation Tips

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;
    }
}