In this article, we will see how to add a custom menu WordPress add Admin menu with Submenu to the admin dashboard. As part of our WordPress Support Service, Bobcares responds to all queries, no matter how trivial.

WordPress add Admin menu with Submenu Overview

Integrating the plugin in WordPress is the very first step of building plugins. There are multiple ways to integrate the plugins including adding menus and submenus, adding meta boxes, and adding widgets. Come let’s explore the WordPress add Admin menu with Submenu.

What Does The Add_Menu_Page () Function Enable does?

A page’s involvement in the menu is determined with Add_Menu_Page () Function. It has the ability to let the user determine which pages can be included. When a function hooks into a page to return the output of the content it cross-checks that the user is capable of doing so.

How to Add A Menu To Dashboard In WordPress?

To add a custom navigation menu, the first preference is to get your theme’s code together and add them to your code-to-function. If you are working on a Php file then you can try to edit any existing list by opening the Add/Manage Php file option. Later Add or Choose Appearance * Menus page from WordPress admin.

How to Add A Menu To WordPress Theme?

To set up a Menu, go to Dashboard > Appearance. Click “Menus” and write down your preferred Menu Name. Click “Create Menu”

Adding a Menu

In order to add a menu to the WordPress admin dashboard, You can simply use add_menu_page() Function. This function consists of the following syntax.

//add plugin menu
 add_menu_page($page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position);

The function accepts the following parameters:

page_title: The title of the page.
menu_title: Menu title that will be displayed on the dashboard.
capability: Minimum capability to view the menu.
menu_slug: Unique name used for the menu item.
function:  Used to display page content.
icon_url: URL to custom image used as an icon.
position: Location in the menu order.

Let’s now create a new menu for our plugin.

function bobcares_plugin_top_menu(){
   add_menu_page('My Plugin', 'My Plugin', 'manage_options', __FILE__, 'bobcares_render_plugin_page', plugins_url('/img/icon.png',__DIR__));
 }
 add_action('admin_menu','bobcares_plugin_top_menu');

From the above, we used the admin_menu action hook to trigger the menu code. Also, we used manage_options to be set as the minimum capacity requirement.

It is suggested to store the return value of add_menu_page() call in a variable because you may need to customize the plugin page while using this variable like adding a help tab. That’s why we prefer to create plugins with PHP classes.

class MyPlugin{
  
      private $my_plugin_screen_name;
      private static $instance;
       /*......*/
  
      static function GetInstance()
      {
          
          if (!isset(self::$instance))
          {
              self::$instance = new self();
          }
          return self::$instance;
      }
      
      public function PluginMenu()
      {
       $this->my_plugin_screen_name = add_menu_page(
                                        'My Plugin', 
                                        'My Plugin', 
                                        'manage_options',
                                        __FILE__, 
                                        array($this, 'RenderPage'), 
                                        plugins_url('/img/icon.png',__DIR__)
                                        );
      }
      
      public function RenderPage(){
       ?>

       <?php
      }

      public function InitPlugin()
      {
           add_action('admin_menu', array($this, 'PluginMenu'));
      }
  
 }
 
$MyPlugin = MyPlugin::GetInstance();
$MyPlugin->InitPlugin();

Adding a Submenu

There are two types of submenus, one is menu items listed below your top-level menu and menu item listed below existing default menus in WordPress. To add submenus under the top-level menu, You can use add_submenu_page() Function. This function has the following syntax.

//add submenu
add_submenu_page($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function);

This function accepts the following parameters:

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

Let’s add a submenu to the previously created top-level menu.

function bobcares_plugin_top_menu(){
add_menu_page(‘My Plugin’, ‘My Plugin’, ‘manage_options’, __FILE__, ‘bobcares_render_plugin_page’, plugins_url(‘/img/icon.png’,__DIR__));
add_submenu_page(__FILE__, ‘Custom’, ‘Custom’, ‘manage_options’, __FILE__.’/custom’, ‘bobcares_render_custom_page’);
add_submenu_page(__FILE__, ‘About’, ‘About’, ‘manage_options’, __FILE__.’/about’, ‘bobcares_render_about_page’);
}
function bobcares_render_plugin_page(){
?>
<div class=’wrap’>
<h2></h2>
</div>
<?php
}
function bobcares_render_custom_page(){
?>
<div class=’wrap’>
<h2></h2>
</div>
<?php
}
function bobcares_render_about_page(){
?>
<div class=’wrap’>
<h2></h2>
</div>
<?php
}

add_action(‘admin_menu’,’bobcares_plugin_top_menu’);[/php]
<p>As you can see, The previous code creates two submenus to the top-level menu. Each of these submenus has a custom callback function to render page content.</p>
<p>We discussed how to add submenus to your custom top-level menu. It’s time to explore how to add submenus to existing default menus in wordpress. Here’s a list of all available functions in wordpress.</p>
<ul>
<li>[inline]add_dashboard_page[/inline]: Add a submenu to the dashboard top-level menu.</li>
<li>[inline]add_posts_page[/inline]: Add a submenu to the posts top-level menu.</li>
<li>[inline]add_media_page[/inline]: Add a submenu to the media top-level menu.</li>
<li>[inline]add_links_page[/inline]: Add a submenu to the links top-level menu.</li>
<li>[inline]add_pages_page[/inline]: Add a submenu to the pages top-level menu.</li>
<li>[inline]add_comments_page[/inline]: Add a submenu to the comments top-level menu.</li>
<li>[inline]add_theme_page[/inline]: Add a submenu to the themes top-level menu.</li>
<li>[inline]add_plugins_page[/inline]: Add a submenu to the plugins top-level menu.</li>
<li>[inline]add_users_page[/inline]: Add a submenu to the users top-level menu.</li>
<li>[inline]add_management_page[/inline]: Add a submenu to the tools top-level menu.</li>
<li>[inline]add_options_page[/inline]: Add a submenu to the settings top-level menu.</li>
</ul>
<p>All these functions have the same syntax so let’s explore the most commonly used one.</p>
[php] //add options page
add_options_page($page_title, $menu_title, $capability, $menu_slug, $function);

As you can see from the previous code, this creates a submenu under the settings top-level menu and set the page title to My Plugin, set minimum capability to manage_options, and set the callback function (bobcares_plugin_render_options_page) to be called when the submenu item is clicked.

Conclusion:

To conclude, we have discussed how to add a menu in the dashboard and create a custom menu in the admin area. Navigation menus have powerful web design tools. To point users to the most important sections of the website.