Add And Remove WordPress User Profile Fields And Display Them Within Your Theme

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();

$(\'label[for=url], input#url\').hide();

</script>' . "\n";

Next we have to unset some fields

	//remove default fields
    function hide_profile_fields( $contactmethods ) {
    return $contactmethods;

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">

<th><label for="image">Profile Image</label></th>

<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>

<th><label for="image">Your Age</label></th>

<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>

<th><label for="image">Interests</label></th>

<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>

<?php }

Our upload functionality won’t work yet, so here is the code to make it work. The code here has been updated slightly, the media up loader scripts had to be put in an function and WordPress init hook.

function zkr_profile_upload_js() {
?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).find("input[id^='uploadimage']").live('click', function(){
//var num ='-')[1];
formfield = jQuery('#image').attr('name');
tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');

window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');

return false;

// the following is the js and css for the upload functionality
function zkr_enque_scripts_init(){
add_action('init', 'zkr_enque_scripts_init');

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

You have to agree to download the code.

Simply enter your email address and the download link will be sent right to your inbox.

Related Posts:

  • rss
  • email
  • rss
  • email
I'm a full time PHP developer and I just love all things web related. If you need help I'm your guy.

92 Responses to Add And Remove WordPress User Profile Fields And Display Them Within Your Theme

  1. Sandeep816 says:

    Thanks to this article.. :)

  2. Morné says:

    No Problem, hope it was helpful. :)

  3. Ayaz Mahmood says:

    Very helpful and good explanation.

  4. Vahid says:


    Thank you so much. It was so helpful.

    There is just one thing. I can not display the fields on the author.php page. Could you please help?

  5. Morné says:

    Hi Vahid,

    You should be able to add the following code somewhere in author.php.

    <img src="ID ) ); ?>” alt=”” />

    Hope that helps you out. Let me know if it worked for you?

    Thanks for the comment.

  6. Vahid says:

    Hi Morné,

    Thank you. I Made it work finally. Your codes helped me a lot and saved me a lot of time. Thank you.

  7. Morné says:

    Hi Vahid,

    Glad I could help you out. Please like the article and share it with someone you think might like it :)

    Also keep an eye out for new articles via the RSS feed.

    Once again thanks for the comments.

  8. Andreafanfa says:

    Does the image upload works for you? Mine doesn’t. It just shows no action if you click on it…

  9. Morné says:

    Hi Andrea,

    Yes it does work for me. Did you try to code it yourself or did you download the plugin code?

  10. Andrea Amado says:

    congratulations, works like charm.
    thanks 😉

  11. Hello. I have to upload more then 1 image… how can I do for it?

  12. Morné says:

    Hi Alessandro,

    You can already upload multiple images with this code. You just need a way to display more then one. But I would suggest trying to add additional upload fields and meta. I can’t think of a solution now from the top of my head.

    Maybe look at implementing an alternative jQuery up loader and then store image data in the database and call them from there for each user.

    Hope that gives you an idea.

    Thanks for the comment 😉

  13. Hi Morné! :)
    Thanks very very much for this helpful tutorial!
    It’s very clear and it works like a charm! :)
    I’d like some new fields to be mandatory.. a kind of “non-empty” option… Can you help me, please??
    Thank you in advance,
    Rocco :)

  14. Morné says:

    Hi Rocco
    You would need to explain a bit more so that I can help you out. Give me a better idea of what you would like to achieve?

  15. I’d like that some fields “must” be filled:
    if these “mandatory” fields are filled, the profile updating will be succesful;
    on the other hand, if these “mandatory” fields are empty, the updating process will give an error message, i.e. on top of the profile page (mentioning the reason of the error), and the modified fields won’t be saved as far as the “mandatory” fields are not filled.
    Thank you for your patience.. :)

  16. Morné says:

    Hi Rocco,

    Within the php code you can do some php validation to check for empty $_POST data.

    So you do something like this:


    update_usermeta( $user_id, ‘image’, $_POST[‘image’] );

    echo “Image field is required!”;

    That should work for basic server side validation. If need to go the
    client side validation route,
    I suggest you look into jQuery validation

    You will still need to do the server side validation as a backup.

  17. Oh, it was very easy to implement the “non empty checking” for the custum fields I created. Just chech out how it works for the already existent fields in wp-adminincludesuser.php and add the code with the proper tweaks in the same file!
    Of course, Mornè, your solution works as well!
    Tnk you very much! :)

  18. Morné says:

    Glad you found a solution :) did not even think if checking that file. 😉

  19. Thanks! This is great. I’m trying to adapt the image upload field into a field where users can upload their cv/resume. Everything seems to be working okay, except that after I select the file the upload field does not update and will not save.

    I changed:

    <img src="ID ) ); ?>” style=”height:50px;”>
    <input type="text" name="image" id="image" value="ID ) ); ?>” class=”regular-text” />
    Please upload your image for your profile.


    < a id="cv_link" href="ID ) ); ?>”>Download
    <input type="text" name="cv" id="cv" value="ID ) ); ?>” class=”regular-text” />
    Please upload your Curriculum vitae / Resume for your profile.

    and then:

    jQuery(document).find(“input[id^=’uploadimage’]”).live(‘click’, function(){
    //var num =‘-‘)[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(document).find(“input[id^=’uploadcv’]”).live(‘click’, function()
    //var num =‘-‘)[1];
    formfield = jQuery(‘#cv’).attr(‘name’);
    tb_show(”, ‘../media-upload.php?TB_iframe=true’);

    window.send_to_editor = function(html)
    cvurl = jQuery(‘#cv_link’,html).attr(‘href’);
    return false;

    Any idea what I’m doing wrong? Thanks!

  20. Lopo says:

    can’t download the code :)

  21. Morné says:

    It will only work if you give a valid email, if all else fails check your spam box. The link gets mailed to you. Just tested and works on my side.

  22. I noticed it saves the field if you type in a file location directly, but it is still not updating the field after choosing a file.

  23. Got it! I had to change:

    imgurl = jQuery(‘img’,html).attr(‘src’);
    imgurl = jQuery(‘img’,html).attr(‘src’);


  24. Morné says:

    Hi there, Glad you figured it out. Sorry that I did not reply to you. Busy life :) Planning on writing some new articles this month so look out for them. Cheers

  25. ali says:

    Hi, what else did u change to make it upload a cv/resume, please help me


  26. Alena says:

    Hi It is exactly what I need. I received zip file from you but how I could activate/set up it? I copied this file to wp-content/plugins folder by total commander but nothing changed. Thank you for your help.

  27. Morné says:

    Hi Alena, You need to upload the zip file via the wordpress backend under plugins > add new.

    Or you can unzip the folder and then use filezilla or any other FTP program to upload it to your plugins folder.

    Hope that helps.

  28. Hello Morné, I’ve downloaded your plugin. I’m using PremiumPress’ DirectoryPress theme. I’m getting the following error message: Warning: Cannot modify header information – headers already sent by (output started at /home/brig8108/public_html/ in /home/username/public_html/ on line 881

    Any idea what could be the problem? Thanks in advance, Brigitte

  29. Morné says:

    Hi Brigitte,

    The issue here is not the plugin. The error is pointing to your directorypress themes functions.php file on line 19.

    As I can’t see the code I suggest you look at the file and at the end of the file make sure that there is no spaces after the last closing php ?> tag.

    Also make sure that there is no whitespaces in your wp-config.php file before the first opening closing tag.

    Hope this helps. If you struggle, then please contact me through my contact page then I can help you from there and fix that file for you.

    Have nice day!

  30. club22 says:

    thank you verry much but it’s not working,it adds the extra profile fields with age interests and image upload but doesn’t show it….when someone writes a comment if i click the picture of the comment author,it sends me to a profile page where appears only the authors avatar….

    what I need to do: I need a user profile page with basic information like: name,rank(admin,subscriber etc.),age,adress(not necesarry),post count,comment count,password change,picture upload…..I want to remove the wordpress user profile page because it seems not to work(I fill every field in the edit profile but it doesn’t take effect….only the upload avatar works.) pls help me with this,I know nothing about coding,I am willing to pay u.sorry for my bad english.

  31. Morné says:

    Hi There,

    I can help you out. Do you have a domain where you need this setup?

  32. club22 says:

    yes I have a temporary domain can u pls add me on yahoo messenger to talk faster? my id is alexandrumdc

  33. Imran Husain says:

    My functions.php file has no ?> at the end. When I tried to append the code at the end, the theme(Twenty Eleven 1.3) didn’t load and I received an error at the first line of the code. Request for more information please. Thanks.

  34. Morné says:

    Hi Imran,

    I suggest you download the code, as it’s already in a plugin which you can just activate and use.


  35. Morné says:

    Do you have skype? we can chat through skype it’s better, or even gtalk.

  36. club22 says:

    my skipe id is alexandru1st sorry for the late reply I had problems with my internet connection

  37. club22 says:

    my skype id is alexandru1st sorry for the late reply I had internet connection problems.

  38. Nancy Boyle says:

    Very helpful! Thank you. I have used the function to remove personalizations options. Now I’d love to get rid of the ‘About yourself’ and Biographical field!

    Excellent post.

  39. Morné says:

    Hi Nancy,

    The way you would get rid of this is with some jquery using the the hide function. So best is to see what the id of that field is.

    Then what you need to do is within the javascript part where the php function name is function hide_personal_options() you will see the last part of the .hide(); Just add another piece $(‘#youridname’).hide(); and that should hide that field with the ID name you specify.

    Hope that helps.

  40. HotPot Photos says:

    Hi Sir, I created a demo user and when I logged in using the demo user and wanted to upload the image it did not give permission to upload image. demo user is a subscriber. do you have any idea.? to solve this

  41. Morné says:

    Hi HotPot,

    This is most probably due to your user not having permissions to edit the profile. Make sure the wordpress user has editing rights.

    You could always remove this code

    if ( !current_user_can( ‘edit_user’, $user_id ) )
    return false;

    You can then just write an if statment to check that if it’s the current user and if the user is actually logged in.

    That should do it for you.


  42. Muynin Try says:

    Hello sir , How should i do to hide website box in user profile ?
    I don’t want to show it to user .
    Thank you.

  43. Shadez27 says:

    Hi Morné,
    Thanks for the code, works like a charm. :)

    Got any idea on how to check via php if author pic is present, and if not found, display a default image?

    Am planning to remove the whole avatar system and insert this user profiles system on my site.

    Thanks again.

    PS: found the pagination on your tutorials category buggy. wasnt able to goto page 2.

  44. Morné says:

    Hi There,

    You can do a test in a if statement, so what you need to do is to check for empty field or in this situation check if the posted variable is empty.

    So the code will be something like this.

    The code above should help you to get in the right direction.

  45. Morné says:

    Hi There,

    You can just use jQuery and target the id with jQuery(“#theid”).hide();

    This will get you in the right direction.

  46. Hi Morné ,
    Is there a way to disable of hide other fields?
    I want to hide the username and screenname fields but can’t find it anywhere


  47. Morné says:

    Hi Michel you are going to have to use jQuery to hide the other fields. Just use the id of the fields you want to hide. jQuery(‘#theid’).hide();

  48. Mihail Chitu says:

    Good Morning!
    Please, can you give me the code that I have to add in autor.php page to display the Age and Interest?

  49. Morné says:

    Hi Mihail,

    Why do you want to add it to the author.php file? The code needs to either go in to a plugin or in to your theme’s function.php file.

    Or do you want to display a users form for front end users?

    You can use the code above for this.

    If you want me to create something for you, I’m available for freelance work.


  50. Helmi Aditya says:

    Hi Morne,

    Thanks for the code, it works like a charm!

    Anyway, stupid question, is there any way to display the image in specific size already stated in add_image_size?

    My case is, uploaded images are vary in terms of size, but I really need to display it nicely cropped in 3 different size on 3 different page templates. I was trying to mimic the way post_thumbnails handles the size, but unfortunately it didn’t work.

    Does this possible? If it does, do you have any idea how to do that?

    Thanks again!

  51. Hi Morné, says:

    Hi Morné,

    First of all thanks for the code it help a lot for me. And I just want to ask a related question in this article, How can I hide or unset the Field for First Name and Last Name?

    Thanks Again,

    Warm Regards,


  52. Morné says:

    HI Helmi.

    About the image sizes, I think because this using the author details you won’t be able to add sizes but you would need to manipulate it with css. You could use another script like timthumb to crop it though.


  53. Morné says:

    Hi John,

    You could use simple CSS to hide those fields, just target their id or class names.

  54. wpsuperplugins says:


  55. Gotzila Za says:

    Hi Morné, Thank for your tutorial and i have problem that want to help
    I want to implement your code that upload image have more one field(can add or delete by user)

    below is picture example
    At present i write code textfield part complete and remain upload image part that i don’t how to modify your tutorial code to arrray and save in the wordpress
    Help me to solve this problem?

  56. Morné says:

    Hi Gotzilla,

    I would suggest you try to handle the fields separately for each upload. I’ve never tried handling multiple uploads for the profile itself.

    You will need to modify this part

    update_usermeta( $user_id, ‘image’, $_POST[‘image’] );

    To be able to handle more images so it will become something like this.

    update_usermeta( $user_id, ‘image_0′, $_POST[‘image’][0] );
    update_usermeta( $user_id, ‘image_1′, $_POST[‘image’][1] );

    update_usermeta( $user_id, ‘image_2′, $_POST[‘image’][2] );
    Please note this is untested code but should give you an idea of what needs to happen.

    Hope that helps 😉

  57. Max Pen says:

    I would like to display an extra value that shows a select option for either male,female or ???.

    And that displayed. I tried editing your code but it didn’t work.

  58. Piet says:

    Can someone confirm whether or not the code still works with the new media uploader?

  59. Morné says:

    Hi Piet,

    I will have a look as this article was written before the new image up loader was implemented. I’m going to update the tutorial asap.

    Thanks for the comment.

  60. Morné says:

    Hi Max,

    Please send me your code, so that I can see what you are trying to achieve.

  61. Piet says:

    thanks for your reply, Morné.

    I used your tut and just added the code to my functionality file. I can upload the image, but after clicking on “insert image” nothing happens. I am not sure (haven’t tested yet) whether I can output it as the other fields seem to be saved correctly.

    Just tried with your plugin, but also nothing happens, so that is the same and I rather add the code directly to my functionality file as that gives me much more flexibility.

    Thanks for looking into this, hopefully you get it solved without too much trouble!

  62. Morné says:

    Ya lets see, don’t think it’s too big of a change. Just the way the hooks are called.

  63. Piet says:

    what’s strange though is that I previously (as in 2 days ago) had it working, so I thought that it perhaps had to do with the actual user whose picture I want to upload being signed in.

    Just tried that out and doesn’t work either.

    It might be that your plugin is conflicting with the Metabox and Taxonomy Metabox scripts by Rilwis (, select from the dropdown menu under free plugins)

  64. Morné says:

    Ok, sounds like that could be your issue. Switch on debug mode for wordpress and then try to see what errors are thrown.

    Sometimes even things like javascript errors could also cause issues, so also look in firebug or in your chrome debug console at what JS errors are happening if any.

    If you could paste the errors you see here then it would be helpful to others and me to see if I can fix it or create a workaround.


  65. Piet says:

    hmm the moment I delete the code of your function, the enqueue errors disappear. With your script running I get this:

    Notice: wp_enqueue_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.) in /Users/name/dir/dir/domain/wp-includes/functions.php on line 2989

    Notice: wp_enqueue_style was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.) in /Users/name/dir/dir/domain/wp-includes/functions.php on line 2989

  66. Morné says:

    Thanks Piet,

    I know what the issue is here, let me see what I can do for you quick. I will reply when it’s fixed. Should be with in the next hour.

  67. Piet says:

    cool Morné, thanks so much for diving into this :)

  68. Morné says:

    Hi Piet,

    Thanks, I’ve updated my code. Have a look needed to add it to the init hook.

  69. Morné says:

    After you’ve uploaded the image, you need to click on the insert into post button. Then you can save your profile, and it should display. Works on my side.

  70. Piet says:

    Hi Morné,
    The errors are gone now, but the script still doesn’t save my image.
    Any idea what it can be next?

    I’m sorry, it does work!
    It only seems to work for the author him/herself though, hence me earlier saying it didn’t work.

    Well, I can live with that 😉

    Thanks so much for immediately jumping on top of this Morné!

  71. Piet says:

    PS in WordPress 3.6 the AIM, Jabber and Yim fields are going to be replaced with Facebook, Twitter and Google+ profiles, so you might want to update your code then too to reflect that :)

  72. Morné says:

    I’m glad it’s working. Yes it’s only for the current logged in user.

  73. Morné says:

    Yes I saw that the 3.6 release candidate is out will have to download an play around a bit :)

  74. Piet says:

    Hi Morné, it turned out that the javascript enqueueing has not been done properly. I discovered this when I wanted to add a new Gravity Form. So I looked around a bit to only make it run on the user profile pages and it turns out that the right way is as follows (your line 29 of upload function):

    add_action(‘admin_print_scripts-profile.php’, ‘zkr_enqueue_scripts_init’);

  75. Morné says:

    Hi Piet,

    Thanks, yes this is probably for the profile page only. There are actually quite a few ways to do it. You could also use the init which is global,

    admin_enqueue_scripts which is admin only
    or wp_enqueue_scripts which is front end only.

    Either way you can get things working depending on what you need to do.

    Thanks for bringing admin_print_scripts-profile.php to my attention I’m sure others will find it useful.

  76. Piet says:

    I actually used the init with admin_enqueue_scripts before, but that resulted in conflicts, hence my search from something more specific.

    Glad I could help out :)

  77. Morten Knudsen says:


    Thanks for you great input.

    Is it possible to add user fields to a page.

    So that a user will not see the WP profile page but a customer page build in the theme??

    Best regards


  78. yengko says:

    Thanks a lot for this wonderful code , works perfectly… I’d like to now whether the image file can be replace with a pdf file. I want the user to upload a pdf or a doc file intead of thier picture . and the same i want to display a download link instead of thier picture … How this can be done … many thanks !

  79. Morné says:

    Hi Morten,

    Yes it’s absolutely possible, you would need to create a template with a form to use in the front end. Then when logged in users submits the form that is on the front-end template you should then just update that current users meta data.

    Have a look at this page on the WordPress codex this should help you save any meta data you want.

    Hope that helps :)

  80. Morné says:

    Hi there,

    I’ve actually tried something similar before and as I can remember WordPress did not like me to upload PDF and word docs with the WordPress up loader. So you would need to write a custom upload function which only handles those types of docs.

  81. fred says:

    great thank you for sharing. how would you display data from a specific user?

  82. Morné says:

    Hi Fred,

    You would need to use the following page, it explains what you would need to do.

  83. Oshi Bobo says:

    YES! Thank you Morne Zeelie, just one question how do i also remove the biographic info field as well 😀

  84. Morné says:

    HI Oshi,

    You could use the unset($contactmethods[‘name_of_the_field_here’]) method just specify the field name or you could do a var_dump on that array and see whats currently there.

    Your other choice would be to use javascript / jQuery to hide it.

  85. Guest says:

    fgfdgdfgd fdg fg fgf gg

  86. Smooth Designs says:

    This is a very useful tutorial. Have you done a tutorial to use a file upload on the front end to change the profile image now set in the admin user profile area?

    In the case that you are setting up a user profile page on the front end. if you could do something like that it would be very helpful to many.

    Good job on this tutorial, works without any issues.


  87. Morné says:

    Hi There,

    I will look in to it and create one when I’ve got some time on my hands :)

    Thanks for the comment.

  88. Oshi Bobo says:

    Thank you for the guiding Morne your tutorial has help me allot, you the man 😀

  89. Shzi says:

    Hi dear morne, please help me how to add tinymce toolbar to my submission form editor, i’m using directorypress theme, when you click on submit you will see a form in that form there is (2) Main description field where we get a standard toolbar but i want to use the more detailed toolbar like tinymce, can please guide me in that will appreciate it. i have attached a screen shot of toolbar that i want to change

  90. Morné says:

    Hi Shzi,

    Sorry for the late reply. You can use this

    The wp_editor() function will output the tinymce editor for you where ever you want it.

    Thanks for commenting.

  91. franc says:

    Please ,your code not work for me ,please give me code correct

  92. Morné says:

    The code does work, what errors are you getting?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>