From previous tutorials we created the first wordpress content, the home page. Now that we have content to, it’s time to add menus in our wordpress site.
Adding wordpress menus involves three steps:
- Set the code in
footer.phpto display menus.
- Register menus in
- Setup menus in the admin panel.
You can change the sequence of #1 and #2. You have to complete both #1 and #2 in order to do #3.
Menu Three Steps
1. Display nav menu: wp_nav_menu
In wordpress we use the function wp_nav_menu in templates to display a menu. The code segments from
header.php is as follows (you can find it on my Github page:
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav navbar-right'
Here the function takes a PHP associative array as parameters, which is just a set of variables and their values. The first variable
'theme_location', tells wordpress to display the menu with name as
You have to register menus that correspond to the value of
'theme_location' to show them!
2. Make a menu available in admin panel: register_nav_menu
functions.php, search or create the function
register_nav_menu as follows (Github location):
'primary' => esc_html__( 'Primary Menu', 'modernblackhand' ),
'footer' => esc_html__( 'Footer Menu', 'modernblackhand' ),
The function’s parameter associative array contains names of menus with their descriptions (see Codex for more detail). Here we have two menus
'footer'. Their descriptions reflect that the first one is the primary menu of my site ModernBlackHand, and the other is the footer menu.
3. Setup menu in admin panel
After #1 and #2 are set we can then go to admin panel and setup the menu’s content. The location is
Menu page. The red area contains available items. The right is the menu’s actual items.
Here pay attention to the following three sections:
- Select a menu to edit (right on top of the red and blue areas shown in above image). Be sure to click “select”!
- Available items (the red area).
- This menu’s items. You can drag an item from the “available item” on the left to the right.
If you want to remove an item, expand the item’s drop-down symbol and there is the red ‘remove’ clickable text.
Upper right is the triangle to expand/close item’s drop-down. At the center is the ‘remove’ clickable text.
Once you add the home page into the menu, be sure to click the “save” button.
Header Style Customization
WordPress comes with two styles for
navbar-inverse. But most of the time you want to create your own looking navbars.
In this tutorial we described how we can generate custom CSS styles to change our navbar’s colors.