The complete guide to WordPress menus

the_complete_guide_to_wordpress_menus

Navigation is a very important part of any webpage. A well structured one allows the visitors to easily locate all the information they are looking for and make the overall browsing experience more pleasant. Luckily WordPress has catered to this need with a functional and easy to use menu system. Today we’re going to take a closer look at the menu creation procedure.

Creating a custom menu

To create your menu you can navigate to Appearance > Customize > Menus.

customizer_menus

In the next screen, click the Add a Menu button, fill in the desired menu name and click Create Menu.

create_menu

The menu has now been created. You can click the Add Items button to start adding items to your menu.

add_items

add_exp

We will start by adding some pages to the menu. Click the Pages bar and then just click on the pages you want to add to the menu. A tick-mark will appear next to any page that has been added to the menu, additionally all added pages will appear on the left hand side, just below the menu title. The procedure can be seen in the image below.

adding_menu_items

Similarly you can add posts to your menu. Remember, after every change to your menu you need to click the Save & Publish button in order to store these changes.

Adding post categories to the menu

You can create listing pages for a particular post category by just adding that category to the menu. See it in action below.

add_category

That’s it. A Guide link will appear on the menu. Clicking it will point you to a post listing page that displays all posts under the guide category. Simple, isn’t it?

Adding a custom link

Many times we need to place a link on the menu that is not part of our site. This could be to a marketplace, to an affiliated site or any external link we might want to send our users to. WordPress’ menu system allows us to do this as well.

custom_link

Start by clicking the Custom Links bar. Then fill in the URL and Link Text, finally click the Add to Menu button and done. You have created a custom link.

Creating nested menus

When you have a lot of menu items it’s neither wise nor user-friendly to add them all on the same level. You will need to create a menu structure that contains top-level and sub-menu items. Luckily this is pretty easy as well. All you need to do is add your items to the menu and then using drag-n-drop nest them in the way you like. See it demonstrated below.

nested-menus

Selecting the menu location

Many themes contain more than one menu locations. For example there might be a header menu and a different footer menu. Let’s take our Santorini theme as an example. The theme features four menu locations. The main left and right menu locations and the footer left and right ones. You can see all available menu locations of a theme under Appearance > Customize > Menus > Menu Locations. This is what you’ll get if you visit menu locations on Santorini.

menu_locations

Provided that you have created all needed menus as described before, you can use the drop-down menus to set each menu to appear on the desired location. Save and you are done.

Change the navigation label

By default a menu item will have the title of the page/post etc it points to. In many cases the post title might not be suitable for a menu, it might be too long or just bad, we need to be able to change it. Here’s how. Just click the menu item and modify the navigation label, that’s it. Below we change the Contact label to Get in touch.

navigation-label

Make menu items open in a new tab

How many times have you wished an external link included in your menu opened in a new tab so user’s won’t navigate away from your site? To accomplish this start by going to Appearance > Menus and click the Screen Options button located at the top right corner of the screen. Next check the Link Target box.

screen_link_target

Now go back to your menu under Customize > Menus. Click on the menu item you want to make open in a new tab and check the Open link in new tab box.

menu_new_tab

save the menu and test it out!

Adding a custom class to a menu item

Let’s say you want to style a particular menu differently so it stands out from the rest. WordPress allows you to apply custom classes to menu items in order to be able to target them more easily. Go to Appearance > Menu, click the Screen Options button and check the CSS Classes box.

screen_css_class

Once again go back to your menu under Customize > Menus and open the menu item you wish to style. Fill in a class name of your choice and save.

menu_css

The class is added. Let’s now say we want to make the contact link red and underlined to make sure everyone notices it. We can use something like this in a custom CSS box or a child theme’s style.css file.

.contact-color a {
    color: red;
    border-bottom: 1px solid #000;
}

Surely enough, if we check our menu we’ll see that the new styling has been applied.

menu_css_applied

Final words

This concludes our introduction to WordPress’ menu system. Hopefully you are now equipped to create awesomely functional custom menus for your site. Till next time!

Leave a Reply

Your email address will not be published. Required fields are marked *