Cancel

Sarah Gooding

Learn How to Customize BuddyPress Avatars

bp-circlesBuddyPress 1.9 is right around the corner and should be released in early November. The initiative to improve the BuddyPress codex has inspired a number of new pages and tutorials. Documentation leaders @hnla and @mercime have restructured the codex so that pages are not so deeply nested. They’ve also been organizing the addition of new articles and tutorials.

I decided to jump in and submit a guide on how to customize BuddyPress avatars. I wasn’t a very experienced codex contributor, but the BuddyPress folks make it very easy. They will help you to find an area where you can contribute.

In the guide to Customizing BuddyPress Avatars you will learn how to:

  • Understand the Default BuddyPress Avatar Sizes
  • Change BuddyPress Avatar Sizes Using bp-custom.php
  • Change the Default BuddyPress Avatar (Mystery Man)
  • Customize BuddyPress Avatars With CSS
  • Create Circular BuddyPress Avatars
  • Adjust the Crop Pane Window for Circular Avatars
  • Disable BuddyPress Avatar Upload

Check it out and let me know if there’s anything else you’d like to see in the BuddyPress avatar tutorials.

Get Involved in BuddyPress Documentation

Lots of new guides and tutorials are popping up in the codex. Better documentation benefits everyone involved in BuddyPress. It helps to lessen the support load and also provides valuable information for those who want to extend the platform. If you want to help contribute, check out the Codex Standards & Guidelines for BuddyPress. Find an article to write and get in touch on the BuddyPress Development blog.

Category:
Tags: , ,
13

13 responses to “Learn How to Customize BuddyPress Avatars”

  1. noizeburger says:
    November 1, 2013 at 4:35 AM

    Sarah,

    I’ve followed your comments and posts on several sites for years. Like mostly always, this is a great input and tutorial for the community. Will check it out immediatly!

    Thank you

    Report

  2. noizeburger says:
    November 1, 2013 at 7:14 AM

    Btw: there’s one small mistake:
    if you want to use your own avatars instead of the mistery man, you have to use apostrophe before and after the url:

    define ( ‘BP_AVATAR_DEFAULT’, ‘http://example.com/default-avatar.jpg ‘);
    define ( ‘BP_AVATAR_DEFAULT_THUMB’, ‘http://example.com/default-avatar-thumb.jpg ‘);

    Report

  3. Sarah Gooding says:
    November 1, 2013 at 11:33 AM

    @noizeburger – Thanks for catching that! I’ve fixed it. :)

    Report

  4. Codex Articles Begin To Arrive | BuddyPress Development Updates says:
    November 2, 2013 at 11:16 AM

    […] Learn How to Customi… on Codex Progress Update & TO… […]

    Report

  5. Dara Pich Svay says:
    November 2, 2013 at 4:04 PM

    Hi Sarah, I am trying to make all my Avatars circular, so I copied these codes:
    img.avatar {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 0 #fff;
    }

    And I put them in my theme style css, but nothing has changed. Can you please help and point me the right direction?

    Thanks,

    Dsvay

    Report

  6. Sarah Gooding says:
    November 2, 2013 at 4:06 PM

    @Dara Pich Svay – Are you using the default theme? If not, your selectors might be different.

    Report

  7. Dara Pich Svay says:
    November 2, 2013 at 4:32 PM

    @Sarah Gooding –

    I am using a dynamix theme. Where can I paste the code?

    Thanks,

    Dsvay

    Report

  8. Sarah Gooding says:
    November 2, 2013 at 4:47 PM

    @Dara Pich Svay – Put it in your child theme. You’ll have to figure out the correct selectors to override what your theme does. Please post in the support forums if you problems with it.

    Report

  9. Rob says:
    November 4, 2013 at 4:10 PM

    Sarah, by ‘default theme’ do you mean twenty-twelve? ’cause BP doesn’t really have a default theme anymore.

    Report

  10. Mercime says:
    November 5, 2013 at 7:39 PM

    @Sarah Thank you for your contribution to the BP Codex and for your support, as usual :) We’re grateful for the positive responses of the many developers who will be contributing new articles soon.

    @Rob the BP Default Theme in BP 1.9 trunk http://buddypress.trac.wordpress.org/browser/trunk/bp-themes

    Report

  11. asiroc says:
    March 3, 2014 at 9:25 AM

    hello Sarah, thank you for this post. unfortunately i have not been successful at adding a custom avatar to our BP site. we are using BP version 1.9.1. i added

    define ( ‘BP_AVATAR_DEFAULT’, ‘http://www.penintime.com/wp-content/uploads/2013/03/avatar-1.png’ );

    to the bp-custom.php file and uploaded to /wp-content/plugins/ folder. can you please tell me why this is not working?

    thanks so much.

    Report

  12. Meagan O’Brien says:
    May 16, 2014 at 12:19 PM

    In case anyone is looking for a solution to creating a whole set of custom avatars for Buddypress users to choose from I just posted directions on how to do this here: http://wordpress.org/support/topic/creating-specific-custom-avatars-with-gravity-forms?replies=1#post-5586200

    It uses a paid Gravity Forms plugin – but it works (and I’ve been trying to do this for years so I want to share with everyone). Thanks.

    Report

You may also like

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: