Admin menu pages in Wordpress - Step-by-Step Execution

Concept Flow - Admin menu pages

Plugin loads

↓

Hook into admin_menu

↓

Call add_menu_page()

↓

WordPress adds menu item

↓

User clicks menu

↓

Callback function runs

↓

Admin page content displays

This flow shows how WordPress plugins add admin menu pages by hooking into admin_menu, registering the menu, and displaying content when clicked.

Execution Sample

Wordpress

<?php
add_action('admin_menu', function() {
  add_menu_page('My Page', 'My Menu', 'manage_options', 'my_page_slug', function() {
    echo '<h1>Welcome to My Admin Page</h1>';
  });
});

This code adds a new admin menu page with a title and content shown when the menu is clicked.

Execution Table

Step	Action	Function Called	Result	Notes
1	Plugin loads	add_action('admin_menu', callback)	Callback registered	Hook set for admin menu setup
2	WordPress triggers admin_menu	callback()	add_menu_page() called	Menu item registered in admin sidebar
3	User clicks menu item	callback for page content	Page content displayed	Echoes <h1>Welcome to My Admin Page</h1>
4	User navigates away	No action	Page hidden	Admin menu remains visible

💡 Execution stops when user leaves the admin page or closes admin area.

Variable Tracker

Variable	Start	After Hook	After add_menu_page	After Click
callback	undefined	function registered	function ready	function executed
menu_item	none	none	menu item added	menu item active

Key Moments - 2 Insights

Why doesn't the admin menu page show up immediately after calling add_menu_page?

Because add_menu_page only registers the menu during the admin_menu hook. The menu appears when WordPress builds the admin sidebar after the hook runs, as shown in step 2 of the execution_table.

What happens if the callback function for the page content is missing?

The menu item will appear but clicking it shows a blank page or error because no content is output. Step 3 in the execution_table shows the callback runs to display content.

Visual Quiz - 3 Questions

Look at the execution_table, what happens at step 2?

A The plugin loads

B The admin menu item is registered

C The page content is displayed

D The user clicks the menu

💡 Hint

Refer to the 'Result' column in step 2 of execution_table

At which step does the page content get shown to the user?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Check the 'Result' column for when content is displayed in execution_table

If the callback function is not defined, what changes in the execution_table?

A Step 2 will fail to register menu

B Step 1 will not run

C Step 3 will show no page content

D Step 4 will show an error

💡 Hint

Look at step 3 where the callback outputs content in execution_table

Concept Snapshot

WordPress admin menu pages:
- Use add_action('admin_menu', callback) to hook menu setup
- Call add_menu_page(title, menu_title, capability, slug, callback) inside callback
- WordPress adds menu item after hook runs
- Callback outputs page content when menu clicked
- Menu visible in admin sidebar for authorized users

Full Transcript

This visual execution shows how WordPress plugins add admin menu pages. First, the plugin registers a callback on the admin_menu hook. When WordPress runs this hook, it calls the callback which uses add_menu_page to register a new menu item. The menu item appears in the admin sidebar. When the user clicks this menu, WordPress runs the callback function that outputs the page content, such as a heading. The menu remains visible while the user is in the admin area. If the callback is missing, the menu shows but no content appears. This step-by-step trace helps beginners see how admin menu pages are added and displayed in WordPress.

Practice

1. What is the main purpose of the add_menu_page function in WordPress?

easy

A. To register a new user role

B. To add a submenu item under an existing menu

C. To enqueue scripts and styles in the admin area

D. To add a new top-level menu page to the WordPress admin dashboard

Solution

1. Step 1: Understand the function purpose

   add_menu_page is used to create a new top-level menu in the WordPress admin dashboard.

2. Step 2: Compare with other options

   Adding submenu items uses add_submenu_page, user roles are registered differently, and scripts/styles are enqueued with other functions.

3. Final Answer:

   To add a new top-level menu page to the WordPress admin dashboard -> Option D

4. Quick Check:

   add_menu_page adds top-level menu [OK]

Hint: Remember: add_menu_page = top-level menu [OK]

Common Mistakes:

• Confusing add_menu_page with add_submenu_page
• Thinking it registers user roles
• Mixing it with script enqueue functions

2. Which of the following is the correct way to hook add_menu_page in WordPress?

easy

A. add_action('admin_menu', 'my_menu_function');

B. add_action('init', 'my_menu_function');

C. add_filter('admin_menu', 'my_menu_function');

D. add_action('wp_head', 'my_menu_function');

Solution

1. Step 1: Identify the correct hook for admin menus

   The admin_menu action hook is the correct place to add admin menu pages.

2. Step 2: Check other hooks

   init runs too early, wp_head is for front-end, and add_filter is incorrect for this purpose.

3. Final Answer:

   add_action('admin_menu', 'my_menu_function'); -> Option A

4. Quick Check:

   Use admin_menu hook for admin menus [OK]

Hint: Use admin_menu hook to add admin menus [OK]

Common Mistakes:

• Using init hook which is too early
• Using add_filter instead of add_action
• Hooking into front-end hooks like wp_head

3. What will happen if you run this code in your plugin?

add_action('admin_menu', function() {
  add_menu_page('My Plugin', 'My Plugin', 'manage_options', 'my-plugin', function() {
    echo 'Hello Admin!';
  });
});

medium

A. A fatal error occurs due to missing capability

B. Nothing happens because the callback function is missing

C. A new top-level menu named 'My Plugin' appears in admin, showing 'Hello Admin!' when clicked

D. The menu appears but clicking it shows a blank page

Solution

1. Step 1: Analyze the add_menu_page parameters

   The code adds a menu titled 'My Plugin' with capability 'manage_options' and a callback that echoes 'Hello Admin!'.

2. Step 2: Understand the callback behavior

   When the menu is clicked, the callback runs and outputs 'Hello Admin!'. No errors occur because capability and callback are valid.

3. Final Answer:

   A new top-level menu named 'My Plugin' appears in admin, showing 'Hello Admin!' when clicked -> Option C

4. Quick Check:

   Valid add_menu_page with callback shows output [OK]

Hint: Callback echoes content on menu page click [OK]

Common Mistakes:

• Assuming callback is missing
• Confusing capability with missing parameter
• Expecting blank page without callback

4. Identify the error in this code snippet:

add_action('admin_menu', 'register_my_menu');
function register_my_menu() {
  add_menu_page('Sample', 'Sample', 'manage_options');
}

medium

A. Callback function is missing but required

B. Missing menu slug parameter in add_menu_page

C. Capability 'manage_options' is invalid

D. Wrong hook used for adding menu page

Solution

1. Step 1: Check add_menu_page parameters

   The function call has only three parameters: page title, menu title, and capability.

2. Step 2: Verify required parameters

   The menu slug parameter is missing, which is required as the fourth argument.

3. Final Answer:

   Missing menu slug parameter in add_menu_page -> Option B

4. Quick Check:

   add_menu_page needs menu slug [OK]

Hint: add_menu_page needs 4+ parameters including slug [OK]

Common Mistakes:

• Forgetting the menu slug argument
• Assuming callback is mandatory (optional)
• Using wrong hook instead of admin_menu

5. You want to add a top-level admin menu page visible only to users who can edit posts, with the menu slug 'custom-editor'. Which code snippet correctly achieves this?

hard

A. add_action('admin_menu', function() {
add_menu_page('Editor Page', 'Editor Page', 'edit_posts', 'custom-editor', function() {
echo 'Editor Content';
});
});

B. add_action('admin_menu', function() {
add_menu_page('Editor Page', 'Editor Page', 'manage_options', 'custom-editor', function() {
echo 'Editor Content';
});
});

C. add_action('init', function() {
add_menu_page('Editor Page', 'Editor Page', 'edit_posts', 'custom-editor');
});

D. add_action('admin_menu', function() {
add_submenu_page('custom-editor', 'Editor Page', 'Editor Page', 'edit_posts', 'custom-editor', function() {
echo 'Editor Content';
});
});

Solution

1. Step 1: Check capability and hook

   The capability 'edit_posts' restricts menu visibility to users who can edit posts. The hook must be 'admin_menu'.

2. Step 2: Verify menu function and parameters

   add_menu_page is used correctly with all required parameters including slug 'custom-editor' and a callback function.

3. Step 3: Compare other options

   add_action('admin_menu', function() { add_menu_page('Editor Page', 'Editor Page', 'manage_options', 'custom-editor', function() { echo 'Editor Content'; }); }); uses 'manage_options' which is for admins, not editors. add_action('init', function() { add_menu_page('Editor Page', 'Editor Page', 'edit_posts', 'custom-editor'); }); uses wrong hook 'init'. add_action('admin_menu', function() { add_submenu_page('custom-editor', 'Editor Page', 'Editor Page', 'edit_posts', 'custom-editor', function() { echo 'Editor Content'; }); }); uses add_submenu_page which adds submenu, not top-level menu.

4. Final Answer:

   add_action('admin_menu', function() { add_menu_page('Editor Page', 'Editor Page', 'edit_posts', 'custom-editor', function() { echo 'Editor Content'; }); }); -> Option A

5. Quick Check:

   Capability edit_posts + add_menu_page + admin_menu hook [OK]

Hint: Use edit_posts capability with add_menu_page on admin_menu hook [OK]

Common Mistakes:

• Using manage_options instead of edit_posts
• Hooking into init instead of admin_menu
• Using add_submenu_page instead of add_menu_page