Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 29, 2021 05:56 pm

How to Edit a WordPress Menu?


A website menu allows you to navigate through the website. It helps organize the website by giving you easy access to related items on the websites within a couple of clicks.


For the sake of branding and improving the user experience, you can choose the kind of menu you want on your website. The most common and accessible kind of menu is the horizontal menu of the top of the website. However, you also have the option of having a sidebar menu that is either on the left or right of the website page and can easily be hidden from the screen. One less common option is the footer menu and is often used when you want to attract users to the homepage rather than being distracted by the menu.


WordPress allows you to have the menu you want for your website. This tutorial is your quick guide on how to edit the menu in WordPress.


For this tutorial, we are using the “Twenty Twenty” theme of WordPress.


Creating a New Menu


Before you edit a WordPress menu, you’ll have to create one. For creating a new menu, open up your WordPress dashboard and select the Appearance customization menu from the left. There, you’ll find an option for customizing the menus.


Appearance > MenuAppearance > MenuAppearance > Menu

If you are still wondering what the purpose of the menu is, see that you have just made use of the sidebar menu of the WordPress dashboard. Now imagine locating this page if you did not have access to this sidebar menu. Menus make it easy to access various options and you need especially if you have a large website.


With every theme that you activate, the theme adds a generic menu to your website by default. Since we are creating and editing a WordPress menu from scratch, I am deleting the default menu so you can understand the process better.


If you also want to delete the WordPress menu, you will find an option at the bottom of the page that says Delete Menu. This is how your website would look without any menu.


Webpage with no menuWebpage with no menuWebpage with no menu

With the existing menu now deleted, you will get the option of creating a new menu. The only compulsory field that you need to fill in for now is the menu name. Fill in that field and click on Create Menu.


Creating a menu from scratchCreating a menu from scratchCreating a menu from scratch

With that being done, you now have a menu for your WordPress website. However, it will not show up on your website given that you have not added any menu items to it yet.


Adding Menu Items


Every link that is on the menu is a menu item. These menu items have to be added manually as you edit a WordPress menu. 


All of the pages that you have added to your WordPress website will be listed under the pages tab. Click on “iew All to see the complete list. Your recently accessed pages will be listed under the Most Recent tab.


add menu itemsadd menu itemsadd menu items

Select all the pages that you wish to see on your menu and add them to your menu. This is how your menu will look once you have added the required pages.


menu structure after adding pagesmenu structure after adding pagesmenu structure after adding pages

Select the kind of menu you want from the radio buttons below and save the menu. We have opted for the horizontal menu on the top. This is how your website will look after you have saved the menu. Remember that saving the menu is important; otherwise, your menu will not show up on your website.


webpage with menu on topwebpage with menu on topwebpage with menu on top

If you want to change the positioning of the menu items, you can drag and drop them to wherever you want them. The item on the top will appear on the right and the item on the bottom will appear on the left. Let’s drag the Home Page to the bottom.


changing the position of menu itemschanging the position of menu itemschanging the position of menu items

This is how the menu shows up on your webpage afterward:


Changed location of HomepageChanged location of HomepageChanged location of Homepage

If the navbar on the top does not fit well with your webpage or you simply want to move the menu to the side of the webpage, you can do this by selecting Desktop Expanded Menu from the menu settings. The menu will then move to the side of your webpage.


Side MenuSide MenuSide Menu

Lastly, we have the footer menu, where the entire menu moves to the bottom of the page. If you have a large website, it is recommended that you keep one menu on the top and another one at the bottom for the best user experience.  However, it largely depends on your website and brand.


If you are running a blog, you might need a minimal menu on the top but if you are a photographer and have a portfolio website, a footer menu or no menu at all would be better options for you. However, if you are an eCommerce store, a sidebar or a menu both at the top and bottom of your website might be suitable for you depending on the size of your store.


Footer MenuFooter MenuFooter Menu

Adding a Dropdown Menu


Sidebar menus can exist without having any dropdown menu. However, it becomes really confusing if you keep on adding menu items to the navbar on the top. To avoid your navbar from becoming crowded, you can add a drop-down menu. They help keep your menu minimal and website organized.


WordPress makes it really easy to turn a regular menu into a dropdown menu through its drag-and-drop feature.


A dropdown menu in WordPress acts like a nested menu that is one menu inside another. All you have to do is drag a child menu item and drop it into a parent menu item. 


See, we have dragged the Contact page and dropped it in the About page.


dropdown menu structuredropdown menu structuredropdown menu structure

This is how the dropdown menu will show up on your webpage once you save your settings.


Dropdown menu webpageDropdown menu webpageDropdown menu webpage

You can add more menus or items to your dropdown menu by placing a child menu item under an existing child menu item.


dropdown menu within a dropdown menudropdown menu within a dropdown menudropdown menu within a dropdown menu

This is how the above menu structure shows up on your webpage:


dropdown menu within a dropdown menu webpagedropdown menu within a dropdown menu webpagedropdown menu within a dropdown menu webpage

You can have nested menus inside the desktop expanded menu as well. You just have to use the drag and drop feature and it is all done.


Dropdown side menuDropdown side menuDropdown side menu

Adding Custom Links to a Menu


WordPress also allows you to add custom links leading to another website into your menu. Here’s how to edit the menu in WordPress and add a custom link to it.


Open up the custom links tab at your right, and enter the URL of the website that you want your menu item to have. After you’ve entered the URL, add the item to the menu. Let’s add a Twitter link to the menu.


Adding custom linkAdding custom linkAdding custom link

By default, this custom link would be named menu item. Scroll down to this menu item, and enter the right navigation label to rename it to whatever you like.


Giving name to the custom linkGiving name to the custom linkGiving name to the custom link

This is how it will show up on the webpage:


webpage with twitterwebpage with twitterwebpage with twitter

This custom link gets the job done, but wouldn’t it be better if it had a Twitter icon instead?


Adding Icons to Your WordPress Menu


To add an icon to your menu, you’ll need to install a third-party plugin. There’re several plugins available for this purpose, however, for this tutorial, we’ll be sticking with the Menu Image plugin.


Once the plugin is installed and activated, it’ll show up alongside your menu items.


Menu Image PluginMenu Image PluginMenu Image Plugin

Scroll down to the menu item where you want the icon to be added and select Menu Image.


Select icon from the options and then select the required icon. Click Save Changes and do not forget to save the menu once you are done.


Adding an iconAdding an iconAdding an icon

The icon will then be added to your WordPress menu:


webpage with twitter iconwebpage with twitter iconwebpage with twitter icon

Summary


In a few easy steps, we have managed to put together a WordPress menu that will work great for your website. In this tutorial, we covered:



  • how to create and delete a WordPress menu

  • how to add items to the WordPress menu

  • how to have a dropdown menu

  • how to add links to your WordPress menu items

  • how to add icons on your WordPress menu


This tutorial is all you will need to create and edit a menu on your WordPress website. 




Original Link: https://webdesign.tutsplus.com/tutorials/how-to-edit-a-wordpress-menu--cms-39012

Share this article:    Share on Facebook
View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code