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.