Unlocking WordPress: A Step-by-Step Guide to Adding Custom Items to Your Menus

Are you interested in adding unique items to your WordPress menus?

WordPress menus serve as navigational tools typically found at the top of most websites. Occasionally, you may wish to include custom elements beyond standard links in these menus.

In this guide, we will walk you through the simple process of adding custom items to specific WordPress menus.

The Benefits of Adding Custom Items to WordPress Menus

WordPress menus consist of navigational links that are generally positioned at the top of a website. On mobile devices, these menus often appear when you tap a menu icon.

Given that this is a key area in a standard WordPress website layout, it’s wise to utilize it by incorporating custom items beyond just text links.

For example, some users might want to include a search form like the one we feature at CanadaCreate. A membership site may wish to add login and logout links, or you might want to incorporate icons or images into your menu.

By default, navigation menus are set up to display only text links. However, you can still include custom items in your WordPress menus.

With that in mind, let’s explore how to add custom items to specific menus in WordPress while preserving the integrity of your existing navigation menu.

How to Add Custom Items to Specific Navigation Menus in WordPress

There are various methods to incorporate custom items into a WordPress navigation menu, depending on the type of custom item you wish to add.

We will provide you with several common examples. Some will require plugins, while others may need you to insert some code.

If you want to jump to a specific section, feel free to refer to this table of contents:

• Integrate a search popup into your WordPress menu
• Incorporate icons or images into your menu
• Add login/logout links to your menu
• Insert custom text into a WordPress menu
• Display the current date in the menu
• Show usernames in your menu
• Present different menus on various pages

Let’s begin.

1. Integrating a Search Popup in the WordPress Menu

Typically, you can add a search form to your WordPress sidebar using the default Search widget or block. However, there is no built-in option to include a search feature in the navigation menu.

Some WordPress themes offer the option to add a search box to the main menu area. If yours does not, you can follow the method outlined below.

To do this, you need to install and activate the SearchWP Modal Search Form plugin. For detailed instructions, refer to our step-by-step guide on how to install a WordPress plugin.

This plugin serves as an extension for SearchWP, recognized as the leading search plugin for WordPress.

The extension is free and compatible with the default WordPress search. However, we highly recommend using it alongside SearchWP for enhanced search functionality.

Once you’ve installed the extension, navigate to theAppearance » Menussection. In the ‘Add menu items’ column, click on the ‘SearchWP Modal Search Forms’ tab to reveal more options.

Choose your search engine and then click the ‘Add to menu’ button.

The plugin will integrate the search feature into your navigation menu. Click on ‘Modal search form’ under your menu items to expand it and customize the label to ‘Search’ or any other text you prefer.

Remember to click the ‘Save Menu’ button to apply your changes.

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

For further instructions, refer to our guide on adding a search button to a WordPress menu.

2. Incorporate Icons and Custom Images into Specific Menus

Another frequently requested custom item that users wish to include in a specific menu is an image or an icon.

To get started, install and activate the Menu Image Icon plugin. For detailed instructions, refer to our comprehensive guide on installing a WordPress plugin.

Once activated, navigate to the Appearance » Menus section and hover over the menu item where you wish to add an icon or image.

Click the blue Menu Image button to proceed.

This will open a popup where you can select an image or icon to accompany that menu item.

You can also decide the placement of the image or icon relative to the menu item. For instance, you can position the icon directly before the menu item as shown in our example below, or even choose to hide the menu title so that only the icon is visible.

Remember to click the Save Changes button to apply your settings. If you want to add icons or images to additional menu items, repeat this process.

Afterward, visit your website to see the custom image or icon displayed with the selected menu items.

For more in-depth guidance, check out our tutorial on adding images to WordPress menus.

3. Incorporate Login/Logout Links into Specific WordPress Menus

If you are utilizing a WordPress membership plugin or managing an online store, you may want to provide users with an easy way to log into their accounts.

By default, WordPress does not provide a straightforward way to include login and logout links in navigation menus.

We will guide you on how to add these links either by using a plugin or by implementing a code snippet.

1. Adding Login / Logout Links to Menus Using a Plugin

This approach is simpler and recommended for all users.

Begin by installing and activating the Login or Logout Menu Item plugin. Then, navigate to theAppearance » Menuspage and click on the Login/Logout tab to reveal more options.

From there, select the ‘Log in|Log Out’ item and click the Add to Menu button.

Remember to click the Save Menu button to apply your changes. You can now visit your website to see the custom login/logout link in action.

The link will automatically change to either login or logout based on the user’s login status.

For more details, check out our tutorial on adding login and logout links in WordPress menus.

2. Adding Login / Logout Links Using Custom Code

This method requires you to insert code into your WordPress website. If you are unfamiliar with this process, refer to our guide on adding custom code in WordPress.

First, determine the name your WordPress theme uses for the specific navigation menu location.

The simplest way to locate this is by navigating to the Appearance » Menus section and hovering over the menu locations area.

Right-click to select the Inspect tool, and you will see the location name in the source code below. For example, our demo theme utilizes primary, footer, and top-bar-menu.

Make a note of the name for your desired location where you want to add the login/logout link.

Next, you need to insert the following code into your theme’s functions.php file or a site-specific plugin.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) { if (is_user_logged_in() && $args->theme_location == 'primary') { $items .= '

After that, you can visit your website, and you will see the login or logout link in your navigation menu.

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

4. How to Add Custom Text to Your WordPress Navigation Menu

What if you want to include text in your navigation menu without linking it?

There are two methods to achieve this.

1. Adding Custom Text to a Specific Menu (Simple Method)

Navigate to theAppearance » Menuspage, and create a custom link using the # symbol as the URL, along with the desired text for your Link Text.

Click the Add to Menu button to proceed.

WordPress will insert your custom text as a menu item in the left column. Expand it and remove the # symbol.

Remember to click the Save Menu button and preview your site. You will see your custom text displayed in the navigation menu.

Although it remains a link, clicking it will not take the user anywhere.

2. Adding Custom Text to a Navigation Menu Using Code

For this approach, you will need to insert a code snippet into your website. First, identify the name of your theme location as outlined in the login/logout link section above.

Then, add the following code to your theme’s functions.php file or a site-specific plugin.

add_filter( 'wp_nav_menu_items', 'add_custom_menu_item', 10, 2 );
function add_custom_menu_item ( $items, $args ) { if ( $args->theme_location == 'primary') { $items .= '

Just replace ‘Your Custom Text Here’ with your desired text.

Now, save your changes and check your website to see your custom text added to the end of your navigation menu.

This coding method is useful for programmatically adding dynamic elements to specific WordPress menus.

5. Display Current Date in WordPress Menu

Would you like to show the current date in your WordPress navigation menu? This is particularly useful for blogs or news websites that are frequently updated.

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

add_filter('wp_nav_menu_items','insert_current_date_in_menu', 10, 2);
function insert_current_date_in_menu( $items, $args ) { if( $args->theme_location == 'primary') { $currentDate = date('l jS F Y'); $items .= '

Remember to substitute ‘primary’ with the specific location of your menu.

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

Feel free to customize the date format according to your preferences. Check out our tutorial on modifying the date and time format in WordPress.

6. Show User Name in WordPress Menu

Looking to add a personal touch to your navigation menu? You can greet logged-in users by their name in the menu.

To get started, add the following code to your theme’s functions.php file or a custom plugin.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) { foreach ( $menu_items as $menu_item ) { if ( strpos($menu_item->title, '#profile_name#') !== false) { if ( is_user_logged_in() ) { $current_user = wp_get_current_user(); $user_public_name = $current_user->display_name; $menu_item->title = str_replace("#profile_name#", " Hey, ". $user_public_name, $menu_item->title . "!"); } else { $menu_item->title = str_replace("#profile_name#", " Welcome!", $menu_item->title . "!"); } } } return $menu_items;
} 

This code checks if a menu item with ‘#profile_name#’ as the link text exists. It then replaces that item with the logged-in user’s name or displays a generic greeting for users who are not logged in.

Next, navigate to the Appearance » Menus page and add a new custom link using the#profile_name#as the link text.

Remember to click the Save Menu button to apply your changes. After saving, you can visit your website to see the logged-in user’s name displayed in the WordPress menu.

7. Dynamically Display Conditional Menus in WordPress

So far, we have demonstrated how to add various types of custom items to specific WordPress menus. However, there may be times when you need to show different menu items dynamically based on user conditions.

For example, you might want to display a menu only for logged-in users, or change the menu based on the page the user is currently viewing.

This approach allows you to create multiple menus and display them only when certain conditions are met.

First, install and activate the Conditional Menus plugin. For detailed instructions, refer to our step-by-step guide on how to install a WordPress plugin.

After activation, visitAppearance » MenusThis is where you can create a new menu that you want to display. For example, we created a menu specifically for logged-in users.

Once you’ve created the menu, navigate to the Manage Locations tab.

Here, click on the Conditional Menus link located next to the menu location.

Next, select the menu you created earlier from the dropdown list.

Then, click the ‘+ Conditions’ button to proceed.

This action will open a popup window.

In this window, you can choose the conditions that must be met for this menu to be displayed.

The plugin provides a variety of conditions to select from. For example, you can display the menu based on a specific page, category, post type, taxonomy, and more.

You can also show different menus depending on user roles and whether users are logged in. For instance, you can display a unique menu for existing members on a membership site.

We hope this article has helped you understand how to add custom items to specific WordPress menus. You may also want to check out our guide on selecting the best web design software or our expert comparison of the top live chat software for small businesses.

If you enjoyed this article, consider subscribing to our YouTube Channel for informative WordPress video tutorials. You can also connect with us on Twitter and Facebook.