Adding Custom Screens to the Tab Bar
In this tutorial, you will learn how to add custom app screens to the Tab Bar and More Screen menus of the BuddyBoss App Plugin. For more information on how the Tab Bar works, see our Tab Bar tutorial.
If you are creating your own custom screens to be used in the app, you will need to add your screens into the menu system so that users will be able to navigate into your screens from within the app interface. You can optionally skip to the “Example Plugin” section at the end of the article, for an example plugin you can quickly test with.
Note: This tutorial requires BuddyBoss App Plugin v1.0.4 or higher.
1. Create one class file with namespace ‘BuddyBossApp\Menus’.
namespace BuddyBossApp\Menus;
class <ClassName> {
// Class code
}
2. The created class file in step 1 should be extended as ‘BuddyBossApp\Menus\MenuAbstract’ and should call the Parent class constructor.
class <ClassName> extends MenuAbstract {
public function __construct() {
parent::__construct();
}
}
3. Register a menu for your custom screen by passing the following details:
Menu_name : Menu unique name
Menu_label : Menu label
menu_icon : Menu Icon such as bbapp/library, etc.Find icons at /plugins/buddyboss-app/assets/app-icons/bbapp/
$this->register_custom_app_screen( '<menu_name>', '<menu_label>', '<menu_icon>' );
4. The menu created in the previous step should be available now. To check, go to the Custom Screens section at BuddyBoss App > Branding > Tab Bar.
5. To add settings to the custom screen, extend the following method.
/**
* Add Setting fields for this app menu.
*
* @param string $menuId Menu id.
* @param array $menu Menu array.
*/
public static function metabox( $menuId, $menu ) {
$default = array(
"settings" => array(),
);
$menu = array_replace_recursive( $default, $menu );
/**
* Add setting fields for this menu here.
*/
}
6. To extend / alter the menu REST API response for the custom screen, extend the below function in the class.
/**
* Prepare menu response or add custom data for this menu to be accessed in app.
*
* @param array $menu Menu array.
* @param \WP_REST_Request $request Rest Request
*
* @return array|void
*/
public static function get_results( $menu, $request ) {
$default = array(
"settings" => array(),
);
$menu = array_replace_recursive( $default, $menu );
// Extend or alter menu response here.
/**
* If you want to use this setting value in rest then you need to add that in data like below.
* Example: $menu["data"]["setting_key"] = (int) ( $menu["settings"][setting_key] ? $menu["settings"]["setting_key"] : $default["settings"]["setting_key"] );
*/
return parent::get_results( $menu, $request );
}
Template File:
namespace BuddyBossApp\Menus;
class <ClassName> extends MenuAbstract {
public function __construct() {
parent::__construct();
$this->register_custom_app_screen( '<menu_name>', '<menu_label>', '<menu_icon>' );
}
/**
* Add Setting fields for this app menu.
*
* @param string $menuId Menu id.
* @param array $menu Menu array.
*/
public static function metabox( $menuId, $menu ) {
$default = array(
"settings" => array(),
);
$menu = array_replace_recursive( $default, $menu );
/**
* Add setting fields for this menu here.
*/
}
/**
* Prepare menu response or add custom data for this menu to be accessed in app.
*
* @param array $menu Menu array.
* @param \WP_REST_Request $request Rest Request
*
* @return array|void
*/
public static function get_results( $menu, $request ) {
$default = array(
"settings" => array(),
);
$menu = array_replace_recursive( $default, $menu );
// Extend or alter menu response here.
/**
* If you want to use this setting value in rest add that in data like
* Example: $menu["data"]["setting_key"] = (int) ( $menu["settings"][setting_key] ? $menu["settings"]["setting_key"] : $default["settings"]["setting_key"] );
*/
return parent::get_results( $menu, $request );
}
}
Example Plugin
You can assemble the two PHP template files below into a folder, to create a plugin that will add a new “Books” menu in the Custom Screens section at BuddyBoss App > Branding > Tab Bar. This example plugin also contains an option to specify how many books should be displayed.
Note: For this to actually work in your app, we are assuming you have also already registered a “book” custom post type in WordPress. Alternatively, you can adjust this code to use your own custom post type.
buddyboss-app-custom.php
This is the loader file. Create a plugin folder and add this file into it.
<?php
/*
Plugin Name: BuddyBoss App Custom Screen Example
Plugin URI: {add your own}
Description: {add your own}
Version: 1.0.0
Author: {add your own}
Author URI: {add your own}
*/
if ( ! defined( 'ABSPATH' ) ) {
exit();
}
/**
* Load Custom Screen
*/
function bbapp_custom_screen_init() {
if ( class_exists( 'bbapp' ) ) {
include 'buddyboss-app-custom-screen.php';
new BuddyBossApp\Menus\Book();
}
}
add_action( 'plugins_loaded', 'bbapp_custom_screen_init' );
buddyboss-app-custom-screen.php
This file also goes into your plugin folder. This contains most of the functional code to register the custom app screen.
<?php
/**
* Custom 'Book' app screen file.
*/
namespace BuddyBossApp\Menus;
/**
* Class Book
* @package BuddyBossApp\Menus
*/
class Book extends MenuAbstract {
/**
* Book constructor.
*/
public function __construct() {
parent::__construct();
$this->init();
}
/**
*
*/
public function init() {
$this->register_custom_app_screen( 'book', 'Books', 'bbapp/library' );
}
/**
* Add Setting fields for this app menu.
*
* @param string $menuId Menu id.
* @param array $menu Menu array.
*/
public static function metabox( $menuId, $menu ) {
$default = array(
"settings" => array(
'count' => '5'
),
);
$menu = array_replace_recursive( $default, $menu );
/**
* Add setting fields for this menu.
*/
?>
<p class="field-label description description-wide">
<label><?php esc_attr_e( "Number of posts to show", 'buddyboss-app' ); ?></label>
<input type="number" min="0" max="10" class="widefat custom_screen_posts_count" name="appmenu-item[<?php echo esc_attr( $menuId ); ?>][settings][count]" value="<?php echo esc_attr( $menu['settings']['count'] ); ?>">
</p>
<?php
}
/**
* Prepare menu response or add custom data for this menu to be accessed in app.
*
* @param array $menu Menu array.
* @param \WP_REST_Request $request Rest Request
*
* @return array|void
*/
public static function get_results( $menu, $request ) {
$default = array(
"settings" => array(
'count' => 5
),
);
$menu = array_replace_recursive( $default, $menu );
/**
* Convert setting as a data field if you want to use an app.
*/
$menu["data"]["count"] = (int) ( $menu["settings"]['count'] ? $menu["settings"]["count"] : $default["settings"]["count"] );
return parent::get_results( $menu, $request );
}
}