I recently had to remove and add fields to the user profile of WordPress for one of my clients. The instructions were simple and I had to remove quite a bit of fields which they specified and also had to add a way for the users to upload an image.
So today I will show you two types of ways to remove fields, plus how to add your upload functionality already build into WordPress. I will also show you how to retrieve and display your user information.
Here is the code to remove first couple of fields
//hides the personal options
function hide_personal_options(){
echo "\n" . '<script type="text/javascript">jQuery(document).ready(function($) {
$(\'form#your-profile > h3:first\').hide();
$(\'form#your-profile > table:first\').hide();
$(\'form#your-profile\').show();
$(\'label[for=url], input#url\').hide();
});
</script>' . "\n";
}
add_action('admin_head','hide_personal_options');
Next we have to unset some fields
//remove default fields
function hide_profile_fields( $contactmethods ) {
unset($contactmethods['aim']);
unset($contactmethods['jabber']);
unset($contactmethods['yim']);
return $contactmethods;
}
add_filter('user_contactmethods','hide_profile_fields',10,1);
Okay, now that we have removed our fields we need to add an upload field and two extra 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>Extra profile information</h3>
<table class="form-table">
<tr>
<th><label for="image">Profile Image</label></th>
<td>
<img src="<?php echo esc_attr( get_the_author_meta( 'image', $user->ID ) ); ?>" style="height:50px;">
<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 your image for your profile.</span>
</td>
</tr>
<tr>
<th><label for="image">Your Age</label></th>
<td>
<input type="text" name="age" id="age" value="<?php echo esc_attr( get_the_author_meta( 'age', $user->ID ) ); ?>" class="regular-text" />
<span class="description">Please type your age.</span>
</td>
</tr>
<tr>
<th><label for="image">Interests</label></th>
<td>
<input type="text" name="interest" id="interest" value="<?php echo esc_attr( get_the_author_meta( 'interest', $user->ID ) ); ?>" class="regular-text" />
<span class="description">Type your Interests here.</span>
</td>
</tr>
</table>
<?php }
Our upload functionality won’t work yet, so here is the code to make it work.
function zkr_profile_upload_js() {
?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).find("input[id^='uploadimage']").live('click', function(){
//var num = this.id.split('-')[1];
formfield = jQuery('#image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#image').val(imgurl);
tb_remove();
}
return false;
});
});
</script>
<?php
}
add_action('admin_head','zkr_profile_upload_js');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox'); //thickbox styles css
Now we need to have a way to save our field data.
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_usermeta( $user_id, 'image', $_POST['image'] );
update_usermeta( $user_id, 'age', $_POST['age'] );
update_usermeta( $user_id, 'interest', $_POST['interest'] );
}
That’s it your new fields are added and you should be able to save them now. Next we need to be able to display our fields. You can put the following code anywhere you would like to display your data.
<img src="<?php echo the_author_meta('image'); ?>" style="height:50px; width:50px;" />
Age: <?php echo the_author_meta('age'); ?>
Interests: <?php echo the_author_meta('interest'); ?>
I’ve written the main user profile code in to a plugin for you so you can download it and see how it works for yourself.
Hope you enjoyed this tutorial and I just want to wish you all happy holidays and a merry Christmas from TeachingYou.net
