Wordpressframework~30 mins

Dashboard navigation in Wordpress - Mini Project: Build & Apply

Choose your learning style10 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Start learning this pattern below

Jump into concepts and practice - no test required

Recommended

Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong

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.

Progress0 / 4 steps

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

Hint

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

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

Hint

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

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

Hint

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

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

Hint

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

Practice

(1/5)

1. What is the main purpose of dashboard navigation in WordPress Business Intelligence reports?

easy

A. To help users find information quickly and easily

B. To add decorative elements to the dashboard

C. To slow down page loading times

D. To hide important data from users

Dashboard navigation in Wordpress - Mini Project: Build & Apply

Start learning this pattern below

Practice

Solution

Step 1: Understand dashboard navigation purpose

Step 2: Eliminate incorrect options

Final Answer:

Quick Check:

Solution

Step 1: Identify navigation creation tools in WordPress

Step 2: Exclude unrelated features

Final Answer:

Quick Check:

Solution

Step 1: Understand menu block behavior

Step 2: Analyze each option

Final Answer:

Quick Check:

Solution

Step 1: Identify accessibility requirements

Step 2: Evaluate other options

Final Answer:

Quick Check:

Solution

Step 1: Identify features for accessibility and responsiveness

Step 2: Exclude unsuitable options

Final Answer:

Quick Check: