How to Use Menus in WordPress

In this tutorial, you will learn:

• How to manage Navigation Menus on your site within the WordPress Customizer.
• How to use advanced menu properties.
• How to add icons next to Menu items.

Steps for Managing WordPress Menus, and Using Advanced Menu Properties

1. After logging into the WordPress Dashboard, click on Appearance and then Customize.
2. Then, click on Menus. In here you can see the Menu locations defined by your theme, and potentially other plugins. You aren’t restricted to just those menu locations however. You can create Custom Menus that can then be used in any Widget Area using the Custom Menu Widget.
3. Either way, you need to go through the steps to create a menu before you attach it to a Menu Location or Custom Menu Widget. Below the Menu Locations, you will see any existing menus, and if they are attached to any particular location. To add a new menu, click the Add a Menu button.
4. Give the menu a name, and click the Create Menu button.
5. You are then given the choice of which location to attach it to. Choose an appropriate location from the options. If you attach your newly created menu to a location that already has a menu attached, the other will be automatically disconnected.
6. You can only delete a menu if it is not attached to a location. To delete a menu click the unattached menu, then click the Delete Menu link. If you are committed to this decision, be sure to click the Save & Publish button, otherwise you can back out by clicking the X at the top left.
7. To add items to a menu, click on the menu, and click the Add Items button. You can also change the Location this menu is attached to on this same screen.
8. Choose one of the sections to pull menu items from. These include: Posts, Pages, Categories, and others. You can also create custom links for content that isn’t within your database.
9. For this example, I am choosing Pages. I am choosing to add Home and Blog to my menu. To add Pages, simply click the ones that you want. You can drag and drop to reorder the menu items if desired, or nest items under other items by pulling them slightly to the right.
10. When complete, click the Add Items button again which now has an X on it.
11. You can now click the down arrow on each item to configure each item independently.
12. To add more properties that you can configure for each Menu Item, click the left arrow next to where it says Customizing, Menus.
13. Now click on the gear or settings icon. Click on Link Target and Title Attribute to see what you can do with those options.
14. Click on your menu again, then click the down arrow on any item to modify its properties.
15. If you want the link of a menu item to open in a new window, you can put a check box next to Open link in a new tab. This is the Link Target option that you activated.
16. Next, in the Title Attribute box, you can type a word or phrase that you would like to show when the menu item is hovered over with the mouse.
17. While you are in the menu item properties screen, take notice of the Remove link if you ever want to remove an item from the menu.
18. Be sure to click Save & Publish if you are happy with your changes.
19. Now, let’s move on to adding icons next to menu items.

Steps for Including Fast Loading SVG Icons Next to WordPress Menu Items

1. To show Font Awesome icons next to menu items, go to the Get Started page on the FontAwesome.io web site and enter in your email address. You will be emailed a link that is needed for the following steps.
2. Now, you will create a quick small plugin to make the fonts available to the WordPress web site. In your WordPress Dashboard, go to Plugins, Add New.
3. Do a search for Pluginception, click on Install Now, and then Activate.
4. Now, under the Plugins menu, click Create a New Plugin.
5. Use a name like Add The Font Awesome Script Plugin and click the Create a Blank Plugin button at the bottom.
6. Copy the short function seen in the video, which can also be found on the post page for this tutorial. Within the function, be sure to use your own Font Awesome CDN URL from Step 1.
7. Click the Update File button.
8. Now go back to Appearance, Customize, Menus.
9. Click on one of your menus below the Menu locations.
10. Click the down arrow next to a menu item.
11. Add the proper CSS classes within an i HTML tag that represents what you want to accomplish with your icons. Place this i HTML with the classes just to left of the Menu Item name in the Navigation Label box. You can visit the Examples page on the FontAwesome.io web site for possible values.
12. In my example, I am using the Home icon for the Home menu item by using the classes: fa fa-home fa-fw
13. In addition, I am using the Spinning bullet for the Blog menu item by using the classes: fa fa-spinner fa-spin fa-fw
14. Check out the Live Preview, and click Save & Publish if you are happy with the results.

Code used within this tutorial:

function add_the_font_awesome_script() {
  wp_enqueue_script( 'font-awesome', 'https://use.fontawesome.com/xxxxxxxxxx.js' );
}
add_action( 'wp_enqueue_scripts', 'add_the_font_awesome_script' );

Note: You must go to the Get Started page on the FontAwesome.io web site in order to get your own URL to put into the script above.

Here is the code I used for the individual menu items:

<i class="fa fa-spinner fa-spin fa-fw"></i>
<i class="fa fa-home fa-fw"></i>