How to Add and Use Custom User Profile Fields in WordPress?

Posted by on Jul 1, 2013 in WordPress ·

Custom profile fields in WordPress enable us to add extra information to the user profiles. By default, there are profile fields like username, first name, last name, nickname etc. Apart from these, we may need more fields. WordPress provides us a facility to do so. That is called as custom user profile fields. It enables us to add additional options in the profiles. Let’s see how to add fields and use them.

The basic method

This method will add new fields under Contact Info section of profile. You can paste the code in your theme’s functions.php file or in a plugin.

// Filter function
function add_contact_fields($profile_fields) {
	// Adding fields
	$profile_fields['gplus'] = 'Google+';
	$profile_fields['twitter'] = 'Twitter Username';
	$profile_fields['facebook'] = 'Facebook';

	return $profile_fields;
}
// Adding the filter
add_filter('user_contactmethods', 'add_contact_fields');

This is the simplest method for creating new profile fields. You should see 3 new profile fields under “Contact Info” section. You are ready to use the fields.

New Profile Fields added in Profile Section

Similarly, you can also remove the existing fields. Do this only when you need and you are sure. Otherwise any other plugin or theme using these fields may break. The code is similar.

function remove_contact_fields($profile_fields) {

	// Remove the field
	unset($profile_fields['aim']);
	unset($profile_fields['jabber']);

	return $profile_fields;
}
add_filter('user_contactmethods', 'remove_contact_fields');

The advanced method

The above method adds new profile fields under “Contact Info” section. But for some advanced functionality, we might need a complete new section. Above, we used simple filter. Now we will use actions. We will add the same fields, but with different method. Paste the code in functions.php or in a plugin.

// Function for adding fields
function extra_profile_fields( $user ) { ?>
 <h3><?php _e('Extra Profile Fields', 'frontendprofile'); ?></h3>
 <table class="form-table">
 <tr>
   <th><label for="gplus">Google+</label></th>
   <td>
     <input type="text" name="gplus" id="gplus" value="<?php echo esc_attr( get_the_author_meta( 'gplus', $user->ID ) ); ?>" class="regular-text" /><br />
     <span class="description">Enter the Google+ URL.</span>
   </td>
 </tr>
 <tr>
   <th><label for="twitter">Twitter Username</label></th>
   <td>
     <input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
     <span class="description">Enter Twitter Username.</span>
   </td>
 </tr>
 <tr>
   <th><label for="facebook">Facebook</label></th>
   <td>
     <input type="text" name="facebook" id="facebook" value="<?php echo esc_attr( get_the_author_meta( 'facebook', $user->ID ) ); ?>" class="regular-text" /><br />
     <span class="description">Enter Facebook URL.</span>
   </td>
 </tr>
 </table>
<?php } // Function body ends

// Adding actions to show and edit the field
add_action( 'show_user_profile', 'extra_profile_fields', 10 );
add_action( 'edit_user_profile', 'extra_profile_fields', 10 );

This code just added new fields with a new section. We must enable saving the field values.

Add the following code just after the above.

function save_extra_profile_fields( $user_id ) {

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

	/* Edit the following lines according to your set fields */
	update_usermeta( $user_id, 'twitter', $_POST['gplus'] );
	update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
	update_usermeta( $user_id, 'twitter', $_POST['facebook'] );
}

add_action( 'personal_options_update', 'save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'save_extra_profile_fields' );

After saving the code, you should see a new section in the profile editor.

New Section Added in Profile Fields Editor

Note : This method doesn’t show the extra fields at the time of adding a new profile (user-new.php). You can only see the fields while editing the profile (profile.php and user-edit.php). If you really need the fields to be shown at the time of adding a user, you will need to edit user-new.php file.

Showing the custom user profile fields

To show the new profile fields, an inbuilt function is there. Use it wherever you want; irrespective of the method you used.

For example, I want to show the extra user information after the post. So, I will add the following lines of code after the post content in single.php file.

<?php
the_author_meta('gplus');
the_author_meta('twitter');
the_author_meta('facebook');
?>
Last updated on : January 10, 2014.

17 Comments on “How to Add and Use Custom User Profile Fields in WordPress?”

  1. Rochel

    Hi Animish,
    Thanks for your post, I had seen a similar one but couldn’t get it to work on my site. I’ve followed your tutorial and it seems to be working pretty well but I’m running into a problem. I’ve changed the “Google+” field from your tutorial to “phone” and it displays fine but when users fill out the registration form (I’m using this together with Gravity Forms and their User Registration add-on) and add a phone number to the “phone” field it’s not populating the “phone” field on the profile page. However, if I add the phone number on the profile page and click “Update User” it saves it and displays it. Is there a reason that this method doesn’t communicate with the database where the phone number is already entered?

    Thanks!

    1. Rochel

      Never mind it’s working! It wouldn’t populate for existing users but I tested it with a new user registration and it worked.

      Thanks!

      1. Rochel

        What hook would I use for the password? I don’t want to add a new password field but I have a front-end profile page where the users can update their profile information because they don’t have access to the backend. I’ve been able to include a password field but it isn’t connecting with the “native” WP password field so that when a user changes their password it updates it in their profile. What code do I need to add to my functions.php file? The hook “user_contactmethods” doesn’t work for password.

        thanks!

        1. Animish

          Hello Rochel!

          I think you don’t need to use any hook for that. WordPress has an inbuilt function for that. You can use it in the following way:-

          $user_id = get_current_user_id( );
          $new_password = "Here Should be the New Password";
          wp_update_user( array ( 'ID' => $user_id, 'user_pass' => $new_password ) ) ;
          

          Note : Consider opening a help thread at WordPress support forum.

  2. Jen

    Thank you Animish for this tutorial – it works great! Is it possible to use instead of ? I tried this and it displays properly and sends the initial information to the database (shows in website page) but appears blank on profile refresh. In extra_profile_fields function I added an extra table row with:
    <textarea rows="4" name="newbio" id="newbio" value="ID ) ); ?>” class=”regular-text” >

    and in the save_extra_profile_fields function I added –
    update_usermeta( $user_id, ‘newbio’, $_POST['newbio'] );

    Am I missing anything? Thanks much for any help!

  3. Kate

    Thanks that’s great –
    Do you know what to ” unset” the top Personal options section – visual editor color etc ?

    1. Animish

      It depends on what you want and what you are comfortable with. I have unset the visual editor disabling option. That is, I DO USE the visual editor. But I have disabled the toolbar while viewing the site. I also use keyboard shortcuts.

  4. Christiaan

    While building my website i discovered a few issues,
    one of them was that i wanted custom fields on the profile page.
    That was something new for me, this tutorial helped me a lot!

    Thanks!
    Christiaan

Leave a Reply

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

11 + 3 =