Using FluentCommunity Profile Pictures in WordPress User Profiles!

ByNadim Haque

The Challenge

When running a WordPress site with FluentCommunity, maintaining a consistent user experience across your site can be challenging. One common issue is that profile pictures uploaded in FluentCommunity don’t automatically appear in WordPress user profiles or other parts of your site. This creates a fragmented experience where users see different avatars depending on which part of your site they’re using.

The Solution

We can solve this problem by hooking into WordPress’s avatar system and replacing the default avatars with the ones from FluentCommunity’s database. Here’s the code that makes it happen:

PHP
/**
 * Function to retrieve FluentCommunity avatar by user ID
 * 
 * @param int $user_id WordPress user ID
 * @return string|null URL of the avatar or null if not found
 */
function get_fluentcommunity_avatar_by_id($user_id) {
    global $wpdb;

    $table_name = $wpdb->prefix . 'fcom_xprofile';

    // Query the avatar URL from FluentCommunity's profile table
    $avatar_url = $wpdb->get_var(
        $wpdb->prepare(
            "SELECT avatar FROM $table_name WHERE user_id = %d",
            $user_id
        )
    );

    return $avatar_url;
}

/**
 * Override WordPress avatar with FluentCommunity avatar
 * 
 * @param string $avatar      Current avatar HTML
 * @param mixed  $id_or_email User ID, email, or object
 * @param int    $size        Requested avatar size
 * @param string $default     Default avatar URL
 * @param string $alt         Alt text for image
 * @return string Updated avatar HTML
 */
function override_avatar_with_fluentcommunity($avatar, $id_or_email, $size, $default, $alt) {
    $user = false;

    // Determine user from provided parameter (could be ID, email, or object)
    if (is_numeric($id_or_email)) {
        $user = get_user_by('id', $id_or_email);
    } elseif (is_string($id_or_email)) {
        $user = get_user_by('email', $id_or_email);
    } elseif (is_object($id_or_email) && isset($id_or_email->user_id)) {
        $user = get_user_by('id', $id_or_email->user_id);
    }

    // If we have a valid user, try to get their FluentCommunity avatar
    if ($user && isset($user->ID)) {
        $fc_avatar = get_fluentcommunity_avatar_by_id($user->ID);
        if (!empty($fc_avatar)) {
            return sprintf(
                '<img src="%s" width="%d" height="%d" alt="%s" class="avatar avatar-%d photo" loading="lazy" />',
                esc_url($fc_avatar),
                esc_attr($size),
                esc_attr($size),
                esc_attr($alt),
                esc_attr($size)
            );
        }
    }

    // Fall back to original avatar if no FluentCommunity avatar found
    return $avatar;
}

// Hook our function into WordPress's avatar system
add_filter('get_avatar', 'override_avatar_with_fluentcommunity', 10, 5);

You can add this code to your theme’s functions.php file or create a simple plugin with it.

How It Works

This integration works in two parts:

1. Retrieving the FluentCommunity Avatar

The get_fluentcommunity_avatar_by_id() function connects directly to the FluentCommunity database table to find the user’s avatar. It uses the WordPress user ID to find the corresponding FluentCommunity profile and returns the URL of the avatar image.

2. Overriding WordPress Avatars

The override_avatar_with_fluentcommunity() function hooks into WordPress’s get_avatar filter, which is called whenever an avatar needs to be displayed. This function:

  • Identifies the user from whatever parameter WordPress passed (ID, email, or object)
  • Looks up their FluentCommunity avatar
  • If found, returns a properly formatted HTML image tag with the avatar
  • If not found, returns the original WordPress avatar as a fallback

What makes this approach powerful is that it works everywhere in WordPress. User profiles, comments, author boxes, and any other place that uses WordPress’s standard avatar system will now display the FluentCommunity avatar.

Where This Solution Works

This code will apply the FluentCommunity avatars to:

  • WordPress user profile pages
  • Author archives
  • Comments sections
  • Admin user listings
  • Dashboard widgets
  • Plugin interfaces that use the standard WordPress avatar system (including LearnDash, bbPress, BuddyPress, etc.)

Performance Considerations

This code adds a database query each time an avatar is displayed, which could impact performance on high-traffic sites. For better performance, consider implementing a caching layer. Here’s a simple example of how you might add caching:

PHP
function get_fluentcommunity_avatar_by_id_cached($user_id) {
    // Check if we have a cached version first
    $cached_avatar = get_transient('fc_avatar_' . $user_id);
    if ($cached_avatar !== false) {
        return $cached_avatar;
    }

    // If not cached, get from database
    $avatar_url = get_fluentcommunity_avatar_by_id($user_id);

    // Cache for 24 hours (86400 seconds)
    set_transient('fc_avatar_' . $user_id, $avatar_url, 86400);

    return $avatar_url;
}

Customization Options

Restrict to Specific Areas

If you only want to use FluentCommunity avatars in certain areas of your site:

PHP
function override_specific_avatars_only($avatar, $id_or_email, $size, $default, $alt) {
    // Only override on user profile pages
    if (!is_author() && !is_admin()) {
        return $avatar;
    }

    // Rest of the avatar override code here...
}

Add Fallback Options

You can create a hierarchy of avatar sources:

PHP
if ($user && isset($user->ID)) {
    // Try FluentCommunity first
    $fc_avatar = get_fluentcommunity_avatar_by_id($user->ID);
    if (!empty($fc_avatar)) {
        return '<img src="' . esc_url($fc_avatar) . '" ... />';
    }

    // Try Gravatar next
    $gravatar_url = get_avatar_url($user->ID);
    if (!empty($gravatar_url)) {
        return '<img src="' . esc_url($gravatar_url) . '" ... />';
    }
}

Troubleshooting Tips

If your integration isn’t working as expected:

  1. Verify the table name: Confirm that the FluentCommunity table exists and is named $wpdb->prefix . 'fcom_xprofile'. You can check your database directly or use a plugin like phpMyAdmin.
  2. Check the column names: Make sure the FluentCommunity table has the expected columns (user_id and avatar).
  3. Add debugging code:
PHP
// Add this to your function to log what's happening
error_log('User ID being checked: ' . $user->ID);
error_log('FC Avatar query result: ' . var_export($fc_avatar, true));
  1. Test with a known user: Try hard-coding a specific user ID that you know has an avatar in FluentCommunity to verify the basic functionality.

Conclusion

By implementing this integration, you create a more seamless experience for your users. They’ll see the same profile picture whether they’re browsing FluentCommunity content, viewing user profiles, or interacting with other areas of your WordPress site.

This approach ensures a consistent user representation across your entire WordPress ecosystem, enhancing the professional look and feel of your site while simplifying the user experience by eliminating the need to upload profile pictures in multiple places.

Have you implemented other custom integrations between WordPress plugins? Share your experiences in the comments below!