banner



How To Add Blog Page To 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 > Menu Appearance > Menu Appearance > 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 menu Webpage with no menu Webpage 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 scratch Creating a menu from scratch Creating 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 items add menu items add 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 pages menu structure after adding pages menu 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 top webpage with menu on top webpage 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 items changing the position of menu items changing the position of menu items

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

Changed location of Homepage Changed location of Homepage Changed 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 Menu Side Menu Side 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 Menu Footer Menu Footer 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 structure dropdown menu structure dropdown menu structure

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

Dropdown menu webpage Dropdown menu webpage Dropdown 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 menu dropdown menu within a dropdown menu dropdown menu within a dropdown menu

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

dropdown menu within a dropdown menu webpage dropdown menu within a dropdown menu webpage dropdown 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 menu Dropdown side menu Dropdown 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 link Adding custom link Adding 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 link Giving name to the custom link Giving name to the custom link

This is how it will show up on the webpage:

webpage with twitter webpage with twitter webpage 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 Plugin Menu Image Plugin Menu 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 icon Adding an icon Adding an icon

The icon will then be added to your WordPress menu:

webpage with twitter icon webpage with twitter icon webpage 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.

How To Add Blog Page To Menu

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

Posted by: dayintere.blogspot.com

0 Response to "How To Add Blog Page To Menu"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel