How to Add/Modify New Menu & Sub-Menu

Dokan Multi Vendor Documentation

To manage your marketplace more easily, admins can now add a new menu or modify an existing menu in the vendor dashboard. Also, you as an admin can add submenus to the new or existing menus as well.

Here are the steps on how to add/modify the new menu and sub-menu.

How to Add/Modify Menu Items in Vendor Dashboard

You need to add the following code to your function.php file.

Note: You will find the function.php file in the activated theme folder.

Using this filter, one can add/modify menu items as follows:

apply_filters( 'dokan_get_dashboard_nav', array $menus );

Parameters:

array<string,array> $menus
function get_dashboard_nav( $menus ) {
    $custom_menus = [
        'custom_menu' => [
            'title' => __( 'Custom Menu', 'dokan-lite' ),
            'icon'  => '<i class="fas fa-briefcase"></i>',
            'url'   => dokan_get_navigation_url( 'custom_menu' ),
            'pos'   => 30,
        ],
        'existing_menu' => [
            'title' => __( 'Modified Existing Menu', 'dokan-lite' ),
            'icon'  => '<i class="fas fa-briefcase"></i>',
            'url'   => dokan_get_navigation_url( 'existing_menu' ),
            'pos'   => 40,
        ],
        'custom_menu_with_submenu' => [
           'title'   => __( 'Custom Menu with Submenu', 'dokan-lite' ),
           'icon'    => '<i class="fas fa-cog"></i>',
           'url'     => dokan_get_navigation_url( 'custom_menu_with_submenu/submenu1' ),
           'pos'     => 60,
           'submenu' => [
               'submenu1' => [
                    'title'      => __( 'Submenu 1', 'dokan-lite' ),
                    'icon'       => '<i class="fas fa-university"></i>',
                    'url'        => dokan_get_navigation_url( 'custom_menu_with_submenu/submenu1' ),
                    'pos'        => 10,
                    'permission' => 'dokan_view_store_settings_menu',
               ],
               'submenu2' => [
                   'title'      => __( 'Submenu 2', 'dokan-lite' ),
                   'icon'       => '<i class="fas fa-university"></i>',
                   'url'        => dokan_get_navigation_url( 'custom_menu_with_submenu/submenu2' ),
                   'pos'        => 20,
                   'permission' => 'dokan_view_store_settings_menu',
               ],
            ],
        ],
    ];

    return array_merge( $menus, $custom_menus );
}

add_filter( 'dokan_get_dashboard_nav', 'get_dashboard_nav' );

Replace the ‘custom_menu’ with your selected name to add a new menu item.

This image shows Dokan dashboard

Or if you want to modify an existing menu, add the menu name you want to modify by replacing the ‘existing_menu’ option. For example, we have replaced the product menu with the “Modified Existing Menu”.

This image shows modified menu on Dokan dashboard

How to Add Submenu to Any Menu & Also Modify Existing Submenu Items in Vendor Dashboard

You can add submenu items to the menu as well. You need to add the code in the function.php file as well.

Using this filter hook, one can add a submenu to any menu and also can modify existing submenu items as follows:

apply_filters( 'dokan_dashboard_nav_submenu', array $submenu_items, string $nav_key );

Parameters:

array<string,array> $submenu_items Associative array of submenu items.
string              $menu_key      Key of the corresponding menu.
function filter_submenu( $submenu_items, $nav_key ) {
    if ( 'settings' === $nav_key ) {
        $submenu_items = array_merge(
            $submenu_items,
            [
                'store' => array(
                    'title'      => __( 'Modified Store', 'dokan-lite' ),
                    'icon'       => '<i class="fas fa-university"></i>',
                    'url'        => dokan_get_navigation_url( 'settings/store' ),
                    'pos'        => 30,
                    'permission' => 'dokan_view_store_settings_menu',
                ),
                'new_submenu' => array(
                    'title'      => __( 'New Submenu', 'dokan-lite' ),
                    'icon'       => '<i class="far fa-credit-card"></i>',
                    'url'        => dokan_get_navigation_url( 'settings/new_submenu' ),
                    'pos'        => 50,
                    'permission' => 'dokan_view_store_payment_menu',
                ),
            ]
        );
    }

    return $submenu_items;
}

add_filter( 'dokan_dashboard_nav_submenu', 'filter_submenu', 10, 2 );

Instead of ‘settings’ you can write the name of the other existing menu. For example, we have added sub-menu items to the “Delivery Time” menu.

Also, in order to add sub menus, copy the code from “$submenu_items” and add your menus.

This image shows sub-menu on Dokan dashboard

This is how you can add/modify a new menu & sub-menu to customize the vendor dashboard.

You can also check out this video tutorial