This is the first post of a short series of tutorials where we’ll show you how to create a front-end dashboard to manage the BuddyPress admin pages without using the normal WordPress dashboard.
This is perfect to create a platform where users can “build any kind of community website using WordPress, with member profiles, activity streams, user groups, messaging, and more.”
And the best is that they won’t have to use the normal backend WordPress dashboard. Instead, they will use a beautiful frontend dashboard designed with any WordPress theme or page builder.
Besides the BuddyPress plugin, which provides you all the community website settings, you need to install and activate the WP Frontend Admin plugin. It allows you to display any wp-admin page on the frontend to create front-end dashboards and web apps based on WordPress plugins.
You can integrate this plugin with WordPress Multisite and WP Ultimo to create multisite platforms and sell your web as a service.
You can try the premium plugin on your website for free for 7 days.
In this tutorial, you’ll learn how to view the BuddyPress activity on the frontend, so after installing and activating WP Frontend Admin, you need to follow these simple steps to view the activity page on the frontend.
1- Display the BuddyPress activity page on the frontend
Something important to mention is that BuddyPress includes an activity page where the users can view their own activity on the frontend, as well as the activity from other users of the community. However, that’s not the page we’ll create in this tutorial.
We’ll display the BuddyPress Activity page from the wp-admin dashboard, the activity page that is seen by administrators and that can normally be seen from wp-admin only.
Go to Activity in wp-admin and hit View on the frontend on the top admin bar.
Besides being able to display the BuddyPress activity page on the frontend with one click, you can use a simple shortcode if you’re using a page builder to create your frontend page.
Here are some of the page builders you can use to create your frontend activity page:
- Elementor
- Visual Composer
- Gutenberg
- Divi
- Beaver Builder
- WP Page Builder
- Page Builder by SiteOrigin
- Oxygen
- Live Composer
- Brizy
- Etc.
If you use any of these page builders, you can use the following shortcode to display the BuddyPress activity on the frontend:
[vg_display_admin_page page_url="admin.php?page=bp-activity"]
Once you enter this shortcode on any section of your page, hit Preview to view the activity page on the frontend. This is important because WP Frontend Admin only shows admin content on the frontend in Preview or Live mode, not in editor mode.
2- Select your frontend BuddyPress activity page’s basic information
WP Frontend Admin will display the BuddyPress activity page on the frontend, and you’ll see the Quick Settings panel on the left side of the screen. This panel contains all the tools and settings you need to configure your frontend activity page.
You can start configuring the page by selecting the following info:
- Page title: We’ll enter something like Network Overview.
- URL slug: Enter the URL slug using keywords only. We’ll enter something like “net-overview”.
- Page template: You can use the Default page template to use your theme’s appearance.
- Add to this menu:
- Add to this menu: Since we’re creating a custom dashboard to manage BuddyPress admin pages on the frontend, we can create a nav menu to add the pages to it, and select the menu in this field.
3- Hide any unnecessary elements from your frontend BuddyPress activity page
WP Frontend Admin allows you to customize your frontend pages by hiding any unnecessary element, text, field, metabox, etc.
This is really useful because you can customize your platforms by hiding any upgrade buttons or plugin names, etc. Your clients don’t need to know if you’re using a WordPress plugin behind the scenes to build their platform.
To remove any unnecessary elements from your frontend BuddyPress activity page, you need to follow these steps:
- Hit Hide element
- Click on the element you want to hide.
It’s important to keep in mind that you need to repeat these steps with every element you want to hide.
Besides, you can tick the Hide notices added by other plugins or themes checkbox to prevent users from seeing admin notices on the frontend.
4- Edit any texts on your frontend activity page
Besides allowing you to hide any unnecessary elements from your frontend pages, WP Frontend Admin allows you to edit any texts from your frontend pages.
This allows you to customize your pages even more because you can rename fields and metaboxes to remove any references to plugin’s or theme’s names.
You can also remove unnecessary words or sentences and keep others.
- Hit Edit texts.
- Edit all the texts you want to change.
- Hit Stop editing texts.
5- Disable any unnecessary plugins and publish the page
WP Frontend Admin includes the option to disable any unnecessary plugins to increase performance for every frontend page you create.
You just need to tick the plugins that won’t be used by this page on the Quick Settings panel.
Just be careful to not disable the BuddyPress plugin.
Once you’re done configuring your page, hit Save to apply the changes and publish the page. It will be added to the frontend dashboard immediately.
Take into account that only the users with the bp_moderate capability will be able to view the BuddyPress activity on the frontend.
You can follow this tutorial to learn how to add that capability to any user role using the User Role Editor plugin.
This is what the BuddyPress activity will look like on the frontend dashboard:
In the next tutorial, we’ll show you how to view and manage the BuddyPress emails page on the frontend.
You can try the premium plugin on your website for free for 7 days.