Admin sub menu page in wordpress custom plugin

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');

 

Leave a Reply