Skip to content

Instantly share code, notes, and snippets.

@indigetal
Last active August 12, 2023 17:50
Show Gist options
  • Save indigetal/42d317cad79b27e906b1f3499ad6cba6 to your computer and use it in GitHub Desktop.
Save indigetal/42d317cad79b27e906b1f3499ad6cba6 to your computer and use it in GitHub Desktop.
Add a custom settings tab to the user account page in BuddyBoss. Place code in theme child's functions.php file
<?php
function my_custom_user_settings_tab() {
// create the Custom Tab in the settings navigation
bp_core_new_subnav_item(
array(
'name' => __( 'Custom Tab', 'buddyboss-theme' ), // Replace 'Custom Tab' with the name of your tab
'slug' => 'custom-tab', // Change this to your desired slug
'parent_url' => bp_loggedin_user_domain() . 'settings/',
'parent_slug' => 'settings',
'screen_function' => 'add_custom_user_settings_tab',
'position' => 80, // Adjust the position as needed
'user_has_access' => bp_is_my_profile(),
)
);
}
add_action( 'bp_setup_nav', 'my_custom_user_settings_tab' );
function add_custom_user_settings_tab() {
// Loads the Custom Tab content
add_action( 'bp_template_content', 'my_custom_tab_content' );
bp_core_load_template( 'members/single/plugins' );
}
function my_custom_tab_content() {
// Include the Custom Tab content template file or shortcode
// Replace this line with the appropriate code to include your content
// For example, if using a shortcode: echo do_shortcode( '[your_custom_shortcode]' );
include_once WP_CONTENT_DIR . '/path/to/your/custom-tab-content.php';
}
?>
@indigetal
Copy link
Author

indigetal commented Aug 10, 2023

To set the icon use CSS, for example:

.subnav #mytab-personal-li #mytab::before { content: "\\eef8"; }

Where #mytab-personal-li is the ID of the list item of the new tab and #mytab is the ID of the <a> tag. Select the icon from the BuddyBoss Font Cheatsheet. (The extra "\" is to ensure that it will not be ignored as an escape character).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment