BuddyPress

Profile Builder Pro - BuddyPress - Thumbnail

BuddyPress Add-on lets you to easily extend the BuddyPress User Profiles with Profile Builder User Fields.
It replaces BuddyPress’s Registration Form, Profile Editing Form and User Listing with the customized forms created with Profile Builder, using Extra Fields Types.
An import option is available in order to transfer BuddyPress’s Fields and User Entries Information to Profile Builder’s Fields.

Install the BuddyPress Add-on

BuddyPress is an Advanced add-on, available with a Profile Builder Pro license only.

After purchasing the add-on, the .zip file will be available for download under your account page by clicking the “Add-ons Download” button.

Profile Builder Pro - Account Page - Download Add-ons

Once downloaded, you can install the add-on as a normal WordPress plugin, by uploading the .zip file in your WordPress Admin -> Plugins -> Add New -> Upload Plugin.

Alternatively, you can install the BuddyPress add-on by extracting the folder found inside the archive and uploading the entire folder via FTP to your /wp-content/plugins folder found inside your WordPress install.

For BuddyPress add-on to work as expected, you’ll also need to have the following plugins installed and activated on your site:

BuddyPress Add-on Settings

After you install and activate the BuddyPress add-on, under the Profile Builder menu item, you’ll notice a submenu item called “BuddyPress”. From here you can manage the BuddyPress Add-on Settings.

The available settings are:

Profile Builder Pro - BuddyPress - Settings

BuddyPress Plugin Settings

By default the BuddyPress plugin creates 4 pages and you can associate these pages with BuddyPress component directory or with BuddyPress Registration pages in Settings -> Buddypress -> Pages:

  • Members
  • Activity
  • Register
  • Activate

Profile Builder Pro - BuddyPress - Settings - Pages

Import BuddyPress Fields to Profile Builder

The BuddyPress Add-on replaces BuddyPress’s Field Management with Profile Builder’s fields. This means that in order to continue using BuddyPress user data you will need to use the import feature from Profile Builder -> BuddyPress page.

Importing will start by clicking the Import BuddyPress Fields button.

First off, Profile Builder will create corresponding fields that map the existing ones from BuddyPress. Field settings such as required, visibility settings and defaults will also be imported. Below is a list of BuddyPress fields and their equivalent in Profile Builder.

BuddyPress Profile Builder
Checkboxes Checkbox
Drop Down Select Box Select
Multi Select Box Select(Multiple)
Radio Buttons Radio
Date Selector Datepicker
Multi-line Text Area WYSIWYG
Number Number
Text Box Input
URL Input

Notice that for the URL field, the closest equivalent was an Input. You can easily transform an Input into a clickable link in User Listing templates by using the following syntax:

1
<a href="{{{meta_name}}}">{{{meta_name}}}</a>

Group field titles will be imported as Heading fields.

Then Profile Builder will import user entries for the imported fields. By default the BuddyPress add-on will import 50 users at a time.

If you encounter timeouts or memory limits errors, you should consider lowering this value by using the wppb_bdp_user_field_import_step_size filter .

1
2
3
4
5
6
7
8
9
10
/*
 * Filter to lower or increase the  BuddyPress import step size
 * Add the following code in functions.php of your active theme before doing the import 
 */
 
function wppbc_import_users_step_size(){
    return 10;
}
 
add_filter( 'wppb_bdp_user_field_import_step_size', 'wppbc_import_users_step_size' );

Alternatively, if you have a large user count and fewer user entries, you may try to increase the user step size to speed things up.

Replace BuddyPress Registration Form

After you activate the BuddyPress Add-on the BuddyPress Registration Form will be replaced by Profile Builder Registration Form. This is how the Default BuddyPress Registration Form looks like.

Profile Builder Pro - BuddyPress - Default BuddyPress Registration Form

Profile Builder’s Default Registration Form is selected by default inside the Registration form option. You can choose from other Custom Registration Forms created by using the Multiple Registration Forms Module.

Profile Builder Pro - BuddyPress - Choosing the Registration Form

The selected Registration form will replace the Default BuddyPress Registration page. The Default BuddyPress Registration page is set up in Settings -> BuddyPress -> Pages -> Register option.

Profile Builder Pro - BuddyPress - Settings - Pages - Register

This is how the Default BuddyPress Registration Form looks like after we activate the BuddyPress Add-on. The Default BuddyPress Registration Form is replaced by the form selected inside the Registration Form option.

Profile Builder Pro - BuddyPress - BuddyPress Registration Form replaced by Profile Builder Registration Form

You can manage Profile Builder Default Fields and Extra Fields Types, displayed inside the Registration Form, if you go to Profile Builder -> Manage Fields.

Enable Blog Creation on WordPress MultiSite

If you are running a WordPress MultiSite and you want to Enable Blog Creation upon User Registration, you can do so by adding the Default – Blog Details field in Profile Builder -> Manage Fields.

Profile Builder Pro - BuddyPress - MultiSite - Adding the Blog Details Field

If you don’t see the “Default – Blog Details” field inside Profile Builder -> Manage Fields you will need to select the “Both sites and user accounts can be Registered” option found inside Network Admin -> Settings -> Network Settings -> Registration Settings -> Allow new registrations.

Profile Builder Pro - BuddyPress - MultiSite - Both sites and user accounts can be Registered option

This is how the “Default – Blog Details” Field, created above, looks like in the Registration Form.

Profile Builder Pro - BuddyPress - MultiSite - Blog Details Field

Replace BuddyPress Edit Profile Form

After you activate the BuddyPress Add-on the BuddyPress Edit Profile Form will be replaced by Profile Builder Edit Profile Form. This is how the Default BuddyPress Edit Profile Form looks like.

Profile Builder Pro - BuddyPress - Default BuddyPress Edit Profile Form

Profile Builder’s Default Edit Profile Form is selected by default inside the Edit Profile form option. You can choose from other Custom Edit Profile Forms created by using the Multiple Edit Profile Forms Module.

Profile Builder Pro - BuddyPress - Choosing the Edit Profile Form

The selected Edit Profile Form will replace the Default BuddyPress Edit Profile tab found inside the individual member page. Logged in go to the Profile -> Edit.

This is how the Default BuddyPress Edit Tab looks like after we activate the BuddyPress Add-on. The Default BuddyPress Edit tab is replaced by the form selected inside the Edit Profile Form option.

Profile Builder Pro - BuddyPress - BuddyPress Edit Profile Form replaced by Profile Builder Edit Profile Form

You can manage Profile Builder Default Fields and Extra Fields Types, displayed inside the Edit Profile Form, if you go to Profile Builder -> Manage Fields.

BuddyPress Avatar

After you activate the BuddyPress Add-on, you will not be able to use the Profile Builder Avatar Upload Field. Profile Builder Avatar Upload field is disabled to allow use of BuddyPress Avatar.

Users will be able to change their Profile Photo, after logging in, if they go to Profile -> Change Profile Photo -> Select your file.

Profile Builder Pro - BuddyPress - Change Profile Photo

Replace BuddyPress Profile View

After you activate the BuddyPress Add-on the BuddyPress Profile View section will be replaced by the Profile Builder Single-Userlisting Template. This is how the Default BuddyPress Profile View section looks like.

Profile Builder Pro - BuddyPress - Default BuddyPress Profile View

From the submenu Profile Builder -> BuddyPress, you can choose which Single-Userlisting Template managed by Profile Builder should replace the Default BuddyPress User Profile View.

The selected User Listing Template will be used in the BuddyPress individual member page, in the Profile -> View section.

Profile Builder Pro - BuddyPress - BuddyPress Profile View section replaced by Profile Builder Single-Userlisting Template

You can customize the selected Single-Userlisting template by going to Profile Builder -> User Listing -> Edit the “Default Userlisting for BuddyPress” User Listing.

Profile Builder Pro - BuddyPress - User Listing - Single-Userlisting - BuddyPress User Tags and Extra Functions

This is the Default Userlisting for BuddyPress -> Single-Userlisting Template:

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
34
35
36
37
38
39
<ul class="wppb-profile">
  <li>
    <h3>Name</h3>
  </li>
  <li>
    <label>Username:</label>
    <span>{{meta_user_name}}</span>
  </li>
  <li bp_visibility="first_name" user_id="{{user_id}}">
    <label>First Name:</label>
    <span>{{meta_first_name}}</span>
  </li>
  <li bp_visibility="last_name" user_id="{{user_id}}">
    <label>Last Name:</label>
    <span>{{meta_last_name}}</span>
  </li>
  <li bp_visibility="nickname" user_id="{{user_id}}">
    <label>Nickname:</label>
    <span>{{meta_nickname}}</span>
  </li>
  <li>
    <label>Display name:</label>
	<span>{{meta_display_name}}</span>
  </li>
  <li bp_visibility="website" user_id="{{user_id}}">
    <h3>Contact Info</h3>
  </li>
  <li bp_visibility="website" user_id="{{user_id}}">
  	<label>Website:</label>
	<span>{{meta_website}}</span>
  </li>
  <li bp_visibility="biographical_info" user_id="{{user_id}}">
    <h3>About Yourself</h3>
  </li>
  <li bp_visibility="biographical_info" user_id="{{user_id}}">
	<label>Biographical Info:</label>
	<span>{{{meta_biographical_info}}}</span>
  </li>
</ul>

Replace BuddyPress Profile Members Listing

After you activate the BuddyPress Add-on the BuddyPress Members listing will be replaced by the Profile Builder All-Userlisting Template. This is how the Default BuddyPress Members listing looks like.

Profile Builder Pro - BuddyPress - Default BuddyPress Members Listing

The “Enable PB User Listing on BuddyPress Members page” option is enabled by default. The All-Userlisting Template used will be the one selected above, at the User Listing template option.

Profile Builder Pro - BuddyPress - Enabeling the All-Userlisting Template

The Default BuddyPress Members page is set up in Settings -> BuddyPress -> Pages -> Members option.

Profile Builder Pro - BuddyPress - Settings - Pages - Members

This is how the Default BuddyPress Members listing looks like after we activate the BuddyPress Add-on. The Default BuddyPress Members listing is replaced by the All-Userlisting Template.

Profile Builder Pro - BuddyPress - BuddyPress Members Listing replaced by Profile Builder All-Userlisting Template

In order to use the {{{bp_add_friend}}} tag enable “Friend Connections” inside Settings -> BuddyPress -> BuddyPress Settings.

Profile Builder Pro - BuddyPress - Settings - Enable Friend Connections

User Listing User Tags and Extra Function

Several tags are available to use in the User Listing templates

BuddyPress User Tags Details
BuddyPress Avatar – {{{bp_avatar}}} Returns the URL of the BuddyPress Avatar.
Note – Because BuddyPress has an Avatar field, Profile Builder Avatar Upload Field is disabled
BuddyPress Cover Photo – {{{bp_cover_photo}}} Returns the URL of the BuddyPress Avatar.
BuddyPress Last Active – {{bp_last_active}} Returns a relative time since the user has been BuddyPress active.
BuddyPress Add Friend Button – {{{bp_add_friend}}} Returns an appropriate button that allows a user to Add Friend, Cancel Friendship or Cancel Friendship Request.
Note – To make this work enable the “Friend Connections” option
BuddyPress Latest Update – {{{bp_latest_update}}} Returns the latest BuddyPress update, alongside a View link
BuddyPress Extra Functions Details
BuddyPress Friends Tab – {{{bp_my_friends_tab}}} Found in the Extra Functions tab, it can be used only in the All-Userlisting Template. It returns a bar with tabs for All Members and My Friends, that filter users accordingly.

You can find the User Tags and the Extra Function if you go to Profile Builder -> User Listing -> Edit the “Default Userlisting for BuddyPress” -> All-Userlisting Template.

Profile Builder Pro - BuddyPress - User Listing - All-Userlisting - BuddyPress User Tags and Extra Functions

This is the Default Userlisting for BuddyPress -> All-Userlisting Template:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{{{extra_search_all_fields}}} <br>
{{{bp_my_friends_tab}}}
<span class="wppb-buddypress-sort-by-text">Sort by:</span>
<ul class="wppb-buddypress-sort-by">
  <li> {{{sort_bp_last_active}}} </li>
  <li> {{{sort_display_name}}} </li>
  <li> {{{sort_registration_date}}} </li>
</ul>
<table class="wppb-table wppb-buddypress-table">
	<tbody>
		{{#users}}
		<tr>
          <td data-label="Avatar" class="wppb-buddypress-avatar"><a href="{{{more_info_url}}}">
            <img src="{{{bp_avatar}}}" class="avatar" width="50" height="50" alt="Profile picture of {{meta_display_name}}">
          </a></td>
		  <td data-label="Name" class="wppb-name"><a href="{{{more_info_url}}}">{{meta_display_name}}</a>{{{bp_latest_update}}}<br>
            <i>{{bp_last_active}}</i></td>
		  <td data-label="Friends" class="wppb-buddypress-friends">{{{bp_add_friend}}}</td>
		</tr>
		{{/users}}
	</tbody>
</table>
{{{pagination}}}

Replace BuddyPress Log In form

The BuddyPress plugin, by default, adds a “Log in” link in the Admin Bar and also in the Menu. These shortcuts will take you to the Default WordPress Log In form. Clicking on the Register link will take you to the BuddyPress Registration form.

Profile Builder Pro - BuddyPress - Tool Bar.png

If you want to replace it with the Front End Login Form created via Profile Builder, you need to follow these steps:

  1. Add the shortcode [wppb-login] inside a new or an existing page
  2. Go to Profile Builder -> Custom Redirects. Enable Custom Redirects module, if you haven’t already
  3. From the Redirect Default WordPress Forms and Pages metabox, select the Login ( wp_login.php ) Redirect Type and fill in the Redirect URL option with the URL of the page that you set up on step 1
  4. Click Add Entry

Disable the BuddyPress Toolbar

You can disable the Toolbar if you go to Settings -> BuddyPress -> Options -> Main Settings -> Uncheck the “Show the Toolbar for logged out users” option

Profile Builder Pro - BuddyPress - BuddyPress Settings - Toolbar option

Field Visibility Options

Fields can be configured to have a certain Visibility Option, in the same way BuddyPress allows it.

In Profile Builder -> Manage Fields, when editing a field, you can setup the BuddyPress Default Field Visibility and the BuddyPress Allow Custom Visibility options.

BuddyPress Default Field Visibility has the following options:

  • Everyone – Field visible for both logged-in and logged-out users
  • Only Me – Field visible only for the user itself and for Administrators
  • All Members – Field visible only for logged-in users
  • My Friends – Field visible only for BuddyPress friends

Profile Builder Pro - BuddyPress - Field Visibility Options - BuddyPress Default Field Visibility

BuddyPress Allow Custom Visibility has the following options:

  • Allow members to override – The user decides if the field is seen by Everyone, Only Me, All Members or My Friends
  • Enforce the default field visibility – As Admin you can enforce the BuddyPress Default Field Visibility option
Profile Builder Pro - BuddyPress - Field Visibility Options - BuddyPress Allow Custom Visibility

The fields that allow field visibility options are:

Default Field Types
Default First Name Default Last Name Default Nickname Default E-mail
Default Website Default Biographical Info
Extra Field Types
Input Number Textarea WYSIWYG
Phone Select Select (Multiple) Select (Country)
Select (Timezone) Select (User Role) Select (Currency) Select (CPT)
Checkbox Radio Upload Datepicker
Timepicker Colorpicker Map Select2
Select2 (Multiple)
Repeater
For the entire set of fields, not individually.

If allowed, the user can decide each field visibility on both Registration and on Edit Profile fields. The field will therefore be visible on Single Profile View and on All-Userlisting, based on each individual field of each user.

In our case the Favorite Author field is enforced by the “Only Me” option.

Profile Builder Pro - BuddyPress - Field Visibility Options - Frontend

User Listing field visibility syntax

In order to hide more than just the field data, you can use the following syntax in any All User Listing template.

1
2
3
<td bp_visibility="replace_with_field_meta_name" user_id="{{user_id}}">
     {{mustache_tag}}
</td>

This will hide the entire HTML element (<li>, <div>, etc.) and its content, based on the field with the meta name specified in the attribute bp_visibility, for the user specified in the user_id attribute.

Similarly, for Single User Listing templates, you can hide the entire HTML element, based on the visibility of the field with the meta-name specified in the bp_visibility attribute. The user_id attribute is not required here.

1
2
3
4
<li bp_visibility="replace_with_field_meta_name">
    <label>Field Title:</label> 
    <span>{{mustache_tag}}</span>
</li>

How to

Hide “This field can be seen by” notification displayed under the fields

You will need to use some custom code in order to hide “This field can be seen by” notification and also to set the “BuddyPress Allow Custom Visibility” option to “Enforce field visibility”:

1. Create an empty plugin like this: https://gist.github.com/sareiodata/76f701e01db6685829db

2. Add the following code to the end of it:

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
 * Filter to hide "This field can be seen by" notification displayed under the fields
 * Works when BuddyPress Allow Custom Visibility option is set to "Enforce field visibility"
 */
 
function wppbc_bdp_frontend_field_visibility_settings( $output, $field, $form_id, $form_type, $called_from ) {
    if ( ! wppb_bdp_allow_custom_visibility( $field ) ){
        $key_position = strpos ( $output, '<li class="wppb_bdp_visibility_settings">' );
        return substr( $output, 0, $key_position );
    }
    return $output;
}
add_filter( 'wppb_output_after_form_field', 'wppbc_bdp_frontend_field_visibility_settings', 11, 5 );

3. Install this plugin via FTP (copy it inside wp-content/plugins) or create a zip archive with it and install it via the WordPress plugin upload functionality

Get BuddyPress – Profile Builder Add-on

Have a dynamic Edit Profile form on the BuddyPress Edit Profile page

https://www.cozmoslabs.com/docs/profile-builder-2/developers-knowledge-base/support-themes-plugins/dynamic-edit-profile-form-buddypress/