How to Change the Title of your First Submenu Page

There is a little thing you should know about WordPress’s add_submenu_page() function.  After creating your menu page using the add_menu_page(), you decide you would like a submenu page as well. So you use the add_menu_page() and add_submenu_page() functions, as below.

add_menu_page(
     __('My Plugin', 'text-domain'),
     __('My Plugin', 'text-domain'),
     'manage_options',
     'plugin-menu-page',
     'plugin_menu_page_callback'
);

add_submenu_page(
     'plugin-menu-page',
     __('Settings', 'text-domain'),
     __('Settings', 'text-domain'),
     'manage_options',
     'plugin-submenu-page',
     'plugin_submenu_page_callback'
);

As you look at your screen, you notice that the menu page and first submenu page have the same title. Why is this?

Menu_Page_Same_Title

Basically, when you use the add_menu_page() function to create a custom menu page and then use the add_submenu_page() function, WordPress casts the first submenu page to the top menu page. So, in order to get rid of this, just cast your first submenu page to the top menu. I know this sounds confusing at first, but look at the code below to see what I mean.

add_menu_page(
     __('My Plugin', 'text-domain'),
     __('My Plugin', 'text-domain'),
     'manage_options',
     'plugin-menu-page',
     'plugin_menu_page_callback'
);

add_submenu_page(
     'plugin-menu-page',
     __('General', 'text-domain'),
     __('General', 'text-domain'),
     'manage_options',
     'plugin-menu-page',
     'plugin_menu_page_callback'
);

add_submenu_page(
     'plugin-menu-page',
     __('Settings', 'text-domain'),
     __('Settings', 'text-domain'),
     'manage_options',
     'plugin-submenu-page',
     'plugin_submenu_page_callback'
);

As you can see, there are three function calls instead of the two used before. The first one is used to create the top menu. The second one, or the first add_submenu_page() function call, tells WordPress that the first submenu page will be a duplicate of the menu page but with a different title in the menu bar (i.e. “General”). The reason why the titles are different while the content remains the same, is because the menu slug (i.e. “plugin-menu-page”) and the callback function (i.e. “plugin_menu_page_callback”) in the first add_submenu_page() function call are the same as the add_menu_page() function call. Finally, the third function is technically the first real sub menu page that has its own content.

By following these steps, your plugins menu page will end up looking like the image below.

Menu_Page_Different_Title

Leave a Reply

Your email address will not be published. Required fields are marked *