BuddyPress Admin Tabs will look different in 10.0.0

Observing the WordPress Administration screens, we’ve noticed the ones using tabs (such as the Privacy Settings screen) had a page layout that started looking like the Site Heath Screen’s one. We thought applying this specific layout to our Settings and Tools Administration screens would improve their integration into your WordPress Administration.

The only variation we included is our beloved bright red logo before the title of the page 👇

BP Admin Tabs’ next appearance

What happens to the custom tab my plugin is adding 😱?

If you are a BuddyPress plugin developer and added a custom tab to ours to let the site’s admin set your plugin’s options from the BuddyPress Settings screen, you might wonder what this change means for your plugin.

To make sure your custom tab/screen is still looking nice, we included some backward compatibility code to dynamically adjust your screen layout according to the new one 💪. You’ll simply find a notice into your screen when defining WP_DEBUG to true into your wp-config.php file.

Result of the backward compatibility code.

Please, update the way you add your custom tab 🙏

Below is the same screen as the above one using the new way to add custom tabs to the BuddyPress Settings/Tools screens. To be precise, it’s the BP Rewrites Admin screen 😉

BP Rewrites Admin Screen

We encourage you to progressively update your plugin’s code, thanks in advance 😍. All the needed steps are described into the BP Rewrites pull request we used to prepare it to BuddyPress 10.0.0.

1. Reference your screen into the global variable BuddyPress uses to store the settings (or the tools) screens hooking to bp_admin_submenu_pages new action (see this code).
2. Use the bp_core_get_admin_settings_tabs (or bp_core_get_admin_tools_tabs if you’re targetting the BuddyPress Tools screen) to let BuddyPress know about the link and text to use into the tab (see this code).
3. Use the new bp_core_admin_tabbed_screen_header() function into the function you use to display your screen and replace the "wrap" class of your main container by "buddypress-body" (see this code)

That’s it 🏁

#10-0-0, #admin