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:
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:
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;
}
}
Skip to comment form
I cannot get the css on the groups to work, please help
Hi Sean,
Are you trying to change the group layout to columns?
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?
Hi Todd, sorry for taking so long to get back to you, I’ve added this now.
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 “”;
}
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.
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.
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 ?
that isn’t working. Syntax error, unexpected ‘;’. i.e in line 5 of the code.
Sorry about that, fixed now
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?
Yes WordPress did not like the & and replaced them with amps, I’ve changed the text to an alternative.
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).
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 ?
Yes, I have seen the plugin. But when I marked all the activity tabs, it removed everything and I saw “Oops! Nothing to display”
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?
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?
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/
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
Here’s what I’ve come up with:
This will go in your child-themes functions.php
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!!!!!
Hello. How can i change the background color of the buddypress profile page to a different color than white?
Please I want to change the font
In the buttons favorite,comment etc
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?
Hi there, you’d add the following to your bp-custom.php file:
define( ‘BP_DEFAULT_COMPONENT’, ‘profile’ );
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.
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.
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.
You’d need to make the same change to line 54 also.
Hey tried to use your code to open links of activity stream in a new tab but it dint work. Can you help ?
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).