Admin menu pages in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a new admin menu page in WordPress.

Wordpress

<?php
add_action('admin_menu', function() {
    add_menu_page('My Plugin', 'My Plugin', 'manage_options', 'my-plugin', '[1]');
});

Drag options to blanks, or click blank then click option'

Amy_plugin_page

Badmin_page

Cplugin_menu

Dmenu_callback

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string that is not a function name.

Omitting the callback function parameter.

Passing a non-callable value.

The last parameter is the callback function that outputs the page content. Here, my_plugin_page is the function name.

2fill in blank

medium

Complete the code to add a submenu page under the existing admin menu.

Wordpress

<?php
add_action('admin_menu', function() {
    add_submenu_page('my-plugin', 'Settings', 'Settings', 'manage_options', '[1]', 'my_plugin_settings_page');
});

Drag options to blanks, or click blank then click option'

Amy-plugin-settings

Bsettings-page

Cplugin-settings

Dmy-plugin-submenu

Attempts:

3 left

💡 Hint

Common Mistakes

Using the parent slug instead of a unique submenu slug.

Using spaces in the slug.

Omitting the submenu slug.

The fifth parameter is the slug for the submenu page. It should be unique and related to the parent menu slug.

3fill in blank

hard

Fix the error in the code to properly register an admin menu page with a capability check.

Wordpress

<?php
add_action('admin_menu', function() {
    add_menu_page('Dashboard', 'Dashboard', '[1]', 'dashboard', 'dashboard_page');
});

Drag options to blanks, or click blank then click option'

Aedit_posts

Badministrator

Cadmin

Dmanage_options

Attempts:

3 left

💡 Hint

Common Mistakes

Using role names instead of capabilities.

Using invalid capability strings.

Omitting the capability parameter.

The capability parameter must be a valid WordPress capability string like manage_options to control access properly.

4fill in blank

hard

Fill both blanks to add a submenu page with a custom icon and position.

Wordpress

<?php
add_action('admin_menu', function() {
    add_menu_page('Custom Menu', 'Custom Menu', 'manage_options', 'custom-menu', 'custom_menu_page', [1], [2]);
});

Drag options to blanks, or click blank then click option'

Aplugins_url('icon.png', __FILE__)

Bdashicons-admin-generic

C5

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using icon class name instead of URL for the icon parameter.

Using string instead of number for position.

Swapping icon and position parameters.

The sixth parameter is the URL to the icon image, and the seventh is the menu position number.

5fill in blank

hard

Fill all three blanks to create a submenu page with a dashicon and a callback function.

Wordpress

<?php
add_action('admin_menu', function() {
    add_submenu_page('tools.php', 'Tool Settings', 'Tool Settings', [1], [2], [3]);
});

Drag options to blanks, or click blank then click option'

Amanage_options

Btool-settings

Ctool_settings_page

Dedit_posts

Attempts:

3 left

💡 Hint

Common Mistakes

Using role names instead of capabilities.

Using invalid or duplicate slugs.

Omitting the callback function.

The capability is manage_options, the slug is tool-settings, and the callback function is tool_settings_page.

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