User Avatar is a great plugin that allows users to upload their own avatars. BBPress is forum software for WordPress. Here we’ll take a look at how we can integrate the two, to allow bbPress users to upload their own avatars from their edit profile page.
Actually, this is simple. The avatar upload section is automatically added to the page. All we have to do is include the necessary JavaScript to make it work. We’ll also add some CSS to make things look nicer. We’ll wrap everything in a function called my_bbpress_user_avatars()
, which we will hook to the show_user_profile
and edit_user_profile
action hooks.
<?php add_action( 'show_user_profile', 'my_bbpress_user_avatars' ); add_action( 'edit_user_profile', 'my_bbpress_user_avatars' ); function my_bbpress_user_avatars( $user ) { ?> <style> .button-primary, .submitdelete{ display: inline-block; text-decoration: none; font-size: 12px; line-height: 23px; height: 24px; margin: 0px; padding: 0px 10px 1px; cursor: pointer; border-width: 1px; border-style: solid; border-radius: 3px 3px 3px 3px; white-space: nowrap; -moz-box-sizing: border-box; background-color: rgb(33, 117, 155); background-image: linear-gradient(to bottom, rgb(42, 149, 197), rgb(33, 117, 155)); border-color: rgb(33, 117, 155) rgb(33, 117, 155) rgb(30, 106, 141); box-shadow: 0px 1px 0px rgba(120, 200, 230, 0.5) inset; color: rgb(255, 255, 255) !important; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); } .submitdelete{ background-image: linear-gradient(to bottom, #ddd, #bbb); color: #333 !important; border-color: #888; box-shadow: 0px 1px 0px white inset; } </style> <link rel='stylesheet' id='thickbox-css' href='/wp-includes/js/thickbox/thickbox.css' type='text/css' media='all' /> <link rel='stylesheet' id='imgareaselect-css' href='/wp-includes/js/imgareaselect/imgareaselect.css' type='text/css' media='all' /> <script type="text/javascript"> /* <![CDATA[ */ var thickboxL10n = {"next":"Next >","prev":"< Prev","image":"Image","of":"of","close":"Close","noiframes":"This feature requires inline frames. You have iframes disabled or your browser does not support them.","loadingAnimation":"\/wp-includes\/js\/thickbox\/loadingAnimation.gif","closeImage":"\/wp-includes\/js\/thickbox\/tb-close.png"}; /* ]]> */ </script> <script type="text/javascript" src="/wp-includes/js/thickbox/thickbox.js"></script> <script type="text/javascript" src="/wp-includes/js/imgareaselect/jquery.imgareaselect.js"></script> <?php } ?>
The first thing in there is some styling for the buttons. It isn’t absolutely necessary, but it makes things look nicer (feel free to edit it to your hearts content). After that is the stylesheets required for the thickbox and image cropper. Then some JavaScript for the thickbox, and the scripts for the thickbox and image cropper. And that’s all there is to it. You can put this in you child theme’s function.php file, or wrap it in custom plugin.
Note that this will work not just with bbPress, but anywhere that user’s can edit their profiles on the front end, like maybe with the Theme My Login plugin’s themed profiles. BBPress is totally optional.
Hey there, would you be able to explain to me how child functions work, and possibly even how I could do this step by step? I am pretty new at CSS stuff:) Thanks!
Ok I read the child functions page you linked, but that modified the theme, how do I get it to modify the plugin, especially because it is affecting TWO plugins haha.
Hey Daniel, I’ve uploaded a simple plugin here that you can install on your site and it should do the trick. Let me know if you have problems with it.
Hi, thank you for your plug in. I am having some problems getting it to operate on my site.
In the edit profile screen, I see no option to set a custom avatar. Are you able to assist me at all?
Vic
Hi Vic,
I just saw this comment. Somehow my site didn’t notify me!
When you say “the profile edit screen”, what do you mean? If you mean in the admin, that is provided by the User Avatar plugin. This plugin should work for the bbPress profile edit page. I’m thinking maybe this plugin could use an update—maybe I’ll even release it on wordpress.org so more people can use it. If you leave a reply, I’ll see if I can do anything to help.
Hi J.D.,
I got the User Avatar plugin to install and it works to get users to upload avatars from their bbpress edit profile page on the backend, but their avatar isn’t displayed anywhere on the front end to users. Can you explain how to get the User Avatar to display on front end to users in relevant areas where the user is contributing to the bb press forum? I’d like the user’s avatar to display on the left column in the topics where they are writing posts and also to appear on the front end of their profile page. How can I dynamically add the user’s avatar (or a generic avatar if the user hasn’t upload their avatar yet) to these places on the front end of bb press?
Thanks for any info you can provide.
Do you mean that no avatar is being displayed at all? If so, you may need to change your theme.
If you just mean that the custom avatars aren’t being displayed, that sounds like an issue with the User Avatar plugin. The best place to seek help with that is the plugin’s support forum.