New Pro theme is live Browse now
Web Design Development

How to Add Custom Items to Particular WordPress Menus

Share with:


How to Add Custom Items to Particular WordPress Menus

Do you wish to customize certain WordPress menus with your own items?

Most websites include a navigational menu that is shown at the top called a WordPress menu. Other than simple links, you might occasionally want to display bespoke elements in navigation menus.

This post will demonstrate how you can quickly add unique items to particular WordPress menus.

Why Add Custom Items to WordPress Menus?

WordPress menus are links for website navigation that are often seen at the top of a page. They frequently appear when you tap a menu icon on mobile devices.

It’s wise to make the most of this prominent position by adding custom items other than plain links to the menu because it’s part of the conventional WordPress website layout.

For instance, some users would prefer the search form to appear just like it does on WPBeginner. A membership website could want to display links for logging in and out, or you might want to include icons or pictures in your menu.

Links in navigation menus are typically displayed as plain text by default. WordPress menus still allow you to add custom items.

Having said that, let’s look at how you may add unique items to some menus in WordPress while maintaining the integrity of the rest of your navigation menu.

Adding Custom Items to Specific WordPress Navigation Menus

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.

1. Including a Popup Search Box in the WordPress Menu

Normally, you can use the built-in search block or widget to add a search form to your WordPress sidebar. However, there is no method to automatically include search in the navigation menu.

The main menu area can now include a search box thanks to several WordPress themes. If not, you can still utilize the approach described below.

You must install and activate the SearchWP Modal Search Form plugin in order to do this. See our step-by-step tutorial on installing a WordPress plugin for more information.

The greatest WordPress search plugin on the market, SearchWP, is an addon for this plugin.

The add-on is free and will also function with the built-in WordPress search. If you want to enhance your WordPress search, we advise utilizing it in conjunction with SearchWP.

Go to the Appearance » Menus page once the addon has been installed. Click on the “SearchWP Modal Search Forms” tab to expand it under the “Add menu items” column.

After choosing your search engine, click the Add to menu option.

The search will be added to your navigation menu by the plugin. To expand the “Modal search form” and change the label to “Search” or anything else you choose, click on it under your menu options.

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.

2. Include icons and unique images in certain menus

An image or an icon is another common custom item that customers frequently want to add to a particular menu.

You must install and activate the Menu Image Icon plugin in order to do that. See our step-by-step tutorial on installing a WordPress plugin for more information.

Once activated, navigate to the Appearance » Menus page and place your cursor over the menu item you want to utilize to display an icon or image.

A popup will appear as a result. You can then select an image or icon to go along with that menu item.

The placement of the image or icon in relation to the menu item is also an option. For instance, as shown in our example below, you can show the icon immediately before the menu item or even conceal the menu title so that only the icon is visible.

To save your settings, don’t forget to click the Save changes button. If you want to add icons or pictures to other menu items, repeat the procedure.

3. Include Login and Logout Links in a Particular WordPress Menu

You may wish to make it simple for users to log into their accounts if you use a WordPress membership plugin or run an online store.

WordPress doesn’t by default include a simple method for showing login and logout links in navigation menus.

We’ll demonstrate both utilizing a plugin and using code snippets to add them.

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

This method is easier and recommended for all users.

Installing and activating the Login or Logout Menu Item plugin is the first step. Following that, you must navigate to the Appearance » Menu page and expand the Login/Logout tab.

Then, select the “Log in|Log Out” item and press the Add to Menu button.

To save your changes, don’t forget to click the Save Menu button. You may now browse to your website to use your own login and logout links.

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

2. Use custom code to add log-in and log-out links

You must add code to your WordPress website in order to use this technique. Check out our tutorial on adding custom code to WordPress if you’ve never done it before.

To begin with, you must ascertain the name that your WordPress theme assigns to the particular navigation menu position.

Visiting the Appearance » Menus tab and moving your cursor over to the menu placements section is the simplest approach to find this.

The location name in the source code below will appear when you right-click and choose the Inspect tool. For instance, our sample theme employs top-bar-menu, primary, and the footer.

Take note of the name chosen for the destination location where you want the login/logout link to appear.

The next step is to add the following code to a site-specific plugin or your theme’s functions.php file.

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

4. Including Custom Text in Your WordPress Menu

What if all you wanted to do was add words to your navigation menu rather than a link?

You can achieve that in two different ways.

1. Add Special Text to a Particular Menu (Easy Way)

Simply build a custom link on the Appearance » Menus page by using the # symbol as the URL and the text you wish to appear as the 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. Use Code to Add Custom Text to a Navigation Menu

You must add a little piece of code to your website to use this technique. Finding the name of your theme location is the first step, as mentioned above in the section on login and logout links.

The next step is to add the following code to a site-specific plugin or the functions.php file of your theme.

Simply enter your own content in the “Custom Text” box.

Now that your modifications have been saved, visit your website to view your personalized text that has been put to the end of your navigation menu.

If you wish to dynamically add dynamic components to a certain WordPress menu, this coding technique can be useful.

5. Include Today’s Date in the WordPress Menu

Would you like a WordPress navigation menu to show the current date? If you manage a blog or news website that is constantly updated, this tip will be helpful.

Simply insert the following code into a site-specific plugin or your theme’s functions.php file.

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.

6. User Name Display in WordPress Menu

Want to give your navigation menu a bit more customization? Users who are logged in can be addressed by name in your navigation menu.

You must first add the following code to your theme’s functions.php file or a plugin created especially for your website.

This code initially determines whether you have added a menu item with the link string “#profile name#.” After that, it substitutes the name of the signed-in user or a general greeting for users who are not logged in for that menu item.

The next step is to go to the Appearance » Menus page and add a new custom link with the link text #profile name#.

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.

7. WordPress Conditional Menus Displayed Dynamically

We’ve already demonstrated how to add various kinds of custom items to particular WordPress menus. But occasionally, you might need to dynamically display various menu items to consumers.

For instance, you might wish to limit access to a menu to users who are logged in. Another situation is when you need the menu to adjust according to the page the user is on.

Using this technique, you can design many menus that will only appear under particular circumstances.

Installing and turning on the Conditional Menus plugin is the first step. See our step-by-step tutorial on installing a WordPress plugin for more information.

You must go to the Appearance » Menus page after activation. From this point on, you must construct a new menu that will be displayed. For instance, in this illustration, we made a new menu accessible only to logged-in users.

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.

There are many other conditions available in the plugin. You can display the menu, for instance, based on a certain page, category, post type, taxonomy, and more.

Additionally, you can display several menus based on user responsibilities and logged-in state. On a membership website, for instance, you could display a distinct menu for current members.

We sincerely hope that this post has shown you how to add unique items to particular WordPress menus. You might also want to check out our article on how to pick the best web design program or our professional review of the top live chat programs for small businesses.

Share with:


Leave a Reply

Your email address will not be published.