Admin menu pages in Wordpress

Introduction

Admin menu pages let you add new sections to the WordPress dashboard. This helps you organize settings or tools for your site in one place.

You want to add a custom settings page for your plugin.

You need a dashboard area to manage special content types.

You want to create a tool accessible only to site admins.

You want to group related options under a new menu in the admin panel.

Syntax

Wordpress

add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '', string $icon_url = '', int $position = null );

$page_title is the title shown on the page.

$menu_title is the label in the admin menu.

Examples

Adds a new top-level menu called 'My Plugin' with a settings page.

Wordpress

add_menu_page('My Plugin Settings', 'My Plugin', 'manage_options', 'my-plugin', 'my_plugin_page');

Adds a menu with a chart icon for reports.

Wordpress

add_menu_page('Reports', 'Reports', 'manage_options', 'reports', 'reports_page', 'dashicons-chart-bar');

Sample Program

This code creates a new admin menu item called 'My Plugin' with a settings page that shows a heading and a welcome message.

Wordpress

<?php
function my_plugin_page() {
  echo '<div class="wrap"><h1>My Plugin Settings</h1><p>Welcome to the settings page.</p></div>';
}

add_action('admin_menu', function() {
  add_menu_page(
    'My Plugin Settings',
    'My Plugin',
    'manage_options',
    'my-plugin',
    'my_plugin_page',
    'dashicons-admin-generic',
    6
  );
});

Important Notes

Use manage_options capability to restrict access to admins.

The $menu_slug must be unique to avoid conflicts.

Icons use Dashicons by default, but you can use custom URLs.

Summary

Admin menu pages add new sections to the WordPress dashboard.

Use add_menu_page inside an admin_menu action.

Set proper capability to control who can see the menu.

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