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 add-on.

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

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

Note that there is a 'Settings' link in /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>',
)

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 becomes admin.php?page=bp-integrations&tab=bp-my_plugin

Tab Options

Now you can start modifying the options in the Integrations tab, by editing the file functions.php. The default setting is just a dummy option; it is non-functional. You will want to replace it with your own set of options.

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 options to 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`

If you are not planning to extend our existing components with your own settings, then you should remove this metabox completely from your plugin. To do this, delete or comment out the following functions from the file functions.php:

MYPLUGIN_bp_admin_setting_general_register_fields
MYPLUGIN_admin_general_setting_callback_my_addon
MYPLUGIN_enable_my_addon

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 CSS to reference your newly copied SVG file(s):

/* Integration Tab Icon */
.bp-admin-card.section-MYPLUGIN_settings_section h2:before {
	background-image: url('images/feather.svg');
	background-size: 18px 18px;
}

/* Component Settings Icon */
.bp-admin-card.section-MYPLUGIN_addon h2:before {
	background-image: url('images/feather.svg');
	background-size: 18px 18px;
}

Generic Icon

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.

Logo Icon

If you are using your logo as the icon, recommended for the Integrations tab, then it is expected for you to use color in your logo icon. This allows you to provide some branding. You may need to adjust the background-size property in the CSS when adding a custom icon, to get it to fit properly in the circle.