BuddyPress – Frontend Signups, Profile Fields and Member Types

This is the third post of a short series of tutorials in which we show you how to create a front-end dashboard for the BuddyPress plugin. This will be very useful for you to create a platform of sites where your clients can manage community sites with WordPress and BuddyPress.

Basically, your users will be able to manage a social network with WordPress, but they won’t have to access wp-admin to manage their site. Instead, they will be able to manage their sites and the BuddyPress admin pages from a beautiful frontend dashboard with custom design; you will be able to use any WordPress theme or page builder to create the frontend dashboard pages, including the BuddyPress pages.

The BuddyPress plugin allows you to “build any kind of community website using WordPress, with member profiles, activity streams, user groups, messaging, and more.”

You’ll also use the WP Frontend Admin plugin. It allows you to view any wp-admin page on the frontend to create beautiful frontend dashboards, web apps and platforms based on WordPress plugins.

How to manage BuddyPress signups, profile fields, and member types on the frontend.

In this tutorial, you will learn how to display and manage BuddyPress signups, profile fields, and member types on the frontend.

You just need to follow these simple steps:

1- Display the BuddyPress signups on the frontend

WP Frontend Admin allows you to display the BuddyPress signups on the frontend with one click, or using a simple shortcode.

If you want to display the signups on the frontend with one click, you need to:

1. Go to Users > Manage signups in wp-admin.
2. Click View on the frontend.

If on the other side you use a page builder, you can use a simple shortcode to display the BuddyPress signups on any section of your page.

Here are some examples of the page builders you can use to build beautiful frontend pages:

• Elementor
• Visual Composer
• Gutenberg
• Divi
• Beaver Builder
• WP Page Builder
• Page Builder by SiteOrigin
• Oxygen
• Live Composer
• Brizy
• Etc.

This is the shortcode you need to display the BuddyPress signups on the frontend:

[vg_display_admin_page page_url="users.php?page=bp-signups"]

Once you enter this shortcode on any page, hit Preview to display the BuddyPress signups on the frontend.

2- Select your BuddyPress signups page’s basic info

On the left side of the screen, WP Frontend Admin will display the Quick Settings panel, which allows you to configure your frontend pages easily.

You can start configuring the page by selecting the following basic information:

• Page title: We’ll call it Signups.
• URL slug: We’ll enter singups.
• Page template: We’ll select the Default template since we’re not using any page builder; instead, we’re using our theme’s settings.
• Add to this menu: You can add this page to any nav menu. We’ve created a special menu for our BuddyPress frontend dashboard, so we’ll select the menu in this field.

3- Hide any unnecessary fields, metaboxes, and elements

WP Frontend Admin allows you to customize your frontend pages by hiding any unnecessary elements, texts, fields, metaboxes.

As you see, the BuddyPress signups are stored in the Pending tab on the WordPress Users page. However, you may not need to give your clients or users access to the other user fields. In that case, it’s better to hide the tab selector to just keep the content of the Pending tab.

1. Click Hide element.
2. Click the element you want to hide.

You need to repeat these steps with every element you want to hide from this page.

You can also tick the Hide notices added by other plugins or themes checkbox.

4- Edit any texts on your frontend signups page

Besides hiding any unnecessary elements, you can edit the texts from the wp-admin pages displayed on the frontend. In this case, for instance, you can change the Users text into Signups since you won’t show all the users, only the users pending activation.

That’s just an example, but you can change any other texts to customize your platform as you want. Just follow these steps:

1. Hit Edit texts.
2. Edit any texts you want.
3. Hit Stop editing texts.

5- Disable any unnecessary plugins and publish the page

WP Frontend Admin cares about your frontend pages’ performance; that’s why we’ve added the option to disable specific plugins for each page. You need to tick the plugins that you won’t use on this admin page. Just be careful not to disable the BuddyPress plugin and any other plugin that may be used by this page.

Once you’re done configuring the frontend signups page, you can hit Save to apply the changes and publish the page.

6- Show the BuddyPress profile fields and member types on the frontend

Once you’ve shown the signups page on the frontend, you can proceed to repeat the same steps to display the BuddyPress profile fields on the frontend:

1. Go to Users > Profile fields in wp-admin.
2. Hit View on the frontend on the top admin bar.
3. Configure the page by selecting the basic information, hiding any unnecessary elements, hiding the texts on that page, etc.

Note. If you’re using any WordPress page builder, you can use the following shortcode to display the BuddyPress profile fields page on the frontend:

[vg_display_admin_page page_url="users.php?page=bp-profile-setup"]

After that, you can proceed to display the BuddyPress member types on the frontend by following the same steps explained above.

Note. You can use the following shortcode if you want to display the BuddyPress member types on any page created with any WordPress page builder:

[vg_display_admin_page page_url="edit-tags.php?taxonomy=bp_member_type"]

Remember that on each page, you can edit everything by following the same steps we explained above in this tutorial.

7- Allow users to manage signups, profile fields, and member types on the frontend

You need to keep in mind that only users with the bp_moderate capability will be able to manage the signups, profile fields and member types on the frontend. You can follow this tutorial to learn how to assign that permission to any user role.

Once your pages have been configured and added to the frontend BuddyPress dashboard, this is what they will look like:

Frontend signups page:

Frontend profile fields page:

Frontend member types page:

With these three pages, your users will be able to:

• View signups on the frontend
• Activate new community users
• Send emails to new signups
• Add and edit profile fields on the frontend
• Add, edit and remove member types on the frontend.

These are essential tasks for BuddyPress moderators, and they won’t have to deal with the normal wp-admin dashboard; instead, they will manage the signups, profile fields and member types on the frontend.