Adding Custom Fields for Uploading Images to WordPress Users
By Ryan Parlee
WordPress offers a lot of opportunities to customize and add custom fields to various post types. But, we had trouble when we realized that WordPress users have a pretty limited amount of customization. For example, the Post and Page post types have similar features; you can attach pictures to the particular page and display it in your content through the editor or even custom fields. The post type Author does not have similar capabilities which seems strange and made it difficult for us to create customized author pages and bios.
In our example, a client has 2 different images for the author of the article: one in the sidebar and another one for the actual Author archive page. Both images are different sizes and also different graphic style.
We found a solution that adds an additional series of custom fields for uploading images and “attaching” them to the Author, mimicking the functionality of normal posts and pages.
To get started, we have to add all of the fields and resulting database entries to store our photo data.
Want to avoid common website pitfalls? Download our guide now!
Updating functions.php
This function will update the Profile fields under each User. Go ahead and drop this whole chunk of code in to the top or bottom of your functions.php file.
<?php
/* Adding Image Upload Fields */
add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );
function my_show_extra_profile_fields( $user )
{
?>
<h3>Profile Images</h3>
<style type="text/css">
.fh-profile-upload-options th,
.fh-profile-upload-options td,
.fh-profile-upload-options input {
vertical-align: top;
}
.user-preview-image {
display: block;
height: auto;
width: 300px;
}
</style>
<table class="form-table fh-profile-upload-options">
<tr>
<th>
<label for="image">Main Profile Image</label>
</th>
<td>
<img class="user-preview-image" src="<?php echo esc_attr( get_the_author_meta( 'image', $user->ID ) ); ?>">
<input type="text" name="image" id="image" value="<?php echo esc_attr( get_the_author_meta( 'image', $user->ID ) ); ?>" class="regular-text" />
<input type='button' class="button-primary" value="Upload Image" id="uploadimage"/><br />
<span class="description">Please upload an image for your profile.</span>
</td>
</tr>
<tr>
<th>
<label for="image">Sidebar Profile Image</label>
</th>
<td>
<img class="user-preview-image" src="<?php echo esc_attr( get_the_author_meta( 'sidebarimage', $user->ID ) ); ?>">
<input type="text" name="sidebarimage" id="sidebarimage" value="<?php echo esc_attr( get_the_author_meta( 'sidebarimage', $user->ID ) ); ?>" class="regular-text" />
<input type='button' class="button-primary" value="Upload Image" id="sidebarUploadimage"/><br />
<span class="description">Please upload an image for the sidebar.</span>
</td>
</tr>
</table>
<script type="text/javascript">
(function( $ ) {
$( '#uploadimage' ).on( 'click', function() {
tb_show('test', 'media-upload.php?type=image&TB_iframe=1');
window.send_to_editor = function( html )
{
imgurl = $( 'img',html ).attr( 'src' );
$( '#image' ).val(imgurl);
tb_remove();
}
return false;
});
$( 'input#sidebarUploadimage' ).on('click', function() {
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function( html )
{
imgurl = $( 'img', html ).attr( 'src' );
$( '#sidebarimage' ).val(imgurl);
tb_remove();
}
return false;
});
})(jQuery);
</script>
<?php
}
This block of code will output our two new fields, plus some attached JavaScript to make the uploader work. You’ll notice that it also includes some styling, which overrides a few default styles that can create UI issues. You can easily move this script out into its own file or it can be included here as shown.
We also need to enqueue some included WordPress scripts, to make sure the uploader shows up. Add this code to functions.php as well:
add_action( 'admin_enqueue_scripts', 'enqueue_admin' );
function enqueue_admin()
{
wp_enqueue_script( 'thickbox' );
wp_enqueue_style('thickbox');
wp_enqueue_script('media-upload');
}
This will give us access to some of the functions we call in our script (tb_show and tb_remove for example).
Saving Values
Now that we can pull in new values, we need to make sure we’re saving them. To save our values, add this code to functions.php:
add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );
function my_save_extra_profile_fields( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) )
{
return false;
}
update_user_meta( $user_id, 'image', $_POST[ 'image' ] );
update_user_meta( $user_id, 'sidebarimage', $_POST[ 'sidebarimage' ] );
}
We are specifically updating our image and “sidebarimage” values. You could add additional fields, and use this same format, replacing image and $_POST[ ‘image’ ] with the name of your input (so if you created a new field, with a name of “favorite-food”, you would use ‘favorite-food’ and $_POST[ ‘favorite-food’ ]).
Here’s what everything should look like on the back end:
Retrieving Images from the Author’s Custom Fields
After the previous steps, the functionality should all be set up and working. If you go into any User profile from the WordPress dash, you should see a new field that allows you up attach a profile image. But, now, you also need to be able to pull that image into your templates. This is the easy part.
$authorImage = get_the_author_meta('image', $authorID);
// The "image" parameter here matches the id of the field we added to the user page in our functions.php
<img src='<?php echo $authorImage; ?>' />
That’s it! We used this in two separate places:
—
Update April 8, 2014: We found some issues with this code not working correctly in certain environments and have updated the post. It should now include all of the code needed.
—
