I am trying to add an image uploader to the user profile pages. I do have it up and running on a basic registration page, but somehow the same, but slightly adjusted code does not work when added to functions.php. The field is loaded and WordPress does allow easy updating, but in profile view no image is shown. To get the image and store it I use

Profile Image Upload Field Code
require_once( STYLESHEETPATH . '/img_upload_resize_crop.php' );

add_action( 'init', 'custom_img_uploader' );

function custom_img_uploader () {

    if (isset($_FILES['profilePicture']['name'])!= "" ) {

if ( $_FILES['profilePicture']['name']!="" ) {
    $your_image = new _image;
    $upload_dir = wp_upload_dir();
    //To Upload
    $your_image->uploadTo = $upload_dir['basedir'].'/';
    $upload = $your_image->upload($_FILES['profilePicture']);

    //To Resize
    $your_image->newPath = $upload_dir['basedir'].'/thumbs/';
    $your_image->newWidth = 150;
    $your_image->newHeight = 200;
    $resized = $your_image->resize();
    $profilePicture=str_replace($upload_dir['basedir'].'/thumbs/', "", $resized );

To display the field in HTML I have:

<!-- begin image uploader field -->
<th><label for="profilePicture"><?php _e("Profile Image"); ?></label></th>
<input type="file" name="profilePicture" id="profilePicture" style="float:left;" />

And to save it I use this:

update_user_meta( $user_id, 'userphoto_thumb_height', 59);
update_user_meta( $user_id, 'userphoto_thumb_width', 80 );
update_user_meta( $user_id, 'userphoto_thumb_file', $profilePicture );

Does anyone see why in Profile View this code:

<?php if(get_the_author_meta( 'userphoto_thumb_file', $getId )!=""){?>
                        <img src="<?=$uploads['baseurl'];?>/thumbs/<?=get_the_author_meta( 'userphoto_thumb_file', $getId );?>" />

does not load a stored image?

Update I and II

Basic debugging

Update III After adding an isset() I got a little further:

[28-Mar-2012 07:14:46] PHP Notice:  Undefined variable: profilePicture in /home/user/public_html/wp-content/themes/theme-name/functions.php on line 346

On that line I have update_user_meta( $user_id, 'userphoto_thumb_file', $profilePicture ); Seems like even though I have the variable profilePicture defined, it is not grabbed Was just a notice and does not seem to be relevant nor causing the upload issue.

Update IV

I wrapped the image uploader code in a function and added it as an action. See code with updates above. I still have an undefined variable profilePicture nor is the image uploaded. Entire functions.php file is here http://pastebin.com/YGYz3Qnv

Update V

I just realized I do not not have a good $_POST option for the profilePicture. Looking at the plugin mentioned by a @brasofilo at http://plugins.svn.wordpress.org/user-avatar/trunk/user-avatar.php I see this code I might be able to use, but I need to adjust it a lot:

<form enctype="multipart/form-data" id="uploadForm" method="POST" action="<?php echo admin_url('admin-ajax.php'); ?>?action=user_avatar_add_photo&step=2&uid=<?php echo $uid; ?>" >
            <label for="upload"><?php _e('Choose an image from your computer:','user-avatar'); ?></label><br /><input type="file" id="upload" name="uploadedfile" />
            <input type="hidden" name="action" value="save" />
            <?php wp_nonce_field('user-avatar') ?>
        <p class="submit"><input type="submit" value="<?php esc_attr_e('Upload'); ?>" /></p>

I just wonder if a form is needed as it wasn't for the other text fields and how I need to add $user_id and how to adjust update_user_meta

Update VI

Made $profilePicture global as recommended by contributor

Update VII

Considering using option from Unrelated Media here. But as it will still take quite a bit for time for me to integrate this into my current functions.php I will keep this thread opened until I have managed to do this.

  • 1
    Check this out, use the built-in Plupload plugin kovshenin.com/2012/…
    – soulseekah
    Mar 28, 2012 at 12:31
  • The profile images need to be added to a specific folder and the path has to be added to a specific user_meta field so the profile page can load the image connected to a user ID with <?php if(get_the_author_meta( 'userphoto_thumb_file', $getId )!=""){?> <img src="<?=$uploads['baseurl'];?>/thumbs/<?=get_the_author_meta( 'userphoto_thumb_file', $getId );?>" /> I do not see how Koshenin's code can achieve that. But will check it out. Saw you helped with it too Soulseekah!
    – rhand
    Mar 28, 2012 at 14:30
  • @Soulseekah That plugin's drag-and-drop feature is really cool I must say! But for my situation I only need a profile image uploader to work. I do hope your brother's plugin gets to be accepted to core as it is awesome!
    – rhand
    Mar 28, 2012 at 14:50
  • Perhaps an implementation such as at plupload's sample could be a cool thing. Just need to en-queue scripts properly and pick a <div> as uploader it seems. Only need data to be stored for a user so a particular image is loaded per profile.
    – rhand
    Mar 28, 2012 at 15:07

3 Answers 3


Check this plugin: User Avatar. You can use it or check its functions to adapt yours.

  • Checked it our and was wondering about using some of its code - see update in question.
    – rhand
    Mar 29, 2012 at 12:23

$profilePicture is defined outside the scope of the saving code and is never declared or used in the global scope.

As a result as soon as the upload function returns either the variable is garbage collected, or you're dealing with a completely different variable that shares the same name.

I would declare it as a global, and add more validation, such as checking if the variable is empty before trying to use it

  • I have updated code -see pastebin.com/YGYz3Qnv - and made $profilePicture global. Thanks for the heads up! How can I add more validation to check if the variable is empty? isset() is already added.. And I still think I have a $_POST issue too..
    – rhand
    Mar 29, 2012 at 12:22
  • I prefer to use if(empty()){ as it also checks for empty arrays, you may also need to make the form use multipart encoding, though I don't remember a site/answer explaining that, so Ill post shortly, but refer to the User Photo plugin
    – Tom J Nowell
    Mar 29, 2012 at 12:59
  • Looking at the pastebin, you haven't made the variable a global at all, looking at the relevant function it looks identical, there is no global $profilePicture; in the custom_img_uploader function
    – Tom J Nowell
    Mar 29, 2012 at 14:15
  • Seeing your entire code, I'm not sure why the upload process itself is in a separate function on an init hook, would it not be better immediatley above the update_usermeta calls?
    – Tom J Nowell
    Mar 29, 2012 at 14:16
  • I think it would be better to use something like the UserPhoto plugin instead, it works and it has more features and options
    – Tom J Nowell
    Mar 29, 2012 at 14:16

Well thanks everyone for their suggestions. In the end I went for Woothemes Media Uploader integrations as you can see here at Github: https://github.com/devinsays/options-framework-plugin/blob/master/options-medialibrary-uploader.php It is integrated into a theme framework which I am integrating in my own theme so like this I can kill two birds with one stone.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.