How to Add an Image Field to Buddypress Extended Profile Fields

BuddyPress is a plugin that brings social networking capabilities to WordPress. It comes with features such as Friend connections, Activity streams (status posting), Private messaging, Groups and Forums. There is lot’s more you can do with it via BuddyPress Plugins. These are simply WordPress plugins that are compatible with BuddyPress. You can work with BuddyPress as just one component of your WordPress website’s functionality, or you can have it as your central component and completely hide the rest of WordPress. Just like WordPress, BuddyPress is completely open source and almost as flexible.

How BuddyPress Works

1.   Hooks

Being part of the WordPress ecosystem, BuddyPress employs hooks liberally in its implementation. These help theme and plugin developers greatly when it comes to interfacing with BuddyPress in a future-proof manner. When used correctly, the hooks allow developers to write code that doesn’t break on newer versions of BuddyPress.

Among the most important hooks in BuddyPress are:

–  bp_screens:  It processes functions that respond to user input with visual feedback. Basically this is the hook to use when you want to output a page in response to user input. A good example is displaying a list of friends in response to the clicking of the friends menu.

–  bp_actions:  This hook is similar to bp_screens, but does not give visual feedback. A good example of such is when accepting a friend request. This hook is called before bp_screens and we shall use this rule in implementing the image field.

2.   Components

Functionality in BuddyPress is delivered via components. Roughly, a component maps to a feature. For example the Groups feature is handled by the Group component. Components contain the various bp_screens and bp_actions hooks required to respond to user input. A fresh installation of BuddyPress has the following components:

–  Extended Profiles:  maintains user profile details such as name

–  Friend Connections:  allows users to make and accept friend requests

–  Private Messaging:  handles messaging between specific users. Only the users addressed in the messages can view them.

–  Activity Streams:  handles the posting of public statuses and generally tracking the actions of users.

–  Groups:  handles the creation and maintenance of user groups. Users can create groups, invite other users etc.

–  Forums:  this component allows topical discussions to be carried out among users either site-wide or within groups.

3.   Permalinks (pretty urls)

All screens in BuddyPress are accessed through hierarchical urls that are clear to the website visitor. For example, Andrew’s profile can be viewed at example.com/members/andrew/profile/. This kind of url is not new to regular WordPress users. However, the way BuddyPress implements the permalinks is quite different from WordPress. When developing a plugin for WordPress, the plugin developer needs to implement rewrite rules that get incorporated into WordPress’ existing rewrite rules. By implementing the rewrite rules, the plugin developer is given access to parameters that are passed in the url.

In BuddyPress, there’s no need to create rewrite rules since it parses the urls and then stores the various components in the globally accessible $bp object. In the Andrew example, the url is broken into:

–  Component: members

–  Action: Andrew

–  Action variable: profile

This approach allows much greater flexibility in creating custom permalinks for your theme or plugin.

4.   Themes

BuddyPress can be themed just like WordPress. The only catch is that the theme should be BuddyPress compatible. It comes with the BuddyPress Default theme by default which is very closely tied in with the structure of BuddyPress. For this reason, it is advisable to derive your theme from bp-default rather than build a new one from scratch. Due to the close ties between BuddyPress and the bp-default theme, most plugins are constructed with the assumption that they shall be used on the bp-default theme or a derivative (child theme). Applying a theme to BuddyPress is done the same way a theme is applied to WordPress.

Extended Profile Fields

The Extended Profile Fields (XProfile) component handles user profile details. It allows the creation of any number of fields to hold the profile details. This allows BuddyPress to be useable in a wide range of communities. By default the XProfile field types supported are:

–     Single line text

–     Multiline text

–     Date

–     Radio (option) buttons

–     Check boxes

–     Drop-down select list

–     Multi-select list

These field types obviously cover much of what would be required to store user information. However, there’s one critical omission. The image field type. BuddyPress already has the capability to store a user profile image known as the avatar. Therefore if that’s the only image you require for your users then you’re covered. For non-trivial user profiles, there inevitably arises the need to have a field that holds image information in addition to the user avatar. The image could be a company logo for example.

Adding an Image field type

When adding functionality to a platform such as BuddyPress, it’s extremely important not to modify any of its core files. Such an approach allows you to apply newer versions of the platform without having extra steps to update the files you altered. This is one of the main reasons hooks are created on the platform. XProfile  does not come with hooks specifically intended to allow you to add unsupported field types, but it does have enough hooks that can facilitate defining and managing a new field type.

Enough with the talk, now let’s get to the code. All the following code (unless stated otherwise) goes into your theme’s functions.php. The functions are prefixed with 'bpd' to minimize the chances of name collision with other theme/plugin functions.

1. Announce to XProfile  that you have a new field type – image:

function bpd_add_new_xprofile_field_type($field_types){
    $image_field_type = array('image');
    $field_types = array_merge($field_types, $image_field_type);
    return $field_types;
}

add_filter( 'xprofile_field_types', 'bpd_add_new_xprofile_field_type' );

2. Tell XProfile  how to display an image field type on the admin screen:

Image Field Admin (Scanned Driver’s License)

function bpd_admin_render_new_xprofile_field_type($field, $echo = true){

    ob_start();
        switch ( $field->type ) {
            case 'image':
                ?>
                    <input type="file" name="<?php bp_the_profile_field_input_name() ?>" id="<?php bp_the_profile_field_input_name() ?>" value="" />
                <?php
                break;
            default :
                ?>
                    <p>Field type unrecognized</p>
                <?php
        }

        $output = ob_get_contents();
    ob_end_clean();

    if($echo){
        echo $output;
        return;
    }
    else{
        return $output;
    }

}

add_filter( 'xprofile_admin_field', 'bpd_admin_render_new_xprofile_field_type' );

3. Tell XProfile  how to display the image field on the user profile edit screen:

Image Field Edit (Scanned Driver’s License)

function bpd_edit_render_new_xprofile_field($echo = true){

    if(empty ($echo)){
        $echo = true;
    }

    ob_start();
        if ( bp_get_the_profile_field_type() == 'image' ){
            $imageFieldInputName = bp_get_the_profile_field_input_name();
            $image = WP_CONTENT_URL . bp_get_the_profile_field_edit_value();

        ?>
                <label for="<?php bp_the_profile_field_input_name(); ?>"><?php bp_the_profile_field_name(); ?> <?php if ( bp_get_the_profile_field_is_required() ) : ?><?php _e( '(required)', 'buddypress' ); ?><?php endif; ?></label>
                <input type="file" name="<?php echo $imageFieldInputName; ?>" id="<?php echo $imageFieldInputName; ?>" value="" <?php if ( bp_get_the_profile_field_is_required() ) : ?>aria-required="true"<?php endif; ?>/>
                <img src="<?php echo $image; ?>" alt="<?php bp_the_profile_field_name(); ?>" />

        <?php

        } 

        $output = ob_get_contents();
    ob_end_clean();

    if($echo){
        echo $output;
        return;
    }
    else{
        return $output;
    }

}

add_action( 'bp_custom_profile_edit_fields', 'bpd_edit_render_new_xprofile_field' );

4. This is an extremely critical hook function. Since XProfile  doesn’t have a provision for the adding of a new field type, it doesn’t give you a chance to render your field type. Normally this would mean having to edit core XProfile  code. Luckily, however, there’s a way out. By using the fact that bp_actions hooks are called before bp_screens, we can replace XProfile ‘s bp_screens hook with a custom one that shall render the custom field and then call XProfile ‘s bp_screens to proceed with the rest of the fields.

// Override default action hook in order to support images
function bpd_override_xprofile_screen_edit_profile(){
    $screen_edit_profile_priority = has_filter('bp_screens', 'xprofile_screen_edit_profile');

    if($screen_edit_profile_priority !== false){
        //Remove the default profile_edit handler
        remove_action( 'bp_screens', 'xprofile_screen_edit_profile', $screen_edit_profile_priority );

        //Install replalcement hook
        add_action( 'bp_screens', 'bpd_screen_edit_profile', $screen_edit_profile_priority );
    }
}

add_action( 'bp_actions', 'bpd_override_xprofile_screen_edit_profile', 10 );

5. Help XProfile  in saving the image field type data:

//Create profile_edit handler
function bpd_screen_edit_profile(){

    if ( isset( $_POST['field_ids'] ) ) {
        if(wp_verify_nonce( $_POST['_wpnonce'], 'bp_xprofile_edit' )){

            $posted_field_ids = explode( ',', $_POST['field_ids'] );

            $post_action_found = false;
            $post_action = '';
            if (isset($_POST['action'])){
                $post_action_found = true;
                $post_action = $_POST['action'];

            }

            foreach ( (array)$posted_field_ids as $field_id ) {
                $field_name = 'field_' . $field_id;

                if ( isset( $_FILES[$field_name] ) ) {
                    require_once( ABSPATH . '/wp-admin/includes/file.php' );
                    $uploaded_file = $_FILES[$field_name]['tmp_name'];

                    // Filter the upload location
                    add_filter( 'upload_dir', 'bpd_profile_upload_dir', 10, 1 );

                    //ensure WP accepts the upload job
                    $_POST['action'] = 'wp_handle_upload';

                    $uploaded_file = wp_handle_upload( $_FILES[$field_name] );

                    $uploaded_file = str_replace(WP_CONTENT_URL, '', $uploaded_file['url']) ;

                    $_POST[$field_name] = $uploaded_file;

                }
            }

            if($post_action_found){
                $_POST['action'] = $post_action;
            }
            else{
                unset($_POST['action']);
            }

        }
    }

    if(!defined('DOING_AJAX')){
        if(function_exists('xprofile_screen_edit_profile')){
            xprofile_screen_edit_profile();
        }
    }

}

6. Since you are most likely going to save the XProfile  images in a custom location, this is the function that tells WordPress what that location is:

function bpd_profile_upload_dir( $upload_dir ) {
    global $bp;

    $user_id = $bp->displayed_user->id;
    $profile_subdir = '/profiles/' . $user_id;

    $upload_dir['path'] = $upload_dir['basedir'] . $profile_subdir;
    $upload_dir['url'] = $upload_dir['baseurl'] . $profile_subdir;
    $upload_dir['subdir'] = $profile_subdir;

    return $upload_dir;
}

7. The field type selection list still won’t display the image option since the recognized options have been hard coded into the XProfile  source code. This leaves browser-side intervention as the only way to add the image option. The following jQuery code should be added to a .js file which should be loaded by your theme’s functions.php. We’ll call the .js file xprofile-image.js.

Image Field Type

(

	function(jQ){
		//outerHTML method (http://stackoverflow.com/a/5259788/212076)
		jQ.fn.outerHTML = function() {
			$t = jQ(this);
			if( "outerHTML" in $t[0] ){
				return $t[0].outerHTML;
			}
			else
			{
				var content = $t.wrap('<div></div>').parent().html();
				$t.unwrap();
				return content;
			}
		}

		bpd =
		{

		init : function(){

				//add image field type on Add/Edit Xprofile field admin screen
			   if(jQ("div#poststuff select#fieldtype").html() !== null){

					if(jQ('div#poststuff select#fieldtype option[value="image"]').html() === null){
						var imageOption = '<option value="image">Image</option>';
						jQ("div#poststuff select#fieldtype").append(imageOption);

						var selectedOption = jQ("div#poststuff select#fieldtype").find("option:selected");
						if((selectedOption.length == 0) || (selectedOption.outerHTML().search(/selected/i) < 0)){
							var action = jQ("div#poststuff").parent().attr("action");

							if (action.search(/mode=edit_field/i) >= 0){
								jQ('div#poststuff select#fieldtype option[value="image"]').attr("selected", "selected");
							}
						}
					}

				}

			}
		};

		jQ(document).ready(function(){
				bpd.init();
		});

	}

)(jQuery);

8. The following code (located in functions.php) loads xprofile-image.js:

function bpd_load_js() {
     wp_enqueue_script( 'bpd-js', get_bloginfo('stylesheet_directory') . '/js/xprofile-image.js',
							array( 'jquery' ), '1.0' );
}

add_action( 'wp_print_scripts', 'bpd_load_js' );

That’s it! You now have an image type XProfile  field.

 

UPDATE: 2014-04-03

There’s now a BuddyPress plugin available that eliminates the need for you to add the raw code into your BuddyPress-driven site.