Create Menu & Submenu Admin Dashboard in WordPress

add a new top-level menu to WordPress administration dashboard, You can use add_menu_page() function.

1. add_menu_page($page_title:string, $menu_title:string, $capability:string, $menu_slug:string, $function:callable, $icon_url:string, $position:integer|null );

page_title: The page title.
menu_title: The menu title displayed on dashboard.
capability: Minimum capability to view the menu.
menu_slug: Unique name used as a slug for menu item.
function: A callback function used to display page content.
icon_url: URL to custom image used as icon or used wp icons.
position: Location in the menu order.

1. add_submenu_page( $parent_slug:string, $page_title:string, $menu_title:string, $capability:string, $menu_slug:string, $function:callable );

parent_slug: Slug of the parent menu item.
page_title: The page title.
menu_title: The submenu title displayed on dashboard.
capability: Minimum capability to view the submenu.
menu_slug: Unique name used as a slug for submenu item.
function: A callback function used to display page content.

menu and submenu-option

1. <?php
2. /*
3. ================
4. ADMIN PAGE
5. =================
6. */
7. function success_add_admin_page() {
9. //Generate Success Admin Page
10. add_menu_page( 'Success Theme Options', 'Success', 'manage_options', 'cnc_success', 'success_theme_create_page', 'dashicons-welcome-learn-more', 110 );
12. //Generate Success Admin Sub Pages
13. add_submenu_page( 'cnc_success', 'Success Sidebar Options', 'Sidebar', 'manage_options', 'cnc_success', 'success_theme_create_page' );
14. add_submenu_page( 'cnc_success', 'Success Theme Options', 'Theme Options', 'manage_options', 'cnc_success_theme', 'success_theme_support_page' );
15. add_submenu_page( 'cnc_success', 'Success CSS Options', 'Custom CSS', 'manage_options', 'cnc_success_css', 'success_theme_settings_page');
17. }
18. add_action( 'admin_menu', 'success_add_admin_page' );
20. //Template submenu functions
21. function success_theme_create_page() {
22. echo '<h1>Success General Setting</h1>';
23. }
25. function success_theme_support_page() {
26. echo '<h1>Success Support Page</h1>';
27. }
29. function success_theme_settings_page() {
30. echo '<h1>Success Custom CSS</h1>';
31. }

This snipt create a menu success and sub-menu General, Theme Options, Custom CSS