Hello friends, in this post, you will learn everything about creating a menu in WordPress. Navigation menus are essential for any website as they allow easy navigation throughout your website. You can also control which links or pages the user should visit.
So, buckle up for this crash course on how to create a menu in WordPress.
What is a menu?
A navigation menu is a bar in the header that consists of links allowing the user to visit specific website pages. If the navigation is missing, the user may not find the necessary information, and it is definitely not good for any website or business.
Generally, a basic navigation menu bar includes the link to the following pages:
- Home page: The home page is necessary for a navigation bar as it allows the user to come back to the home page to get a brief overview of the website.
- About: About page include the complete introduction to the business/person behind the website. It may include history, experience, and other vital points that you want the users to learn about you or your business.
- Services/Portfolio: The page contains information about your services, or you can add a link to showcase the portfolio items.
- Pricing: If you are selling a service, this is the most important page that users look at. Hence, you must include the pricing in the navigation bar. However, suppose your pricing varies according to the services. In that case, you provide, you can skip adding the pricing link to the menu bar.
- Contact: The most basic menu includes the Home, About, and Contact page. Contact page is necessary to let the users connect with you, provide feedback, and learn more about you before doing business with you.
Apart from the above pages, you can include more links to the menu such as docs, support, FAQs, new product, shop, sales, etc.
Create your first WordPress menu
Okay so, that was a brief overview of a navigation menu for a website. Now, let’s see how you can create one for your website.
To create a WordPress menu, follow the below steps:
- Login to the WordPress dashboard and visit Appearance > Menu.
- Add a menu name and click on Create Menu (check the screenshot below)
Adding menu items
Menu items are the links to pages, posts, categories, etc., that you include in the navigation menu. After successfully creating a menu, you can add menu items to the menu. Here is how you can do that:
After creating the menu, the left section (Add menu items) will be available, including pages, posts, etc. Check any page, post, category, tag, or other templates that you want to include in the menu.
If you are not seeing any custom template or want to hide a specific post type, click on the screen options and check/uncheck the screen elements as shown in the screenshot below:
Here is what you can add to a WordPress menu:
- Page
- Posts
- Categories
- Tags
- Custom Links
- Templates (from page builders or any other plugin)
How to add submenu items in the WordPress menu
I hope you understand how to add menu items to your website navigation bar. But, sometimes, you might need to add an extra layer of menu items to display similar links in one place. Or simply need to add a submenu to menu items and link similar pages.
Here is how you can add the submenu items in a WordPress menu:
- Add menu items to the menu, including the submenu items
- Slide a menu item towards the right to make it a submenu
- The menu item right above the submenu will become the parent menu item
As you can see in the above screenshot, sliding the Sample Page menu item to the right makes it a submenu and puts it under Home Page.
Styling the menu
Some of the popular themes, such as Astra, allow you to style the menu items according to your requirements. For a menu item, you can change the color, link hover color, background, fonts, etc. But, most of the themes do not have such an option.
In such a case, you might need to add custom styling. It may sound difficult, but you can easily style the menu items according to your requirements if you know a bit of CSS.
Styling menu items with CSS allows you to style even specific menu items. Here is how you can do that:
1. First of all, create a CSS class and add it to the Additional CSS section of the customizer by visiting Appearance > Customize > Additional CSS.
2. Now, on the menu page, enable CSS classes by clicking on the Screen options.
3. Finally, add the CSS class you added in the Additional CSS section to the menu items and save the menu.
Assign menu
After creating a menu, assigning it to a location is the most important part. You can assign the menu directly while creating the menu or after adding the menu items.
In the menu settings (below menu items), choose any of the display locations and assign the menu to the desired location. The menu location may vary depending upon the theme you use.
The common menu locations are following:
- Desktop/Primary menu: The is the main menu that will be displayed on the header. It is usually included in all the themes.
- Off-Canvas/Mobile menu: A menu that will be displayed on the mobile devices after clicking on the toggle button.
- Secondary menu: Additional menu that you can add with the help of widgets or menu section (if the theme supports).
- Footer menu: It usually includes footer information such as privacy policy, terms, and conditions, contact, etc. The footer menu is displayed on the website footer.
Auto-add pages: WordPress also allows you to auto-add new pages to the menu items. Enabling this option will add the new top-level pages to the menu items. This option is not recommended if there are so many pages on the website and you regularly add new pages.
Conclusion
That was all from my side. I hope you learned how to add a menu to the WordPress website. There is another option of adding a menu to your website. It is with the help of a customizer. Adding a menu through the customizer is not recommended for beginners. We will be discussing the option in an upcoming post dedicated to the WordPress customizer.
Till then, test the WordPress menu and showcase your creativity. If you do not have any WordPress website to test, you can create a disposable WordPress website from TasteWP.
If you face any difficulties or are stuck somewhere, add a comment below.
Have a great day ahead!