Editing the admin options and icons

When you activate the plugin, you will find two new settings areas in the BuddyBoss admin area. In this document you will learn how to modify those settings for your own plugin.

Table of Contents

• Integrations Settings Tab
• Additional Component Settings
• Adding custom icons

Integrations Settings Tab

Tab Name and Slug

In the WordPress dashboard, navigate to BuddyBoss > Integrations > Add-on. This is an entirely new Integrations tab added by this plugin. You can use this to add your own primary set of options for your integration.

To change the name of the tab, you will open the file /integration/buddyboss-integration.php and then change the tab slug 'my-plugin' and the tab title 'Add-on' from these two lines of code:

'add-on',
__( 'Add-on', 'buddyboss-platform-addon' ),
'add-on',

Note that there is a 'Settings' link /wp-admin/plugins.php under the name of your plugin, which links to its Integrations tab. After changing the above function, this link will break. To fix this, find the following lines of code in the same file:

array(
	'settings' => '<a href="' . esc_url( bp_get_admin_url( 'admin.php?page=bp-integrations&tab=bp-add-on' ) ) . '">' . __( 'Settings', 'buddyboss-platform-addon' ) . '</a>',
)

And then edit the text 'add-on' at the end of the URI admin.php?page=bp-integrations&tab=bp-add-on in the function, to be the same as the tab slug you defined above. So for example, if your tab slug is 'my_plugin' then the URI in the function will read as admin.php?page=bp-integrations&tab=bp-my_plugin

Tab Options

Then, you can start modifying the options in the settings by editing the file functions.php.

If you decide to remove this settings tab, note that we are also linking to it in the plugins.php page in the WordPress dashboard. Under your plugin's name in the list, you will see a 'Settings' link that redirects to its primary settings tab. You will need to delete the below function from functions.php:

if ( ! function_exists( 'MYPLUGIN_modify_plugin_action_links' ) ) {
	function MYPLUGIN_modify_plugin_action_links( $links, $file ) {

		// Return normal links if not BuddyPress.
		if ( MYPLUGIN_BB_ADDON_PLUGIN_BASENAME != $file ) {
			return $links;
		}

		// Add a few links to the existing links array.
		return array_merge(
			$links,
			array(
				'settings' => '<a href="' . esc_url( bp_get_admin_url( 'admin.php?page=bp-settings&tab=bp-addon' ) ) . '">' . __( 'Settings', 'buddyboss-platform-addon' ) . '</a>',
			)
		);
	}

// Add link to settings page.
	add_filter( 'plugin_action_links', 'MYPLUGIN_modify_plugin_action_links', 10, 2 );
	add_filter( 'network_admin_plugin_action_links', 'MYPLUGIN_modify_plugin_action_links', 10, 2 );
}

Additional Component Settings

In the WordPress dashboard, navigate to BuddyBoss > Settings > General. Scroll to the bottom and you will see a new settings metabox titled 'Add-on Settings'. This is useful for extending our existing components with your own additional settings, such as adding to the General settings, Profile settings, Activity settings, and so on.

The functions that create this metabox can be found in the file functions.php. You will see that we are hooking into the General settings area with the following hook:

bp_admin_setting_general_register_fields

You can change this to any of the following to move the metabox into another settings tab:

Settings Tab	Hook
General Settings	`bp_admin_setting_general_register_fields`
Profile Settings	`bp_admin_setting_xprofile_register_fields`
Group Settings	`bp_admin_setting_groups_register_fields`
Forum Settings	`bp_admin_setting_forums_register_fields`
Activity Settings	`bp_admin_setting_activity_register_fields`
Media Settings	`bp_admin_setting_media_register_fields`
Connection Settings	`bp_admin_setting_friends_register_field`
Email Invites Settings	`bp_admin_setting_invites_register_fields`
Network Search Settings	`bp_admin_setting_search_register_fields`

Adding custom icons

Icon styles are important, as they contribute to a consistent and pleasing admin experience for site owners. Both of the settings areas above are using icons that match the style of our other admin areas. However, you will want to replace these icons with ones that make sense for your plugin.

First, you will need to find the icon(s) that you will be using. Most of the icons in our admin settings come from Font Awesome SVG files, and we suggest you do the same (unless your logo is the icon). You will need to download a copy of all of their SVG icons from this Font Awesome URL. Click the button prompting you to 'Download Font Awesome Free for the Web'. Once you extract the downloaded ZIP file, you will find all of the SVG files that match our admin icon style in the folder /svgs/solid/.

Once you pick out the icon(s) you want to use in your admin options, copy and paste those SVG files into the /images/ directory in your plugin.

Then open the file style.css, used for loading CSS in the WordPress dashboard. Edit the background-image paths in the below functions to reference your newly copied SVG file(s):

.bp-admin-card.section-MYPLUGIN_addon h2:before {
	background-image: url('images/feather.svg');
}

.bp-admin-card.section-MYPLUGIN_settings_section h2:before {
	background-image: url('images/feather.svg');
}

If you just want to use a generic settings icon, you can reference tools.svg which is already included in the /images/ directory. You can also create your own custom icon if you prefer, but just make sure to use the same monochrome hex #333333 color as the other icons, and to match the icon style. If you are adding your logo as the icon, in the Integrations tab, then it is recommended for you to use color in your logo icon.