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.
In the next screen, click the Add a Menu button, fill in the desired menu name and click Create Menu.
The menu has now been created. You can click the Add Items button to start adding items to your menu.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Surely enough, if we check our menu we’ll see that the new styling has been applied.
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!