BuddyPress – How to View and Manage Groups on the Frontend

This is the fifth and last tutorial of a series where we show you how to build a beautiful frontend dashboard for the BuddyPress plugin. Your users will be able to view and manage the wp-admin pages from the BuddyPress plugin. This way, they will be able to manage a community BuddyPress site without having to use the normal wp-admin dashboard.

Here you’ll learn how to display and manage the BuddyPress groups on the frontend. Besides, we’ll show share with you a shortcode where you can add a log out button on to the frontend dashboard menu, and some links where you can learn how to integrate this dashboard with WordPress Multisite and WP Ultimo.

To build this frontend dashboard for BuddyPress, you need to have the BuddyPress plugin installed and activated on your WordPress site.

Besides, you need to install and activate the WP Frontend Admin plugin, which allows you to display any wp-admin page on the frontend to create beautiful frontend dashboards and web apps based on WordPress plugins.

Once you install and activate the plugin, you need to follow these simple steps to display the BuddyPress groups on the frontend.

1- Display the BuddyPress groups page on the frontend

To display the BuddyPress groups page on the frontend, you have at least two options.

First, you can display the BuddyPress groups page on the frontend with one click:

1. Go to Groups in wp-admin.
2. Hit View on the frontend on the top admin bar.

The second option is to display the BuddyPress groups on the frontend using any WordPress page builder. Here are some examples:

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

Use this shortcode to display the BuddyPress groups on the frontend:

[vg_display_admin_page page_url="admin.php?page=bp-groups"]

Once you enter the shortcode on the pag, hit Preview because WP Frontend Admin only shows admin content in Preview or Live mode, not in edit mode.

2- Select the basic info of the BuddyPress groups page on the frontend

You can use the Quick Settings panel that will be displayed on the left side of the screen to configure your frontend BuddyPress groups page.

You can start by selecting this basic info:

• Page title: We’ll call this page “Manage Groups”.
• URL slug: We’ll enter “manage-groups”.
• Page template: We’ll select the Default template to use our theme’s appearance settings.
• Add page to this menu: You can select the frontend dashboard’s navigation menu.

3- Simplify your frontend page by hiding any unnecessary elements

WP Frontend Admin allows you to include the essential elements only on your frontend pages. In this case, you can simplify the frontend BuddyPress groups page by hiding any unnecessary elements from it:

1. Hit Hide Element.
2. Hide any element you want.
3. Repeat these steps with every element you’ll hide from this frontend page.

You can also tick the Hide notices added by other plugins or themes checkbox to prevent users from seeing admin notices when managing the BuddyPress groups from the frontend.

4- Edit any texts on your frontend BuddyPress groups page

Besides hiding any unnecessary elements, you can edit any texts on your frontend admin pages to make the texts clearer or shorter, or to remove any references to plugin names:

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

Once you’re done applying these changes to the Groups list page, you can hit Save on the Quick Settings panel to publish the page.

5- Customize the edit group form on the frontend

You can hit the Add New button or open an existing group to customize the edit group form on the frontend.

You just need to hide any unnecessary elements or change any texts you want.

Once the page has been configured and published, this is what the groups list will look like:

Also, this is what the edit group form will look like on the frontend:

6- Allow any user role to manage the groups on the frontend

It’s important to keep in mind that only users with the bp_moderate capability will be able to manage the BuddyPress groups on the frontend.

You can follow this tutorial to learn how to assign that capability to any user role with the User Role Editor plugin.

7- Add a “Log Out” button to the frontend dashboard menu

You can easily add a Log Out button to the frontend BuddyPress dashboard so that your users don’t need anything from the normal wp-admin dashboard.

Here are the steps you need to follow:

1. Go to Appearance > Menus.
2. Edit the frontend dashboard’s nav menu.
3. Go to Custom Links.
4. Add a custom link and enter this shortcode as the URL: [vg_display_logout_url]
5. In Link Text you can enter something like “Log Out”.
6. Save the changes on the menu.

Bonus: Learn how to integrate WP Frontend Admin with WordPress Multisite and WP Ultimo

You can use WP Frontend Admin to create multisite platforms where users can create community websites using BuddyPress. Here’s a tutorial on how to integrate WP Frontend Admin with WordPress Multisite.

Also, you can monetize your Multisite Network using the WP Ultimo plugin, which allows you to sell memberships on your Mulsite Network. Here’s a tutorial where you can learn how to integrate WP Frontend Admin with WP Ultimo.

We’ve created a free WP Ultimo course to show you how to create a multisite platform for selling online stores. You can use the lessons from the course and adapt the platform to BuddyPress. You can take the free course here.