Admin menu pages in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this WordPress admin menu code?

Consider this code snippet added to a plugin. What will the admin menu show after activation?

Wordpress

<?php
add_action('admin_menu', function() {
  add_menu_page('My Plugin', 'My Plugin', 'manage_options', 'my-plugin', function() {
    echo '<h1>Welcome to My Plugin</h1>';
  }, 'dashicons-admin-generic', 6);
});

A A new top-level menu named 'My Plugin' with a gear icon appears at position 6. Clicking it shows 'Welcome to My Plugin'.

B No menu appears because the callback function is missing a return statement.

C A submenu under 'Settings' named 'My Plugin' appears instead of a top-level menu.

D The menu appears but the icon is the default WordPress icon, not a gear.

💡 Hint

Check the parameters of add_menu_page and the callback function output.

The add_menu_page function creates a new top-level menu. The callback echoes the heading, so it displays on the page. The icon 'dashicons-admin-generic' is a gear icon. Position 6 places it near the top.

📝 Syntax

intermediate

Which option causes a syntax error in WordPress admin menu registration?

Identify the code snippet that will cause a syntax error when registering an admin menu page.

A add_menu_page('Title', 'Menu', 'manage_options', 'slug', 'my_callback_function', 'dashicons-admin-site', 10);

B add_menu_page('Title', 'Menu', 'manage_options', 'slug', function() { echo 'Hi' }, 'dashicons-admin-site', 10);

C add_menu_page('Title', 'Menu', 'manage_options', 'slug', function() { echo 'Hi'; }, 'dashicons-admin-site', 10);

D add_menu_page('Title', 'Menu', 'manage_options', 'slug', null, 'dashicons-admin-site', 10);

💡 Hint

Look carefully at the anonymous function syntax.

Option B is missing a semicolon inside the anonymous function after echo 'Hi', causing a syntax error.

❓ state_output

advanced

What is the value of $submenu after adding this submenu page?

Given this code snippet, what will be the structure of the global $submenu variable for the 'my-plugin' menu?

Wordpress

<?php
add_action('admin_menu', function() {
  add_menu_page('My Plugin', 'My Plugin', 'manage_options', 'my-plugin', 'my_plugin_page');
  add_submenu_page('my-plugin', 'Sub Page', 'Sub Page', 'manage_options', 'my-plugin-sub', 'my_plugin_sub_page');
});

// After this runs, what is $submenu['my-plugin']?

A

[
  [0 => ['My Plugin', 'manage_options', 'my-plugin', 'my_plugin_page']]
]

B

[
  [0 => ['Sub Page', 'manage_options', 'my-plugin-sub', 'my_plugin_sub_page']]
]

C []

D

[
  [0 => ['My Plugin', 'manage_options', 'my-plugin', 'my_plugin_page']],
  [1 => ['Sub Page', 'manage_options', 'my-plugin-sub', 'my_plugin_sub_page']]
]

💡 Hint

Remember that add_menu_page creates the first submenu item automatically.

When you add a top-level menu with add_menu_page, WordPress automatically adds a submenu item for it. Then add_submenu_page adds another submenu. So $submenu['my-plugin'] has two entries.

🔧 Debug

advanced

Why does this submenu page not appear under the main menu?

This code adds a submenu page but it does not show under the 'my-plugin' menu. What is the cause?

Wordpress

<?php
add_action('admin_menu', function() {
  add_menu_page('My Plugin', 'My Plugin', 'manage_options', 'my-plugin', 'my_plugin_page');
  add_submenu_page('wrong-slug', 'Sub Page', 'Sub Page', 'manage_options', 'my-plugin-sub', 'my_plugin_sub_page');
});

A The submenu slug 'wrong-slug' does not match the parent menu slug 'my-plugin', so it is not attached.

B The user does not have 'manage_options' capability, so the submenu is hidden.

C The submenu callback function 'my_plugin_sub_page' is missing, so it fails silently.

D The add_menu_page call is missing the icon parameter, so submenu cannot attach.

💡 Hint

Check the first parameter of add_submenu_page carefully.

The first parameter of add_submenu_page must match the parent menu slug exactly. Using 'wrong-slug' means WordPress cannot attach the submenu under 'my-plugin'.

🧠 Conceptual

expert

Which statement about WordPress admin menu page hooks is true?

Select the correct statement about how WordPress admin menu pages and hooks work.

A The callback function for add_menu_page runs immediately when the plugin loads, not when the menu is clicked.

B The 'admin_init' hook is the recommended place to register admin menu pages.

C The 'admin_menu' action runs before the admin page HTML is generated, allowing menu registration but not output rendering.

D Submenu pages must be registered before the top-level menu page to appear correctly.

💡 Hint

Think about when WordPress builds the admin menu and when it renders pages.

The 'admin_menu' action runs early to build the menu structure. The callback functions for menu pages run later, only when the user visits that page. Submenus can be added after the top-level menu. 'admin_init' is not used for menu registration.

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