Creating Primary and Secondary Menus in BuddyPress or BuddyBoss Profile Navigation

Creating Primary and Secondary Menus in BuddyPress or BuddyBoss Profile Navigation

This tutorial will guide you through the process of adding both primary and secondary (sub) menus to the BuddyPress or BuddyBoss profile navigation. We will use the bp_core_new_nav_item() and bp_core_new_subnav_item() functions to achieve this.

Prerequisites

  • You need to have BuddyPress or BuddyBoss installed and activated.
  • Basic understanding of WordPress hooks and functions.

Steps

1. Adding a Primary Menu to the BuddyPress Profile

We begin by adding a new primary menu to the user’s BuddyPress profile using the bp_core_new_nav_item() function. This primary menu will appear directly in the BuddyPress profile navigation.

Code for Adding a Primary Menu:

function my_custom_bp_profile_menu() {
    global $bp;

    // Create a new navigation item (Primary Menu)
    bp_core_new_nav_item( array(
        'name'                => __( 'My Custom Menu', 'textdomain' ),  // Menu Title
        'slug'                => 'custom-menu',                        // URL Slug
        'position'            => 30,                                   // Position in the menu
        'screen_function'     => 'my_custom_menu_content',             // Function to display content
        'default_subnav_slug' => 'custom-menu',                        // Default submenu when clicked
        'show_for_displayed_user' => true,                             // Show only on the profile of the displayed user
        'user_has_access'     => bp_is_my_profile(),                   // Only allow the owner to see the menu
    ));
}

// Hook the function to BuddyPress
add_action( 'bp_setup_nav', 'my_custom_bp_profile_menu', 100 );

/**
 * Function to display content on the custom menu page
 */
function my_custom_menu_content() {
    add_action( 'bp_template_content', 'my_custom_menu_page_content' );
    // Load BuddyPress template wrapper
    bp_core_load_template( apply_filters( 'bp_core_template_plugin', 'members/single/plugins' ) );
}

/**
 * Actual content that appears on the custom menu page
 */
function my_custom_menu_page_content() {
    echo '<h2>' . __( 'Welcome to My Custom Menu Page', 'textdomain' ) . '</h2>';
    echo '<p>' . __( 'This is a custom page added to the BuddyPress profile.', 'textdomain' ) . '</p>';
}

Explanation:

  • bp_core_new_nav_item(): Registers a new primary menu item in the BuddyPress profile.
    • name: Title of the menu.
    • slug: URL slug for the menu.
    • screen_function: The function responsible for displaying the content of the menu page.
    • user_has_access: Limits menu visibility to the profile owner.
  • my_custom_menu_content(): A function that displays the custom content when the menu is clicked.

Result:

This will add a new menu titled “My Custom Menu” to the user’s profile navigation. When clicked, it will display the content defined in the my_custom_menu_page_content() function.

2. Adding Submenus (Secondary Menus) to the Primary Menu

Next, we add two submenus under the primary “My Custom Menu” we just created. This will provide additional navigation options under the main menu.

Code for Adding Submenus:

function my_custom_bp_profile_menu() {
    global $bp;

    // Create a new parent navigation item (Primary Menu)
    bp_core_new_nav_item( array(
        'name'                => __( 'My Custom Menu', 'textdomain' ),  // Menu Title
        'slug'                => 'custom-menu',                        // URL Slug
        'position'            => 30,                                   // Position in the menu
        'screen_function'     => 'my_custom_menu_content',             // Default Function for Parent Menu
        'default_subnav_slug' => 'custom-submenu-1',                   // Default submenu when clicked
        'show_for_displayed_user' => true,                             // Show for the profile of displayed user
        'user_has_access'     => bp_is_my_profile(),                   // Only allow profile owner to see this
    ));

    // Add Submenu 1 under "My Custom Menu"
    bp_core_new_subnav_item( array(
        'name'            => __( 'Submenu 1', 'textdomain' ),           // Submenu Title
        'slug'            => 'custom-submenu-1',                        // Submenu Slug
        'parent_slug'     => 'custom-menu',                             // Parent menu slug
        'parent_url'      => trailingslashit( bp_displayed_user_domain() . 'custom-menu' ),  // Parent URL
        'screen_function' => 'my_custom_submenu_1_content',             // Function to display content
        'position'        => 10,                                        // Submenu Position
        'user_has_access' => bp_is_my_profile(),                        // Only allow profile owner to see this
    ));

    // Add Submenu 2 under "My Custom Menu"
    bp_core_new_subnav_item( array(
        'name'            => __( 'Submenu 2', 'textdomain' ),           // Submenu Title
        'slug'            => 'custom-submenu-2',                        // Submenu Slug
        'parent_slug'     => 'custom-menu',                             // Parent menu slug
        'parent_url'      => trailingslashit( bp_displayed_user_domain() . 'custom-menu' ),  // Parent URL
        'screen_function' => 'my_custom_submenu_2_content',             // Function to display content
        'position'        => 20,                                        // Submenu Position
        'user_has_access' => bp_is_my_profile(),                        // Only allow profile owner to see this
    ));
}
add_action( 'bp_setup_nav', 'my_custom_bp_profile_menu', 100 );

/**
 * Submenu 1 content display function
 */
function my_custom_submenu_1_content() {
    add_action( 'bp_template_content', 'my_custom_submenu_1_page_content' );
    bp_core_load_template( apply_filters( 'bp_core_template_plugin', 'members/single/plugins' ) );
}

/**
 * Function to display content for Submenu 1
 */
function my_custom_submenu_1_page_content() {
    echo '<h2>' . __( 'Welcome to Submenu 1', 'textdomain' ) . '</h2>';
    echo '<p>' . __( 'This is the content for Submenu 1 under the custom menu.', 'textdomain' ) . '</p>';
}

/**
 * Submenu 2 content display function
 */
function my_custom_submenu_2_content() {
    add_action( 'bp_template_content', 'my_custom_submenu_2_page_content' );
    bp_core_load_template( apply_filters( 'bp_core_template_plugin', 'members/single/plugins' ) );
}

/**
 * Function to display content for Submenu 2
 */
function my_custom_submenu_2_page_content() {
    echo '<h2>' . __( 'Welcome to Submenu 2', 'textdomain' ) . '</h2>';
    echo '<p>' . __( 'This is the content for Submenu 2 under the custom menu.', 'textdomain' ) . '</p>';
}

Explanation:

  • bp_core_new_subnav_item(): Adds submenus under the main parent menu.
    • parent_slug: Links the submenu to the parent menu (custom-menu).
    • parent_url: The URL where the parent menu is located.
    • screen_function: Function to display the content when the submenu is clicked.

Result:

  • A new primary menu titled “My Custom Menu” will be created in the BuddyPress profile navigation.
  • Two submenus, “Submenu 1” and “Submenu 2”, will be added under the “My Custom Menu”.
  • Each submenu will display its own content when clicked.

With the above code snippets, you can easily create both primary and secondary (submenu) items in the BuddyPress or BuddyBoss profile navigation. This is a powerful way to extend user profiles with custom content and navigation.

Feel free to customize the content functions to fit your needs, and ensure the right permissions are in place to control visibility.

Update on April 15, 2025

BuddyPress