How to Add Menus and Submenus in the WordPress Admin Panel

If you are done with WordPress Admin Panel’s default Menu or would like to customize it as per your re

Navigating the WordPress admin panel can be made easier by customizing it with your menus and submenus. 

In this post, we will walk you through the steps to add menus and submenus using simple code snippets. 

Whether you want to organize plugin settings or create custom options, adding menus can make your WordPress admin area more customized and user-friendly. But first, let’s clear some basics.

---

---

What are Menus and Submenus?

Menus are the main items that you generally notice in the WordPress admin sidebar, like “Posts,” “Pages,” and “Settings.”

However, Submenus are options listed under a main menu. For example, under “Posts,” you’ll find submenus like “All Posts” and “Add New.” In short, Submenus are options listed under a main menu.

---

How to Add a Custom Menu

Now you must be wondering How to even Add a Custom Menu in the WordPress admin dashboard. 

Well, it’s not that tricky, all you have to simply use the add_menu_page() function.

Here’s a simple step-by-step method you can follow:

1. Open Your Theme’s functions.php File: 

   You can find this file by going to your WordPress dashboard, navigating to “Appearance” > “Theme File Editor,” and selecting the functions.php file.

2. Add the Following Code:

function custom_plugin_menu() {

    add_menu_page(

        'My Custom Plugin', // Page title

        'My Plugin',    // Menu title

        'manage_options',   // Capability required

        'my-plugin',    // Menu slug (unique identifier)

        'my_plugin_page',   // Callback function to display page content

        '',             // Icon URL (leave empty for default icon)

        6               // Position on the menu (optional)

    );

   }

   add_action('admin_menu', 'custom_plugin_menu');

   // Callback function to display the menu page content

   function my_plugin_page() {

    echo '<h1>Welcome to My Plugin Page!</h1>';

   }

3. Save Your Changes:  

   After adding the code, save the functions.php file. Your new “My Plugin” menu should now appear in the WordPress admin sidebar.

---

---

How to Add a Submenu

If you want to add a WordPress admin menu second tier submenus under your new custom menu, use the add_submenu_page() function. Here’s how:

1. Add the Submenu Code in functions.php:

  

   function custom_plugin_submenu() {

    // Adding the top-level menu first

    add_menu_page(

        ‘My Custom Plugin’,

        ‘My Plugin’,

        ‘manage_options’,

        ‘my-plugin’,

        ‘my_plugin_page’

    );

    // Adding submenus

    add_submenu_page(

        ‘my-plugin’,       // Parent slug

        ‘Add Product’,     // Page title

        ‘Add Product’,     // Submenu title

        ‘manage_options’,  // Capability required

        ‘add-product’,     // Submenu slug

        ‘add_product_page’ // Callback function

    );

    add_submenu_page(

        ‘my-plugin’,

        ‘About Us’,

        ‘About Us’,

        ‘manage_options’,

        ‘about-us’,

        ‘about_us_page’

    );

   }

   add_action(‘admin_menu’, ‘custom_plugin_submenu’);

   // Callback function for ‘Add Product’ submenu

   function add_product_page() {

    echo ‘<h1>Add Your Product Here!</h1>’;

   }

   // Callback function for the ‘About Us’ submenu

   function about_us_page() {

    echo ‘<h1>About Our Plugin</h1>’;

   }

   

2. Save the File:  

Your submenus “Add Product” and “About Us” will now appear under the “My Plugin” menu in the admin panel.

Key Points to Remember

Menu Slug: This is a unique identifier for your menu. It should be in lowercase and can include dashes or underscores.

Capability: This controls who can see the menu. For example, 'manage_options' is usually for admin users and they can only see it. 

Position: Determines where the menu appears in the list. It’s optional but helps organize the menus.

Page Title: This appears in the browser’s title bar when you open the menu or submenu.

Menu Title: This is the text that appears in the sidebar.

Callback Function: This function runs when the menu or submenu is clicked, displaying its content.

The above example is for the custom menus that we created. But what about the existing menus in the WordPress admin? 

How can you create a second-tier submenu for the default WordPress admin menu? Here’s how:

---

Adding Submenus to Default WordPress Menus

Previously, we talked about how to add submenus under your custom menus in WordPress. Now, let’s see how you can add submenus under existing default menus in WordPress (like Dashboard, Posts, Pages, etc.).

WordPress provides specific functions to add submenus to these default menus:

– add_dashboard_page: Adds a submenu under the “Dashboard” menu.

– add_posts_page: Adds a submenu under the “Posts” menu.

– add_media_page: Adds a submenu under the “Media” menu.

– add_links_page: Adds a submenu under the “Links” menu.

– add_pages_page: Adds a submenu under the “Pages” menu.

– add_comments_page: Adds a submenu under the “Comments” menu.

– add_theme_page: Adds a submenu under the “Themes” menu.

– add_plugins_page: Adds a submenu under the “Plugins” menu.

– add_users_page: Adds a submenu under the “Users” menu.

– add_management_page: Adds a submenu under the “Tools” menu.

– add_options_page: Adds a submenu under the “Settings” menu.

All these functions work similarly. Let’s better understand it with a simple example: adding a submenu under the “Settings” menu using add_options_page().

Example: Adding a Submenu Under Settings

To add a submenu under “Settings,” you can use the add_options_page() function. Here’s a simple breakdown of the function:

– $page_title: The title of the page when you open it.

– $menu_title: The name that shows up in the sidebar under “Settings.”

– $capability: Who can see this submenu (like only admins).

– $menu_slug: A unique ID for this submenu.

– $function: A function that will display the content when the submenu is clicked.

For example, use this function like below:

add_options_page('My Plugin', 'My Plugin', 'manage_options', 'my-plugin', 'WPOven_plugin_render_options_page');

– This code adds a submenu called “My Plugin” under the “Settings” menu.

– It will only be visible to users with the ‘manage_options‘ capability (usually admins).

– When clicked, it will run the function WPOven_plugin_render_options_page to display the page content.

This is how you can add submenus to the default WordPress menus, making it easier to access the custom settings or pages you want to add!

---

Read: 🚩 How to Reorder Admin Menu Items in WordPress?

---

Conclusion

Adding custom menus and submenus in WordPress is a great way to customize your admin as per your convenience.

And the best part is you can simple implement and execute this feature with a few lines of code. This will help you to create a more organised and accessible backend for yourself or your clients.

So thoroughly following these steps, you will have a customized admin panel in no time. If you have any queries or feedbacks regarding this post, please do mention in the comment section below.

---