We added a top-level menu (add_menu_page) to the WordPress Dashboard. We may want to create a custom WordPress admin sub-level menu and its page for our own top level. Now we are going to add a submenu to that menu.
add_submenu_page( string $parent_slug, string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '' );
add_submenu_page( 'sample-page', __( 'Page Title - Honar Systems', 'my-textdomain' ), __( 'Sub Menu Title', 'my-textdomain' ), 'manage_options', 'sample-page-sub-menu', 'hs_sub_menu_admin_page_contents');
function hs_sub_menu_admin_page_contents(){ ?> <h1> <?php esc_html_e( 'Welcome to my custom sub menu admin page.', 'my-plugin-textdomain' ); ?> </h1> <?php }
Entire code
function my_admin_menu() {
add_menu_page( __('Page Title - Honar Systems', 'my-textdomain'),
__('Menu Title', 'my-textdomain'),
'manage_options', 'sample-page',
'my_admin_page_contents', 'dashicons-schedule', 3
);
add_submenu_page('sample-page', __('Page Title - Honar Systems',
'my-textdomain'), __('Sub Menu Title', 'my-textdomain'),
'manage_options', 'sample-page-sub-menu',
'my_sub_menu_admin_page_contents');
}
add_action('admin_menu', 'my_admin_menu');
function my_admin_page_contents() {
?> <h1> <?php esc_html_e('Welcome to my custom admin page.', 'my-plugin-textdomain'); ?> </h1>
<?php }
function my_sub_menu_admin_page_contents() { ?>
<h1> <?php esc_html_e('Welcome to my custom sub menu admin page.', 'my-plugin-textdomain'); ?> </h1>
<?php }
function load_custom_wp_admin_style($hook) {
wp_enqueue_style('custom_wp_admin_css', get_template_directory_uri() . '/assets/style.css');
// Load color picker styles.
wp_enqueue_style('wp-color-picker');
wp_enqueue_script('custom_wp_admin_js', get_template_directory_uri() . '/assets/script.js');
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_style');