Enhance WordPress Menus with Gravatars and User Nicknames

Enhancing Your WordPress Menu with User Gravatars and Nicknames

Adding a personal touch to your WordPress navigation menu can significantly enhance user experience. One way to achieve this is by dynamically displaying the user’s Gravatar (profile picture) and nickname in the menu. This guide will walk you through implementing this feature using a simple script and some CSS.

Why Add Gravatars and Nicknames to Menus?

1. Personalization: Show users their profile picture and nickname for a familiar and interactive experience.
2. Dynamic Updates: Automatically display relevant information for logged-in users and provide a default for guests.
3. Professional Touch: Add a polished and modern look to your website’s navigation.

Step 1: The PHP Script

The PHP script hooks into WordPress’s wp_nav_menu_items filter to modify menu items. Here’s how it works:

1. Retrieve User Details:
   The script fetches the current user’s ID, email, and nickname.
2. Generate Gravatar URL:
   Using the get_avatar_url function, it fetches the Gravatar associated with the user’s email. If the user is not logged in, it defaults to a placeholder avatar.
3. Replace Menu Label:
   A specific menu item (e.g., labeled “Grav”) is replaced with the user’s Gravatar and nickname.

Here’s the full code:

add_filter('wp_nav_menu_items', 'add_gravatar_to_menu', 10, 2);
function add_gravatar_to_menu($items, $args) {
    $user_id = get_current_user_id();
    $user_info = get_user_by('id', $user_id);
    $gravatar_url = $user_info ? get_avatar_url($user_info->user_email, ['size' => 20]) : 'https://www.gravatar.com/avatar/?d=mp&s=20';
    $nickname = $user_info ? $user_info->nickname : 'Guest';

    // Find the menu item by label or class and modify
    $items = str_replace(
        'Grav', // Replace 'Menu Label' with your menu item's label
        '<span class="menu-item-with-avatar"><img src="' . esc_url($gravatar_url) . '" alt="" class="user-gravatar"> ' . esc_html($nickname) . '</span>',
        $items
    );

    return $items;
}

Step 2: Styling with CSS

To make the Gravatar and nickname look appealing, use the following CSS:

.user-gravatar-nickname {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Space between image and text */
    font-size: 14px;
    font-family: Arial, sans-serif;
}

.user-gravatar-nickname img.user-gravatar {
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Makes the image circular */
    display: block;
}

.menu-item-with-avatar {
    display: flex;
    align-items: center;
    gap: 5px;
}

.menu-item-with-avatar img.user-gravatar {
    width: 20px;
    height: 20px;
    border-radius: 50%; /* Circular avatar */
    display: block;
}

Step 3: Customizing the Menu

Replace the 'Grav' placeholder in the PHP script with the label of the menu item you want to replace. For example, if your menu contains an item labeled “Profile,” you would replace 'Grav' with 'Profile'.

How It Works

• Logged-In Users: Displays the user’s Gravatar (20px size) and their nickname.
• Guest Users: Shows a default Gravatar with the label “Guest.”

This implementation ensures a consistent and professional look, whether users are logged in or not.

Why This Is Useful

1. Interactive Menus: This feature engages users by making the navigation menu more interactive and user-centric.
2. Guest Handling: Seamlessly accommodates guests with a default avatar and label.
3. Customizable: Both the PHP script and CSS can be tailored to suit your design and functionality needs.

How to make it work?

1. Copy the php script inside fluentsnippet and name it what ever you want, save it as a functions file.
2. Copy the CSS to fluentsnippet and create a style file.
3. Go to menu and create a custom link.
4. In the Navigation label add “Grav”.
5. Also in the title attribute add “Grav”.
6. Make sure you have CSS Classes enabled.
7. In the CSS Classes add “menu-item-with-avatar”
8. You can hyperlink the gravatar link as well.
9. Now you can add submenus below the gravatar as well.
10. See example below:

To see example of this in action please visit https://coalitionwp.cc/

Conclusion

Adding Gravatars and nicknames to your WordPress menu is a straightforward way to make your site more personal and engaging. With the PHP script and CSS provided, you can implement this feature quickly. Whether you’re running a blog, an e-commerce site, or a community platform, this enhancement can improve user interaction and retention.

So why wait? Elevate your WordPress menu today!

Notes:

This basic script, CSS style, and plugin are designed to function optimally assuming minimal interference from your theme or other plugins. If conflicts occur or further customization is needed, additional adjustments may be necessary. Please note that this script, CSS style, or plugin must be used AS IS.

Wp Scriptly