Display User or Guest Gravatar and Nickname with a Shortcode in WordPress

Effortlessly display user-specific or guest Gravatar icons and nicknames on your WordPress pages and posts using a simple shortcode. This functionality seamlessly integrates with any WordPress theme, including popular ones like Kadence and Astra. With this approach, logged-in users will see their Gravatar and nickname, while visitors will see a default “Guest” icon and name. Leveraging FluentSnippets for all custom PHP, CSS, JS, and HTML coding ensures a smooth and efficient implementation process.

Detailed Example

To display user-specific or guest Gravatar icons and nicknames on your WordPress site, add the following PHP code to your FluentSnippets setup:

function gravatar_nickname_shortcode($atts, $content = null) {
    // Extract the attributes passed to the shortcode
    $atts = shortcode_atts(array(
        'user_id' => get_current_user_id(),
    ), $atts, 'gravatar_nickname');

    // Get user data
    $user_id = intval($atts['user_id']);
    $user_info = get_userdata($user_id);

    if ($user_info) {
        // Get the user's email
        $user_email = $user_info->user_email;
        // Get the user's nickname
        $user_nickname = $user_info->nickname;
        // Get the Gravatar URL
        $gravatar_url = get_avatar_url($user_email, array('size' => 20)); // You can use any size here, the CSS will control the final display size
    } else {
        // Default values for guest users
        $user_nickname = 'Guest';
        $gravatar_url = 'https://www.gravatar.com/avatar/?d=mp&s=20'; // Default Gravatar icon with 'mp' mystery person
    }

    // Return the combined HTML with CSS class
    return '<span class="user-gravatar-nickname"><img src="' . esc_url($gravatar_url) . '" alt="' . esc_attr($user_nickname) . '" class="user-gravatar"> ' . esc_html($user_nickname) . '</span>';
}

// Register the shortcode
add_shortcode('gravatar_nickname', 'gravatar_nickname_shortcode');

Add the following CSS to your FluentSnippets setup to control the size of the Gravatar icon:

.user-gravatar-nickname {
    display: inline-flex;
    align-items: center;
}

.user-gravatar-nickname .user-gravatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px; /* Adjust spacing between the image and nickname */
}

How to Use the Shortcode

1. Default Usage: Use the shortcode to display the Gravatar and nickname of the currently logged-in user, or “Guest” and a generic icon if not logged in.
2. Specify a User ID: Use the shortcode with a specific user_id attribute to display the Gravatar and nickname of a specific user. See the Example below to display the Gravatar and nickname for the user with ID 1.

To display a general user:
[gravatar_nickname]

To display a specific user:
 [gravatar_nickname user_id="1"]

This shortcode ensures that any WordPress site, regardless of the theme, can dynamically display user-specific or guest Gravatar icons and nicknames with ease.

Notes:

“These scripts, CSS styles, and plugins are designed to work best with minimal interference from themes or other plugins. If conflicts arise, adjustments may be needed.
Please note that they must be used as is.”

Let me know if you’d like any further refinements!

Wp Scriptly