Dashboard navigation in Wordpress - Mini Project: Build & Apply

Dashboard navigation

📖 Scenario: You are building a WordPress plugin that needs its own settings page in the admin dashboard. You need to add a top-level menu item with a submenu for general and advanced settings.

🎯 Goal: Add custom admin menu pages to the WordPress dashboard using add_menu_page() and add_submenu_page(), and create the callback functions that render each page.

📋 What You'll Learn

Create a top-level menu item called 'My Plugin'

Add two submenu pages: General and Advanced

Create callback functions that render HTML for each page

Hook everything to the admin_menu action

💡 Why This Matters

🌍 Real World

Every WordPress plugin with settings needs admin menu pages. This is the standard way to add configuration interfaces to the WordPress dashboard.

💼 Career

WordPress developers must know how to create and organize admin menus for building professional plugins and themes.

1

Create the main menu page callback

Create a PHP function called my_plugin_main_page that outputs a simple HTML wrapper with an <h1> tag saying 'My Plugin Settings' wrapped in a div with class wrap.

Wordpress

<?php
// Create a function that outputs the main settings page HTML
// Your code here

Need a hint?

WordPress admin pages use <div class="wrap"> as the standard container.

2

Create the advanced page callback

Create a function called my_plugin_advanced_page that outputs HTML with an <h1> saying 'Advanced Settings' wrapped in a div with class wrap.

Wordpress

';
    echo 'My Plugin Settings';
    echo '';
}

// Create function for the advanced settings page
// Your code here

Need a hint?

Follow the same pattern as the main page but with 'Advanced Settings' as the heading.

3

Register menu and submenu pages

Create a function called my_plugin_admin_menu. Inside, use add_menu_page() to register 'My Plugin' as a top-level menu with slug 'my-plugin', capability 'manage_options', callback 'my_plugin_main_page', and dashicon 'dashicons-admin-generic'. Then add a submenu page for 'Advanced' with slug 'my-plugin-advanced' and callback 'my_plugin_advanced_page'.

Wordpress

// Create function to register menu and submenu pages
// Use add_menu_page and add_submenu_page
// Your code here

Need a hint?

Use add_menu_page() for the top-level item and add_submenu_page('my-plugin', ...) for the submenu.

4

Hook to admin_menu action

Use add_action() to hook my_plugin_admin_menu to the 'admin_menu' action so WordPress registers your menu pages when the admin loads.

Wordpress

function my_plugin_admin_menu() {
    add_menu_page('My Plugin Settings', 'My Plugin', 'manage_options', 'my-plugin', 'my_plugin_main_page', 'dashicons-admin-generic');
    add_submenu_page('my-plugin', 'Advanced Settings', 'Advanced', 'manage_options', 'my-plugin-advanced', 'my_plugin_advanced_page');
}

// Hook the menu registration function to WordPress
// Your code here

Need a hint?

Use add_action('admin_menu', 'my_plugin_admin_menu') to register the hook.