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.