<\/hr><\/div>\n\n\n\n
<\/hr><\/div>\n\n\n
What are Menus and Submenus?<\/h2>\n\n\n\n
Menus<\/strong> are the main items that you generally notice in the WordPress admin sidebar, like “Posts,” “Pages,” and “Settings.”<\/p>\n\n\n\n However, Submenus<\/strong> are options listed under a main menu. For example, under “Posts,” you\u2019ll find submenus like “All Posts” and “Add New.” In short, Submenus are options listed under a main menu.<\/p>\n\n\n Now you must be wondering How to even Add a Custom Menu in the WordPress admin dashboard. <\/p>\n\n\n\n Well, it’s not that tricky, all you have to simply use the `add_menu_page()` function.<\/p>\n\n\n\n Here\u2019s a simple step-by-step method you can follow:<\/p>\n\n\n\n You can find this file by going to your WordPress dashboard, navigating to “Appearance” > “Theme File Editor,” and selecting the `functions.php<\/strong>` file.<\/p>\n\n\n\n After adding the code, save the `functions.php` file. Your new “My Plugin” menu should now appear in the WordPress admin sidebar.<\/p>\n\n\n If you want to add a WordPress admin menu second tier submenus under your new custom menu, use the `add_submenu_page()` function. Here\u2019s how:<\/p>\n\n\n\n <\/p>\n\n\n\n function custom_plugin_submenu() {<\/p>\n\n\n\n \/\/ Adding the top-level menu first<\/p>\n\n\n\n add_menu_page(<\/p>\n\n\n\n ‘My Custom Plugin’,<\/p>\n\n\n\n ‘My Plugin’,<\/p>\n\n\n\n ‘manage_options’,<\/p>\n\n\n\n ‘my-plugin’,<\/p>\n\n\n\n ‘my_plugin_page’<\/p>\n\n\n\n );<\/p>\n\n\n\n \/\/ Adding submenus<\/p>\n\n\n\n add_submenu_page(<\/p>\n\n\n\n ‘my-plugin’, \/\/ Parent slug<\/p>\n\n\n\n ‘Add Product’, \/\/ Page title<\/p>\n\n\n\n ‘Add Product’, \/\/ Submenu title<\/p>\n\n\n\n ‘manage_options’, \/\/ Capability required<\/p>\n\n\n\n ‘add-product’, \/\/ Submenu slug<\/p>\n\n\n\n ‘add_product_page’ \/\/ Callback function<\/p>\n\n\n\n );<\/p>\n\n\n\n add_submenu_page(<\/p>\n\n\n\n ‘my-plugin’,<\/p>\n\n\n\n ‘About Us’,<\/p>\n\n\n\n ‘About Us’,<\/p>\n\n\n\n ‘manage_options’,<\/p>\n\n\n\n ‘about-us’,<\/p>\n\n\n\n ‘about_us_page’<\/p>\n\n\n\n );<\/p>\n\n\n\n }<\/p>\n\n\n\n add_action(‘admin_menu’, ‘custom_plugin_submenu’);<\/p>\n\n\n\n \/\/ Callback function for ‘Add Product’ submenu<\/p>\n\n\n\n function add_product_page() {<\/p>\n\n\n\n echo ‘<h1>Add Your Product Here!<\/h1>’;<\/p>\n\n\n\n }<\/p>\n\n\n\n \/\/ Callback function for the ‘About Us’ submenu<\/p>\n\n\n\n function about_us_page() {<\/p>\n\n\n\n echo ‘<h1>About Our Plugin<\/h1>’;<\/p>\n\n\n\n }<\/p>\n\n\n\n <\/p>\n\n\n\n Your submenus “Add Product” and “About Us” will now appear under the “My Plugin” menu in the admin panel.<\/p>\n\n\n\n Key Points to Remember<\/strong><\/p>\n\n\n\n Menu Slug<\/strong>: This is a unique identifier for your menu. It should be in lowercase and can include dashes or underscores.<\/p>\n\n\n\n Capability: <\/strong>This controls who can see the menu. For example, `’manage_options’` is usually for admin users and they can only see it. <\/p>\n\n\n\n Position:<\/strong> Determines where the menu appears in the list. It\u2019s optional but helps organize the menus.<\/p>\n\n\n\n Page Title<\/strong>: This appears in the browser\u2019s title bar when you open the menu or submenu.<\/p>\n\n\n\n Menu Title<\/strong>: This is the text that appears in the sidebar.<\/p>\n\n\n\n Callback Function<\/strong>: This function runs when the menu or submenu is clicked, displaying its content.<\/p>\n\n\n\n The above example is for the custom menus that we created. But what about the existing menus in the WordPress admin? <\/p>\n\n\n\n How can you create a second-tier submenu for the default WordPress admin menu? Here\u2019s how:<\/p>\n\n\n 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.).<\/p>\n\n\n\n WordPress provides specific functions to add submenus to these default menus:<\/p>\n\n\n\n – `add_dashboard_page<\/strong>`: Adds a submenu under the “Dashboard” menu.<\/p>\n\n\n\n – `add_posts_page<\/strong>`: Adds a submenu under the “Posts” menu.<\/p>\n\n\n\n – `add_media_page<\/strong>`: Adds a submenu under the “Media” menu.<\/p>\n\n\n\n – `add_links_page<\/strong>`: Adds a submenu under the “Links” menu.<\/p>\n\n\n\n – `add_pages_page<\/strong>`: Adds a submenu under the “Pages” menu.<\/p>\n\n\n\n – `add_comments_page<\/strong>`: Adds a submenu under the “Comments” menu.<\/p>\n\n\n\n – `add_theme_page<\/strong>`: Adds a submenu under the “Themes” menu.<\/p>\n\n\n\n – `add_plugins_page<\/strong>`: Adds a submenu under the “Plugins” menu.<\/p>\n\n\n\n – `add_users_page<\/strong>`: Adds a submenu under the “Users” menu.<\/p>\n\n\n\n – `add_management_page<\/strong>`: Adds a submenu under the “Tools” menu.<\/p>\n\n\n\n – `add_options_page<\/strong>`: Adds a submenu under the “Settings” menu.<\/p>\n\n\n\n All these functions work similarly. Let\u2019s better understand it with a simple example: adding a submenu under the “Settings” menu<\/strong> using `add_options_page()`.<\/p>\n\n\n\n To add a submenu under “Settings<\/strong>,” you can use the `add_options_page()` function. Here’s a simple breakdown of the function:<\/p>\n\n\n\n – `$page_title<\/strong>`: The title of the page when you open it.<\/p>\n\n\n\n – `$menu_title<\/strong>`: The name that shows up in the sidebar under “Settings.”<\/p>\n\n\n\n – `$capability<\/strong>`: Who can see this submenu (like only admins).<\/p>\n\n\n\n – `$menu_slug<\/strong>`: A unique ID for this submenu.<\/p>\n\n\n\n – `$function<\/strong>`: A function that will display the content when the submenu is clicked.<\/p>\n\n\n\n For example, use this function like below:<\/p>\n\n\n\n – This code adds a submenu called “My Plugin<\/strong>” under the “Settings” menu.<\/p>\n\n\n\n – It will only be visible to users with the ‘manage_options<\/strong>‘ capability (usually admins).<\/p>\n\n\n\n – When clicked, it will run the function ` 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!<\/p>\n\n\n
<\/hr><\/div>\n\n\nHow to Add a Custom Menu<\/h2>\n\n\n\n
1. Open Your Theme\u2019s `functions.php` File: <\/h3>\n\n\n\n
2. Add the Following Code:<\/h3>\n\n\n\n
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>';
}<\/strong><\/code><\/p>\n\n\n\n3. Save Your Changes: <\/h3>\n\n\n\n
<\/hr><\/div>\n\n\n![\"WPOven](\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/03\/wpoven-dedicated-hosting-1024x137.png\" "\\"\\"")
<\/a><\/figure>\n\n\n
<\/hr><\/div>\n\n\nHow to Add a Submenu<\/h2>\n\n\n\n
1. Add the Submenu Code in `functions.php`:<\/h3>\n\n\n\n
2. Save the File: <\/h3>\n\n\n\n
<\/hr><\/div>\n\n\nAdding Submenus to Default WordPress Menus<\/h2>\n\n\n\n
Example: Adding a Submenu Under Settings<\/h3>\n\n\n\n
add_options_page($page_title, $menu_title, $capability, $menu_slug, $function);<\/code><\/pre>\n\n\n\nadd_options_page('My Plugin', 'My Plugin', 'manage_options', 'my-plugin', 'WPOven_plugin_render_options_page');<\/strong><\/code><\/p>\n\n\n\nWPOven<\/code>_plugin_render_options_page<\/strong>` to display the page content.<\/p>\n\n\n\n