WordPress Wednesdays: Adding Custom Fields to User Profiles

Geek Factor: 4

In this week’s WordPress Wednesday, we’re going to talk about how to add custom fields to user profiles in WordPress.

When building or managing a site that has multiple users, it can be handy to pull information from the user profile to display with each author’s posts. Although WordPress does include a number of useful built-in fields, it lacks simple things like the ability to include an author’s Twitter name, or link to their profile photo or LinkedIn page.

Thankfully, there are a number of handy tutorials out there to help with this kind of thing.
Justin Tadlock has a great post covering how to add text fields to user profiles.

First, the following code needs to be added to your functions.php file:

[php]
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 ) { ?>

Extra profile information

Please enter your Twitter username.

Next, we will need to add a function to save the information that’s added to this new field. Again, in the functions.php file, add the following code:

[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, ‘twitter’, $_POST[‘twitter’] );
}
[/php]

(Note: I made a minor adjustment to Justin Tadlock’s code, simply because his original post is from 2009: the update_usermeta() function used in his post is now deprecated, and has been replaced with update_user_meta() above.)

This PHP can be reused to add multiple text fields to your user profiles; just make sure to update the id, name and value attributes in the first snippet, and the term ‘twitter’ in the update_user_meta() function in the second snippet to match the name of your new field.

So what if you need to use different form fields, like a checkbox? This tutorial by James Carroll covers how to set up a simple checkbox; I’ve recreated the first snippet of code used above to display a checkbox rather than a text field. In the below example, I’ve added a checkbox to the profile so a user could opt out of having their email address displayed with their profile on the site:

[php]
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 ) { ?>

Extra profile information

ID )) == “true”) echo “checked”; ?> />

The second snippet of code will also need to be updated, to reference the name of the new field — ‘show_email’ — which has been done below on line 10. I also found when I tried to update the profile with the checkbox unchecked, it returned an error. Unlike text fields, an empty checkbox has no value, rather than a value of empty. To fix this, I added a isset() function to line 8 — if the checkbox isn’t checked, it sets its value to ‘false’:

[php mark=”8,10″]
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;

if (!isset($_POST[‘show_email’])) $_POST[‘show_email’] = “false”;

update_user_meta( $user_id, ‘show_email’, $_POST[‘show_email’] );
}
[/php]

Lastly, to display the custom profile information in your themes, you can use WordPress’s built-in functions the_author_meta() (which displays the information), and the get_the_author_meta() (which returns, but does not display, the information). You just need to pass the name of the field you would like to display to the function being used.

In the Loop, you can display the author’s Twitter account from the first set of snippets using the following code:

[php][/php]

Again in the Loop, to find out whether or not an author would like their email address displayed on the site, you can grab and store the information from their profile with the following code:

[php][/php]

To use these functions outside of the Loop, you will need to reference the author’s ID in the function as well; please check out WordPress’s documentation of the_author_meta() and get_the_author_meta() for more information and examples.

The ability to add additional fields to user profiles makes them more useful for displaying author information on websites. What other information do you think would be helpful to add to your site’s profiles? Please share in the comments below!

  1. […] the first snippet of code, you can order by any user meta value, including custom fields you have added […]

    @ 9:09 am
  2. Irfan said:

    Hi,
    All of your fields are going inside the user profile form. Is there any to add some field outside that form.

    For example, I have to add two additional forms but they must be out side the WP user profile form? Thanks

    Dayan

    @ 3:17 am
  3. Dayan – it’ll depend where you’re trying to get your additional fields to appear. Can you provide more information about what you’re trying to do?

    @ 7:40 am
  4. JM said:

    Laurel,

    Great post! I love to see advanced examples and how-to’s about WordPress.

    I’d like to get your thoughts on how to tackle an extension to your code.

    Let’s take your example of the “display email address” custom field. Is there a way for a user to change that option without having to visit the profile page? Perhaps from a link or small form on the front end?

    Thanks a lot!

    @ 1:06 pm
  5. Thanks JM!

    There’s actually a great example of how to add fields to the front-end of your site where users can update their profile information on the Stack Exchange WordPress site.

    Better yet, they include links to some plugins that create the same functionality if that’s what you prefer.

    Hope this helps!

    @ 1:42 pm
  6. Craig said:

    How could you add a file/image upload field to user profile using your method above. Is there a standard wordpress function that does this, or would I need to insert some javascript inside this custom field function to get it work right?

    @ 1:49 pm
  7. Hi Craig,

    I’ve done a bit of playing around with this, but haven’t had much luck yet. From what I can tell, it requires adding file uploading functionality to the profile, and likely a way to scale down the image as well.

    If you’re looking for a quicker solution, you might want to look into what plugins are available. For example, User Photo (http://wordpress.org/extend/plugins/user-photo/) adds a file upload tool to all user profiles, sizes the image to thumbnails, and stores them in their own /userphoto/ directory in the uploads folder.

    Hope this helps!

    @ 1:42 pm
  8. kazunn said:

    Hi . I did the same thing. I used a parameter called show_restricted.It showing and updating correctly in the user edit profile page.
    But once I’m going to get the value in the theme it return empty value.

    may code is
    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 ) { ?>

    Restricted content

    Restricted content

    <input type="checkbox" name="show_restricted" id="show_restricted" value="true" ID )) == “true”) echo “checked”; ?> />
    Show restricted content

    and I’m trying to check the value as
    get_the_author_meta( “show_restricted”) == “true”
    also this don’t works
    get_the_author_meta( “show_restricted”) != “false”

    I think I’m doing something silly here. Can you look in to this.
    Thanks in advance.

    @ 7:37 am
  9. Hi Kazunn,

    Outside of some weirdness in the input field above (which I’m 99% sure is an issue with our comment editor, not your code), what you have looks like it should work.

    Where are you using the get_the_author_meta(‘show_restricted’)?

    In the Loop I was able to repo what you were trying to accomplish, no problem.

    If using the code outside of the Loop on the Author archive page, I had to do the following:

    show_restricted == ‘true’) {
    // do something
    }
    ?>

    If you’re doing a query of the users and then outputting information, once you have your query you may need to get this info like so:

    show_restricted == ‘true’) {
    // do something
    }
    }
    ?>

    If this is way off track, please provide as many details as you can and I can take another crack at it!

    @ 9:01 am
  10. kazunn said:

    Hi Laurel,
    Sorry for the late reply.
    That was my mistake. I was needed to use that for current user, not for the author. so i have get the wp usr object
    wp_get_current_user
    Now it works fine.

    Thanks

    @ 8:00 am
  11. Bart De Vuyst said:

    Great article. I already read Justin Tadlocks version before.

    I try to do the same for a dropdown menu. Any idea how that works out? I tried for over an hour, but I don’t get it to work.

    thanks,

    Bart

    @ 7:00 am
  12. Hi Bart,

    Good question! I’ve played around with adding a select dropdown, and I think I got to work.

    It seems like the big difference will be putting a ‘check’ for the select’s value on each <option>, and if that option’s value is what’s stored in the author_meta for the select dropdown, echoing the ‘selected’ state. That way, when the user profile is loaded again, the select dropdown has the stored value pre-selected, rather than flipping back to the first option.

    Here’s the bit that would go in the form:

    <select name=”bestpet” id=”bestpet”>
    <option>Please select…</option>
    <option <?php if (esc_attr( get_the_author_meta( “pickone”, $user->ID )) == “cat”) echo “selected”; ?> value=”cat”>Cat</option>
    <option <?php if (esc_attr( get_the_author_meta( “pickone”, $user->ID )) == “dog”) echo “selected”; ?> value=”dog”>Dog</option>
    <option <?php if (esc_attr( get_the_author_meta( “pickone”, $user->ID )) == “fish”) echo “selected”; ?> value=”fish”>Fish</option>
    </select>

    Then in the function to save the field’s value, you should be able to use the same set up as was used in the post for text inputs:

    function my_save_extra_profile_fields( $user_id ) {
    update_user_meta( $user_id, ‘bestpet’, $_POST[‘bestpet’] );
    }

    Just let me know if this doesn’t work for you!

    [edited to fix format]

    @ 12:53 pm
  13. James Clark said:

    Hi Laurel, and thanks for a great tutorial! I thought you might be interested to hear what I’ve used it for.

    I’ve added a tickbox field which I’ve called ‘display author image?’ to the Edit User page.

    When it is ticked, the user’s gravatar is displayed on their author profile page, but when it is unticked, the gravatar is not displayed.

    So for example my gravatar is showing:
    http://www.cathedralcityguide.co.uk/author/admin/

    But my fellow contributor Sarah has decided she doesn’t want her gravatar to show:
    http://www.cathedralcityguide.co.uk/author/sarah/

    Thanks again and I hope this was of some interest! James

    @ 11:36 am

Leave a Comment

Note: Fields marked with a * are required; email addresses are not published.

Legal FAQ Collections