Do you wish to wordpress-menus customise some WordPress menus with your own items?
Most websites include navigational menus that are shown at the top of the page. Custom elements other than ordinary links may be displayed in navigation menus on occasion.
We’ll teach you how to simply add custom items to certain WordPress menus in this post.
Why Add Custom Items to wordpress-menus
WordPress menus are navigational links usually displayed at the top of a website. On mobile devices, they are often displayed when you tap a menu icon.
Because this is such a prominent area in a standard WordPress website layout, it’s a good idea to take use of it by including personalised items in the menu instead of just basic links.
Some users, for example, may like to show the search form, as we do at WPBeginner. You could wish to offer login and logout buttons on a membership website, or you might want to add icons or graphics to your menu.
Navigation menus are meant to display plain text links by default. Custom menu items may still be added to WordPress menus.
Let’s look at how to add custom items to specialised menus in WordPress while keeping the rest of the navigation menu intact.
Adding Custom Items to Specific Navigation Menus in WordPress
In WordPress, there are several ways to add custom items to a navigation menu. It all depends on the sort of custom item you want to add.
We’ll go through a few of the more frequent ones. Some of these will require the usage of plugins, while others will necessitate the addition of code.
You may use this table of contents to jump ahead to a certain section:
Incorporate a search box into your WordPress menu.
Make your menu more visually appealing by using symbols or graphics.
Add links to your menu for logging in and logging out.
Customize a WordPress menu using your own wording.
Incorporate the current date into the menu.
Usernames should be shown in your menu.
On separate pages, show different menus.
Let’s get this party started.
1. Adding a Search Popup in WordPress Menu
Normally, you can use the basic Search widget or block to add a search form to your WordPress sidebar. By default, though, there is no option to add search to the navigation menu.
A search box may be added to your main menu section in several WordPress themes. If yours doesn’t, though, you can utilise the approach described below.
The SearchWP Modal Search Form plugin must be installed and activated for this to work. See our step-by-step guide on installing a WordPress plugin for more information.
This plugin is a supplement to SearchWP, the greatest WordPress search plugin available.
The extension is free and compatible with the normal WordPress search. However, we urge that you use it in conjunction with
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.
For more details, see our guide on how to add a search button to a WordPress menu.
2. Add Icons and Custom Images to Specific Menus
An picture or an icon is another common custom item that users often wish to add to a certain menu.
You’ll need to install and activate the Menu Image Icon plugin to accomplish this. See our step-by-step guide on installing a WordPress plugin for more information.
Go to the Appearance » Menus page after activation and hover your cursor over the menu item where you wish to show an icon or picture.
.
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.
For more detailed instructions, see our tutorial on how to add images in WordPress menus.
3. Add Login / Logout Links to Specific WordPress Menu
If you’re utilising a WordPress membership plugin or have an online store, you might want to make it easy for users to log in.
WordPress does not provide an easy method to display login and logout buttons in navigation menus by default.
We’ll teach you how to use a plugin or a code snippet to add them.
1. Use a plugin to add login and logout links to menus.
This approach is simpler and more user-friendly.
The Login or Logout Menu Item plugin must first be installed and activated. After that, go to Appearance » Menu and expand the Login/Logout option on the Appearance » Menu page.
.
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.
Learn more in our tutorial on how to add login and logout links in WordPress menus.
2. Add Login / Logout Links using Custom Code
This method requires you to add code to your WordPress website. If you haven’t done this before, then take a look at our guide on how to add custom code in WordPress.
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.
4. Adding Custom Text to Your WordPress Navigation Menu
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
You’ll need to add a code snippet to your website for this approach. First, as indicated above in the login/logout link section, you must determine the name of your theme location.
Then, in the functions.php file of your theme or a site-specific plugin, paste the following 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.
5. Add Current Date in 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.
You can also change the date format to your own liking. See our tutorial on how to change the date and time format in WordPress.
6. Display User Name in 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.
7. Dynamically Display Conditional Menus in WordPress
So far, we’ve demonstrated how to add various custom items to distinct WordPress menus. However, you may need to dynamically display alternative menu items to users on occasion.
For example, you could wish to restrict access to a menu to logged-in users only. Another instance is when the menu should alter depending on whatever page the user is on.
This approach enables you to construct many menus that are only displayed when particular criteria are satisfied.
The Conditional Menus plugin must first be installed and activated. See our step-by-step guide on installing a WordPress plugin for more information.
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 provides a variety of criteria from which to pick. You may, for example, display the menu depending on a given page, category, post type, taxonomy, and other factors.
You may also display various menus depending on the user’s role and current logged-in state. On a membership website, for example, you can present a separate menu to current members.
