Dashboard navigation in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to open the WordPress dashboard menu.

Wordpress

wp_nav_menu(array('theme_location' => '[1]'));

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

Adashboard

Bprimary

Csidebar

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'primary' or 'footer' which are for other menus.

Leaving the menu location empty.

The dashboard menu location is used to display the WordPress dashboard navigation menu.

2fill in blank

medium

Complete the code to add a dashboard submenu page in WordPress.

Wordpress

add_submenu_page('[1]', 'Reports', 'Reports', 'manage_options', 'reports', 'reports_callback');

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

Aoptions-general.php

Btools.php

Cedit.php

Dindex.php

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'tools.php' or 'options-general.php' which are other menu slugs.

Confusing the parent slug with the submenu slug.

The index.php is the slug for the main dashboard menu in WordPress.

3fill in blank

hard

Fix the error in the code to correctly add a dashboard widget.

Wordpress

wp_add_dashboard_widget('[1]', 'Site Stats', 'dashboard_stats_function');

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

Adashboard-widget

Bsite_stats

Cdashboard_stats

Dstats_dashboard

Attempts:

3 left

💡 Hint

Common Mistakes

Using IDs with dashes or spaces causing errors.

Using IDs that are too generic or conflicting.

The widget ID should be a simple string without spaces or special characters. 'dashboard_stats' is a valid ID.

4fill in blank

hard

Fill both blanks to register a dashboard menu page with the correct capability and slug.

Wordpress

add_menu_page('Dashboard Reports', 'Reports', '[1]', '[2]', 'reports_callback');

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

Amanage_options

Bedit_posts

Cdashboard_reports

Dreports_page

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'edit_posts' which is a lower capability.

Using slugs with spaces or special characters.

The capability manage_options allows admin access. The slug dashboard_reports uniquely identifies the menu page.

5fill in blank

hard

Fill all three blanks to correctly enqueue a dashboard-specific script.

Wordpress

function load_dashboard_scripts() {
  if (get_current_screen()->[1] === '[2]') {
    wp_enqueue_script('[3]', plugin_dir_url(__FILE__) . 'dashboard.js');
  }
}
add_action('admin_enqueue_scripts', 'load_dashboard_scripts');

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

Aid

Bbase

Cdashboard-script

Ddashboard

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' instead of 'base' causes the condition to fail.

Using incorrect page slug or script handle.

The base property identifies the current admin page. The value dashboard targets the dashboard page. The script handle dashboard-script is a unique name for the script.

Practice

1. What is the main purpose of dashboard navigation in WordPress Business Intelligence reports?

easy

A. To help users find information quickly and easily

B. To add decorative elements to the dashboard

C. To slow down page loading times

D. To hide important data from users

Solution

1. Step 1: Understand dashboard navigation purpose

   Dashboard navigation is designed to guide users to key information efficiently.

2. Step 2: Eliminate incorrect options

   Slowing down page loads, adding decoration, and hiding data do not improve user experience or data access.

3. Final Answer:

   To help users find information quickly and easily -> Option A

4. Quick Check:

   Navigation improves user access = C [OK]

Hint: Navigation means easy access to info [OK]

Common Mistakes:

• Thinking navigation is just decoration
• Confusing navigation with page speed
• Assuming navigation hides data

2. Which WordPress feature is commonly used to create dashboard navigation menus?

easy

A. Anchor links inside posts

B. Comment sections

C. Image galleries

D. WordPress menu blocks

Solution

1. Step 1: Identify navigation creation tools in WordPress

   WordPress menu blocks are designed to build navigation menus easily.

2. Step 2: Exclude unrelated features

   Anchor links help navigation but are not menu creators; galleries and comments are unrelated.

3. Final Answer:

   WordPress menu blocks -> Option D

4. Quick Check:

   Menus built with menu blocks = B [OK]

Hint: Menus use menu blocks, not galleries or comments [OK]

Common Mistakes:

• Confusing anchor links with menu creation
• Using galleries for navigation
• Thinking comments create menus

3. Given this WordPress menu block setup for dashboard navigation:
- Home
- Sales Report
- Customer Data
- Settings
What happens when a user clicks 'Customer Data'?

medium

A. The dashboard reloads the Home page

B. The page scrolls or navigates to the Customer Data section

C. Nothing happens because menus are decorative

D. The user is logged out automatically

Solution

1. Step 1: Understand menu block behavior

   Clicking a menu item navigates or scrolls to the linked section or page.

2. Step 2: Analyze each option

   Reloading the home page, nothing happening because decorative, or logging out do not match expected navigation behavior.

3. Final Answer:

   The page scrolls or navigates to the Customer Data section -> Option B

4. Quick Check:

   Menu click triggers navigation = A [OK]

Hint: Menu clicks navigate to linked sections [OK]

Common Mistakes:

• Assuming menus do nothing
• Thinking menu clicks reload unrelated pages
• Confusing navigation with logout

4. You created a dashboard navigation menu in WordPress but keyboard users cannot tab through the menu items. What is the likely issue?

medium

A. Missing proper ARIA labels and tabindex settings

B. The menu items are images without links

C. The dashboard has no data

D. The WordPress theme is outdated

Solution

1. Step 1: Identify accessibility requirements

   Keyboard navigation requires ARIA labels and correct tabindex for focus order.

2. Step 2: Evaluate other options

   Images without links prevent tabbing; no data or theme age do not directly affect keyboard navigation.

3. Final Answer:

   Missing proper ARIA labels and tabindex settings -> Option A

4. Quick Check:

   Accessibility needs ARIA and tabindex = D [OK]

Hint: Keyboard navigation needs ARIA and tabindex [OK]

Common Mistakes:

• Ignoring accessibility attributes
• Blaming theme instead of markup
• Thinking data presence affects navigation

5. You want to create a dashboard navigation in WordPress that is accessible, responsive, and allows users to jump to report sections quickly. Which combination of features should you use?

hard

A. Comment widgets with dropdown menus

B. Image galleries with no links and custom CSS

C. WordPress menu blocks with anchor links and ARIA labels

D. Static text blocks with no navigation

Solution

1. Step 1: Identify features for accessibility and responsiveness

   Menu blocks provide structure, anchor links enable quick jumps, ARIA labels ensure accessibility.

2. Step 2: Exclude unsuitable options

   Galleries, comments, and static text lack navigation and accessibility features needed.

3. Final Answer:

   WordPress menu blocks with anchor links and ARIA labels -> Option C

4. Quick Check:

   Combine menus, anchors, ARIA for best navigation = A [OK]

Hint: Use menus + anchors + ARIA for accessible navigation [OK]

Common Mistakes:

• Using images without links for navigation
• Relying on comments for menus
• Ignoring accessibility and responsiveness