• Skip to primary navigation
  • Skip to main content

RocketGeek

Home of WP-Members, The Original WordPress Membership Plugin

  • WordPress Plugins
    • WP-Members
      • FAQs
      • Quick Start
      • Documentation
      • Extensions
    • Advanced Options
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Download Protect
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Invite Codes
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • MailChimp Integration
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • PayPal Subscriptions
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Salesforce Web-to-Lead
    • Security
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Text Editor
      • Purchase the Plugin
      • Get the Pro Bundle
    • User List
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • User Tracking
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Memberships for WooCommerce
    • WordPass
  • Store
    • Cart
    • Checkout
  • Blog
    • Basics [Free]
    • Tips and Tricks
    • Filters
    • Actions
    • Code Snippets
    • Shortcodes
    • Design
    • Release Announcements
  • Contact
  • Sign In
  • Show Search
Hide Search
Home » Tips and Tricks » Integrate WP User Avatar with WP-Members User Profile

Integrate WP User Avatar with WP-Members User Profile

Chad Butler · Apr 4, 2016 ·

wp_user_avatarWP User Avatar is a popular choice for allowing users to upload and use a custom avatar instead of gravatar that is integrated in WordPress. This post describes a nicely integrated process for a user to update their avatar on the WP-Members user profile screen.

This code snippet will add a link to the WP-Members user profile update screen to update the user’s avatar, and will set up a custom screen for avatar update screen.

The snippet can be used “cut-and-paste” but also has some elements that could be customized.  Additionally, the features of the WP User Avatar front end process could have some CSS applied for theme integration.  The screenshot here is a demo site using Twenty Fourteen, so colors and buttons will look different for you.

Note: you must also have WP User Avatar installed for this to work.  

This article is only available to WP-Members Support Subscribers. If you have an existing subscription, please login below. If you do not have a current support subscription, you can purchase a support subscription here.

Already a Member? Log In Here
   
Forgot password? Click here to reset

To gain full access to WP-Members premium content, a current support subscription is required. You can purchase an annual support subscription for as little as $59, which provides you with access to priority support, a customer support forum, access to code snippets, and more.

Why wait? Choose your subscription option here.

[
Why join?]

Tips and Tricks avatar, integration, wpmem_member_links

Welcome to RocketGeek Interactive › Forums › Integrate WP User Avatar with WP-Members User Profile

Tagged: Avatar, integration, wpmem_member_links

  • This topic has 17 replies, 7 voices, and was last updated 2 years, 6 months ago by Chad Butler.
Viewing 9 reply threads
  • Author
    Posts
    • April 4, 2016 at 11:34 am #9856
      Chad Butler
      Keymaster

      WP-Members 3.1 will include an image upload field that will be able to be used for many things, including user avatars. Since this is a new feature, I
      [See the full post at: Integrate WP User Avatar with WP-Members User Profile]

    • May 3, 2016 at 11:21 am #10039
      Michael Kracke
      Participant

      Just an FYI, I found a minor bug in the code you have above.

      In the else statement you have the line:
      $new_link = '<li><a href="' . $link . '">' . $link_text . '</a></li>';

      The $variable $link_text was never declared, it was declared as $profile_link_text, therefore the 3rd list item is left blank as there is nothing to display

      I changed $link_text to $profile_link_text and it displays.

      • May 3, 2016 at 1:57 pm #10043
        Chad Butler
        Keymaster

        Good eye!

        I think I probably added the two variables later and didn’t get them changed in the rest of the snippet. I’ve updated it accordingly.

    • May 15, 2017 at 1:47 pm #12997
      jdaviswebdesign
      Participant

      I installed the WP User Avatar plugin and inserted the above code snippet into my functions.php file. A link is created on the user page (Update My Avatar), but “/user/?a=update_my_avatar” has only a link (Return to User Settings). There is no image upload feature.

    • May 15, 2017 at 3:35 pm #12998
      jdaviswebdesign
      Participant

      Never mind my previous comment. I see now that I had to make some adjustments in the WP User Avatar plugin to get this to work.

      • May 15, 2017 at 4:26 pm #12999
        Chad Butler
        Keymaster

        No problem – glad to hear it’s working now.

    • July 19, 2017 at 9:04 am #13365
      ehbloom
      Blocked

      I’d like the avatar to be collected when someone registers. I don’t see anyway here to do there? Is there a field name I should use?

      I’ve the image upload feature but don’t see how it becomes the avatar.

      I’m also using buddypress.

      • July 19, 2017 at 8:30 pm #13371
        Chad Butler
        Keymaster

        If you’re using BuddyPress, the best thing you could do is rely on Gravatar for user avatars (and encourage users to set up a gravatar image if they don’t already have one). WordPress is built to use Gravatar, and so is BuddyPress, bbPress, and a host of other tools. WordPress’ default functions for displaying an avatar assume using Gravatar.

        Gravatar is “G”lobally “R”ecognized “Avatar” – it is connected to the user’s email address. If the user has one set up, it will display on any site that uses gravatar – which means any WP site, BuddyPress site, wordpress.com, and a host of others.

    • August 3, 2017 at 2:40 pm #13465
      neopolymath
      Participant

      Is there a way to integrate this into the User Sign-Up screen as well?

      • August 3, 2017 at 3:24 pm #13466
        Chad Butler
        Keymaster

        That’s not really a possibility as the WP User Avatar features (at least their front facing shortcodes) need to have a user associated with them. That’s not available when the user is registering.

    • March 14, 2018 at 11:14 am #14427
      ituk
      Participant

      Hey, is it possible to migrate wp user avatar data into wp members?
      I’d like to delete wp-user-avar plugin without loosing all the users avatars.

      Thanks,
      Itamar

      • March 15, 2018 at 10:09 am #14429
        Chad Butler
        Keymaster

        I believe it is possible. In doing a little digging in WP User Avatar, it does seem that it follows a somewhat similar approach as WP-Members in handling this information for a user. It stores the image as a WP attachment post type and saves the ID of that post in a user meta field. This is also how WP-Members handles image fields tied to users.

        So, in order to switch over, you don’t really need to do much. Create your image field in WP-Members as a custom field. Make sure to use the meta key “wp_user_avatar”, replacing “wp_” is the database prefix used in your installation. That’s all you need to do in terms of switching the field information, and you could switch back if needed since the data storage is pretty much the same.

        In terms of actually using this as the user’s avatar, you’ll need to filter the avatar value. WP User Avatar is running a function attached to the get_avatar filter hook. If you’re going to deactivate that plugin, you’ll need your own filter to make sure that the avatar used is the user’s custom avatar image stored locally. The following filter function should do it:

        add_filter( 'get_avatar', function( $avatar, $id_or_email, $size, $default, $alt, $args ) {
        
        	$custom_avatar_meta = 'wp_user_avatar';
        
        	if ( ! is_numeric( $id_or_email ) ) {
        		$user_obj = get_user_by( 'email', $id_or_email );
        		$user_id = $user_obj->ID;
        	} else {
        		$user_id = $id_or_email;
        	}
        	$custom_avatar_id = get_user_meta( $user_id, $custom_avatar_meta, true );
        	if ( $custom_avatar_id ) {
        		$custom_avatar_image = wp_get_attachment_url( $custom_avatar_id );
        		$avatar = "<img alt='{$alt}' src='{$custom_avatar_image}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
        	}
        	return $avatar;
        }, 10, 6 );

        Change the value for $custom_avatar_meta accordingly (default “wp_” stem is used, but it should be whatever your db prefix is).

        This filter checks to see if the user ID passed is an ID or an email. If it’s an email, it converts it to the ID (so that it can get the user meta for the avatar.

        Then it checks to see if a meta value exists for the custom avatar, and if so, creates the image HTML using the custom avatar.

        Then it returns the filtered result.

        Hope that helps.

    • September 3, 2018 at 7:19 am #15334
      DrivenMedia
      Participant

      I am using the latest version of WP-Members and do not see any option for the user to upload or change their avatar. So I followed the instructions above. I now see a link to “Update My Avatar” on the user page when logged in, but when I click the link, it brings me to a blank page within this url “/member-profile/?a=update_my_avatar” Any ideas?

      • September 3, 2018 at 7:42 am #15335
        Chad Butler
        Keymaster

        This script is for integrating the plugin WP User Avatar into the WP-Members profile links. It requires that WP User Avatar also be installed. Do you have WP User Avatar installed and activated? If not, you’ll need that for this to work.

        • This reply was modified 2 years, 6 months ago by Chad Butler.
    • September 3, 2018 at 7:43 am #15337
      DrivenMedia
      Participant

      Yes. I added the WP User Avatar as instructed in the article. It is active.

      • September 3, 2018 at 7:51 am #15338
        Chad Butler
        Keymaster

        If the plugin is installed and active, and the script is correctly added, it should be working. The integration is a basic one – essentially running the WP User Avatar [avatar_upload] shortcode. I’ve tested it locally to confirm it’s working correctly. So if it’s not working for you, I would need to take a direct look at things to see why that is. If you can send me a login to review, I’ll get it looked at. But don’t post credentials here – use the support contact form (where I am the only person who will see it).

    • September 3, 2018 at 7:54 am #15339
      DrivenMedia
      Participant

      Oh. So I need to add the [avatar_upload] to the member profile page. I did not do that. Sorry for your time but thank you for your help.

      • September 3, 2018 at 8:07 am #15340
        Chad Butler
        Keymaster

        Actually no – sorry if I confused the issue – the snippet is what adds that shortcode – you don’t need to do it (although you could if you just want it on the profile page below the profile links). The snippet is for adding a custom process to the user profile page so that you get a screen with only the avatar upload, and the snippet runs that shortcode.

        So… at the risk of confusing things again, I was merely saying the script doesn’t do very much. It does basically two things: if the user is on the profile links page, it adds the links, otherwise it creates a screen for updating the avatar and runs that shortcode. I was only mentioning that to point out that it’s a simple script so if something is not working, it is likely that I’ll need to review it for you since there’s not much to it and if something’s wrong I don’t know what it could be.

        Hope I didn’t “muddy the water” here… if you want me to review it, let me know and I’m happy to.

  • Author
    Posts
Viewing 9 reply threads
  • You must be logged in to reply to this topic.
Log In

Ready to get started?

Join Today!

© 2021 · butlerblog.com · RocketGeek is built using WordPress, WP-Members, and the Genesis Framework

  • butlerblog.com
  • WP-Members Support Subscription
  • Terms of Service
  • Refund Policy