How to Add a Dynamic Named Menu Item in WordPress Using Tokens

Creating a dynamic named menu item in WordPress can be a powerful and user-friendly way to personalize the user experience on your website. By replacing a token in the menu with the current user’s username, you can provide a more personalized and engaging navigation menu for logged-in users. This customization adds a touch of familiarity and enhances the sense of belonging, making users feel valued and recognized.

There are several reasons why you might want to implement a dynamic named menu item:

1. Personalization: Displaying the user’s username in the menu adds a personal touch to the website. Users feel acknowledged and connected to the site when they see their name prominently displayed.
2. User Engagement: By incorporating the user’s name, you can create a more interactive and engaging experience. When users see their name in the menu, it establishes a sense of ownership and encourages them to explore further.
3. Enhanced User Experience: Dynamic menu items provide a seamless and tailored user experience. By personalizing the navigation, you can streamline access to user-specific features, such as account settings or personalized content, improving overall usability.
4. Brand Perception: Customizing the menu with the user’s name can enhance the brand’s perception and leave a positive impression. It demonstrates attention to detail and a commitment to providing a user-centric experience.
5. Increased User Retention: Personalized experiences have been shown to increase user engagement and loyalty. By creating a dynamic menu that reflects each user’s identity, you can foster a stronger connection and encourage repeat visits.

By leveraging WordPress’s flexible architecture and utilizing dynamic menu functionality, you can elevate the user experience on your website. Customizing the menu to display the user’s name demonstrates a commitment to personalization, engagement, and user satisfaction.

Now, let’s dive into the technical implementation of creating a dynamic named menu item in WordPress using a token replacement approach.

Example: Menu Item With Current User login as Menu Title

In order to make a dynamic named menu item in WordPress, we will use a special token in our menu. We will replace this token with the current user’s username if the user is logged in. Here’s a more generic version of the code you posted, with all the specifics stripped out:

Code

The following code replaces %user_name% menu items with the name of the user. We can easily modify this to fill in any data requested.

require_once 'menu_token.php';
class menu_token_user_name {

 public function __construct() {
   // add a hook to change the token '%user_name%' in the menu to the user name.
   add_filter( 'wp_nav_menu_items', array( $this, 'modify_nav_menu_items' ), 10, 2 );
 }

 /**
  * Change the token '%user_name%' in the menu to the user name.
  *
  * @param $items
  * @param $args
  *
  * @return void
  */
 public function modify_nav_menu_items( $items, $args ) {
   // if anonymous user
   if ( ! is_user_logged_in() ) {
     return $items;
   }

   $icon = '<img src="' . get_stylesheet_directory_uri() . '/images/user-profile.svg" alt="User Profile" class="user-icon" height=25 width=25 />  ';
   $user = wp_get_current_user();
   $user_name = $icon . $user->user_login;
   $items = str_replace( '%user_name%', $user_name, $items );

   return $items;
  }
}

Explanation, Instructions, Install

In the constructor of this class, we add a WordPress filter for wp_nav_menu_items, which will modify the menu items of all WordPress menus right before they are displayed. We pass the modify_nav_menu_items function to this filter, which is defined later in the class.

In the modify_nav_menu_items function, we first check if the user is logged in. If not, we don’t make any modifications and return the menu items as is. If the user is logged in, we prepare a string with the user’s name and a user icon, and then replace the token %user_name% in the menu items with this string.

Install

To use this, you would include this class file in your theme’s functions.php file and then instantiate the class:

require_once 'path/to/menu_token_user_name.php';
new menu_token_user_name();

Finally, in your WordPress menu, you would add a custom link with the URL set to # and the link text set to %user_name%. This %user_name% will then be replaced by the user’s username when they are logged in, and disappear when they are not. Make sure to replace path/to/menu_token_user_name.php with the actual path to the PHP file.

Please remember that in this example, menu_token should be an existing class in your WordPress theme or plugin that provides the necessary functionality. If it doesn’t exist, you would need to write it or remove the extends menu_token part and ensure the menu_token_user_name class can function independently.