Menus and navigation in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register a navigation menu in WordPress.

Wordpress

register_nav_menus(array('[1]' => __('Primary Menu')));

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

Asidebar

Bfooter

Cheader

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'footer' or 'sidebar' instead of 'primary' for the main menu key.

The 'primary' key is commonly used to register the main navigation menu in WordPress themes.

2fill in blank

medium

Complete the code to display the registered navigation menu in a theme.

Wordpress

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

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

Afooter

Bprimary

Ctop

Dsidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Using a theme location that was not registered.

To display the main navigation menu, use the 'primary' theme location.

3fill in blank

hard

Fix the error in the code to correctly register a menu location.

Wordpress

register_nav_menus([1]);

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

Aarray('footer' => __('Footer Menu'))

Barray('footer' => 'Footer Menu')

C['footer' => 'Footer Menu']

D['footer' => __('Footer Menu')]

Attempts:

3 left

💡 Hint

Common Mistakes

Not using __() for the menu name string.

Using short array syntax which may not be supported in older PHP versions.

The value should be wrapped in the translation function __() for localization, and the array must be created with array() in PHP 7+ for compatibility.

4fill in blank

hard

Fill both blanks to create a menu with a custom CSS class and fallback.

Wordpress

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

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

Aprimary

Bmain-menu

Cfooter

Dfallback_cb

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'footer' as theme location when the menu is primary.

Not setting a CSS class for styling.

'primary' is the theme location, and 'main-menu' is a common CSS class for styling the menu.

5fill in blank

hard

Fill all three blanks to create a menu with a container, container class, and depth limit.

Wordpress

wp_nav_menu(array('theme_location' => '[1]', 'container' => '[2]', 'depth' => [3]));

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

Aprimary

Bnav

C2

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'nav' as container instead of 'div'.

Setting depth to a string instead of a number.

'primary' is the menu location, 'div' is the container element wrapping the menu, and '2' limits the menu depth to two levels.