How to Add Custom Items to Specific WordPress Menus

0 0
Read Time:7 Minute, 4 Second

Do you want to add custom items to specific WordPress menus?

WordPress menus are navigational menus that are displayed at the top of most websites. Sometimes you may want to display custom items other than plain links in navigation menus.

In this article, we’ll show you how to easily add custom items to specific WordPress menus.

By default, navigation menus are designed to display plain text links. However, you can still place custom items in WordPress menus.

That being said, let’s take a look at how you can add custom items to specific menus in WordPress while keeping the rest of your navigation menu intact.

There are different ways to add custom items to a navigation menu in WordPress. It depends on what type of custom item you are trying to add.

We’ll show you some of the most common examples. You’ll need to use plugins for some of them, while others will require you to add some code.

If you want to skip ahead to a certain section, you can use this table of contents:

Let’s get started.

Normally, you can add a search form to your WordPress sidebar by using the default Search widget or block. However, there is no way to add search to the navigation menu by default.

After installing the addon, simply head over to the Appearance » Menus page. Under the ‘Add menu items’ column, click on the ‘SearchWP Modal Search Forms’ tab to expand it.

Select your search engine and then click on the Add to menu button.

The plugin will add the search to your navigation menu. Click on the ‘Modal search form’ under your menu items to expand it and change the label to Search or anything else you want.

Don’t forget to click on the Save Menu button to store your changes.

You can now visit your website to see Search added to your navigation menu. Clicking on it will open the search form in a lightbox popup.

Another popular custom item that users often want to add to a specific menu is an image or an icon.

Upon activation, go to the Appearance » Menus page and move your mouse over the menu item where you want to display an icon or image.

Click on the blue Menu Image button to continue.

This will bring up a popup. From here, you can choose an image or icon to be displayed with that menu item.

You can also choose the position of the image or icon with respect to the menu item. For example, you can display the icon right before the menu item like in our example below, or even hide the menu title so only the icon shows.

Don’t forget to click on the Save changes button to store your settings. Repeat the process if you need to add icons or images to other menu items.

After that, you can visit your website to see the custom image or icon in specific menu items.

By default, WordPress doesn’t come with an easy way to display login and logout links in navigation menus.

We’ll show you how to add them by using a plugin or by using code snippet.

1. Add Login / Logout Links to Menus using a Plugin

This method is easier and recommended for all users.

From here, you need to select ‘Log in|Log Out’ item and click on the Add to Menu button.

Don’t forget to click on the Save Menu button to store your changes. You can now visit your website to see your custom login logout link in action.

The link will dynamically change to login or log out depending on a user’s login status.

2. Add Login / Logout Links using Custom Code

First, you need to find out the name that your WordPress theme uses for the specific navigation menu location.

The easiest way to find this is by visiting the Appearance » Menus page and taking your mouse over to the menu locations area.

Right-click to select Inspect tool and then you’ll see the location name in the source code below. For instance, our demo theme uses primary, footer, and top-bar-menu.

Note the name used for your target location where you want to display the login / logout link.

After that, you can visit your website and you’ll see the login our log out link in your navigation menu.

This dynamic link will automatically switch to login or logout based on user’s login status.

What if you just wanted to add text and not a link to your navigation menu?

There are two ways you can do that.

1. Add Custom Text to a Specific Menu (Easy Way)

Simply go to the Appearance » Menus page and add a custom link with # sign as the URL, and the text you want to display as your Link Text.

Click on the Add to Menu button to continue.

WordPress will add your custom text as a menu item in the left column. Now, click to expand it and delete the # sign.

Don’t forget to click on the Save Menu button and preview your website. You’ll notice your custom text appear in the navigation menu.

It is still a link, but clicking on it doesn’t do anything for the user.

2. Add Custom Text to a Navigation Menu Using Code

Simply replace where it says ‘Custom Text’ with your own text.

You can now save your changes and visit your website to see your custom text added at the end of your navigation menu.

This code method may come in handy if you want to programmatically add dynamic elements to specific WordPress menu.

Do you want to display the current date inside a navigation menu in WordPress? This trick comes in handy if you run a frequently updated blog or a news website.

Don’t forget to replace ‘primary’ with your menu’s location.

You can now visit your website to see the current date in your WordPress menu.

Want to add a little more personalization to your navigation menu? You can greet logged in users by their name in your navigation menu.

This code first checks if you have added a menu item with #profile_name# as link text. After that, it replaces that menu item with logged in user’s name or a generic greeting for non-logged in users.

Next, you need to go to Appearance » Menus page and add a new custom link with the #profile_name# as Link text.

Don’t forget to click on Save Menu button to store your changes. After that, you can visit your website to see the logged-in user’s name in the WordPress menu.

So far we have shown you how to add different types of custom items to specific WordPress menus. However, sometimes you may need to dynamically show different menu items to users.

For instance, you may want to show a menu only to logged in users. Another scenario is when you want the menu to change based on what page the user is viewing.

This method allows you to create several menus and only display them when certain conditions are matched.

Upon activation, you need to visit Appearance » Menus page. From here you need to create a new menu that you want to display. For instance, in this example we created a new menu for logged in users only.

After you have created the menu, switch to the Manage Locations tab.

From here, you need to click on the Conditional Menus link next to the menu location.

After that, you need to select the menu you created earlier from the drop down menu.

Then, click on the ‘+ Conditions’ button to continue.

This will bring up a popup window.

From here, you can select the conditions that need to be met in order to display this menu.

The plugin offers a bunch of conditions to choose from. For instance you can show the menu based on specific page, category, post type, taxonomy, and more.

You can also show different menus based on user roles and logged in status. For instance, you can show a different menu to existing members on a membership website.

source

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Previous post How to Build a WooCommerce Website With Elementor & Astra Theme
Next post Rogers deal for Shaw will go through, this investor says

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published.