The Frontend Dashboard allows developers to customize menu items effectively. You can:
- Add new menus and submenus.
- Remove existing menus.
- Reorder or organize menus based on priority.
- Hide specific menus from public view.
This flexibility ensures seamless customization to match your specific requirements. To do this in StoreEngine, you need to use a storeengine filter hook. The hook is:
storeengine/frontend_dashboard_menu_itemsAdding a Menu
Use the storeengine/frontend_dashboard_menu_items filter to modify the current menus. Here’s an example:
add_filter( 'storeengine/frontend_dashboard_menu_items', 'add_menu' );
function add_menu( $items ) {
// items without submenu
$items['demo-item'] = array(
'label' => __( 'Demo Item', 'storeengine' ),
'icon' => 'storeengine-icon storeengine-icon--box',
'public' => true,
'priority' => 35,
);
// item with submenu
$items['courses'] = array(
'label' => __( 'Courses', 'storeengine' ),
'icon' => 'storeengine-icon storeengine-icon--brand-style',
'public' => true,
'priority' => 30,
'children' => [
'category' => array(
'label' => __( 'Categories', 'storeengine' ),
'public' => true,
'priority' => 30,
),
'tag' => array(
'label' => __( 'Tags', 'storeengine' ),
'public' => true,
'priority' => 30,
),
],
);
return $items;
}Menu item keys:
- label: The display name for the menu.
- icon: Icon class for adding icon.
- public: Visibility setting (true for public, false to hide).
- priority: Determines menu order (lower priority appears first).
single menu:
$items['demo-item'] = array(
'label' => __( 'Demo Item', 'storeengine' ),
'icon' => 'storeengine-icon storeengine-icon--box',
'public' => true,
'priority' => 35,
);Using this code, will add a menu with the label Demo Item in your frontend dashboard.
menu with submenus:
$items['courses'] = array(
'label' => __( 'Courses', 'storeengine' ),
'icon' => 'storeengine-icon storeengine-icon--brand-style',
'public' => true,
'priority' => 30,
'children' => [
'category' => array(
'label' => __( 'Categories', 'storeengine' ),
'public' => true,
'priority' => 30,
),
'tag' => array(
'label' => __( 'Tags', 'storeengine' ),
'public' => true,
'priority' => 30,
),
],
);The above code will add a menu with the label “Courses” with Submenu of “Categories” and “tags”.
Frontend Dashboard view: Here’s a preview for your dashboard. You can see the available menu and submenu in the Courses section
The courses and Demo Item menu were added to the frontend dashboard.
Removing a Menu
To remove an existing menu, use the unset function to delete the corresponding array key:
if( isset( $items['edit-account'] ) ) {
unset( $items['edit-account'] );
}Before removal: Account menu is visible.
After removal: Account menu is no longer visible.
Organizing Menu Items
To reorder menus, adjust the priority value. Lower values appear higher in the menu list.
// items without submenu
$items['demo-item'] = array(
'label' => __( 'Demo Item', 'storeengine' ),
'icon' => 'storeengine-icon storeengine-icon--box',
'public' => true,
'priority' => 30,
);
// item with submenu
$items['courses'] = array(
'label' => __( 'Courses', 'storeengine' ),
'icon' => 'storeengine-icon storeengine-icon--brand-style',
'public' => true,
'priority' => 32,
'children' => [
'category' => array(
'label' => __( 'Categories', 'storeengine' ),
'public' => true,
'priority' => 30,
),
'tag' => array(
'label' => __( 'Tags', 'storeengine' ),
'public' => true,
'priority' => 30,
),
],
);Before organizing the menu item: As you can see the “Demo Item” is below “Courses”
After organizing the menu item: You’ll see the “demo Item” before Courses.
Hiding a Menu
To hide a menu, set its public attribute to false. Hidden menus will not appear in the frontend dashboard.
$items['courses'] = array(
'label' => __( 'Courses', 'storeengine' ),
'icon' => 'storeengine-icon storeengine-icon--brand-style',
'public' => false,
'priority' => 32,
'children' => [
'category' => array(
'label' => __( 'Categories', 'storeengine' ),
'public' => true,
'priority' => 30,
),
'tag' => array(
'label' => __( 'Tags', 'storeengine' ),
'public' => true,
'priority' => 30,
),
],
);The menu Items are now hidden:
Menu Array Structure
Here’s the code of array structure for menu:
$items['courses'] = array(
'label' => __( 'Courses', 'storeengine' ),
'icon' => 'storeengine-icon storeengine-icon--brand-style',
'public' => false,
'priority' => 32,
'children' => [
'category' => array(
'label' => __( 'Categories', 'storeengine' ),
'public' => true,
'priority' => 30,
),
'tag' => array(
'label' => __( 'Tags', 'storeengine' ),
'public' => true,
'priority' => 30,
),
],
);Array keys:
- menu_slug: Unique identifier for the menu.
- label: Display name for the menu.
- icon: Class for the icon.
- public: Visibility option.
- priority: Determines the menu’s display order.
- children: Contains submenus with similar parameters.
Adding content for menu
To do this, you need to use a storeengine action hook. The hook is:
storeengine/frontend/dashboard_{slug}_endpointHere {slug}will be replaced with the appropriate menu key.
Adding content for demo-item menu
add_action('storeengine/frontend/dashboard_demo-item_endpoint', 'add_demo_item_content');
function add_demo_item_content() {
echo 'This is a demo item content.';
}Now, you’ll see the page content
If you encounter 404, then updating the site’s permalink structure will fix the issue.
Adding content for courses and its submenu
add_action( 'storeengine/frontend/dashboard_courses_endpoint', 'add_courses_content' );
function add_courses_content( string $sub_page ) {
if ( empty( $sub_page ) ) {
// for the parent page.
echo 'This is a courses content.';
} else if ( 'category' === $sub_page ) {
// for child page - category
echo 'This is a subpage of courses content - Categories';
} else if ( 'tag' === $sub_page ) {
// for child page - tag
echo 'This is a subpage of courses content - Tags';
}
}