Ways To Add Extra Fields To User Profile Page - Emerald Tech

Most of the times the fields provided on wordpress profile page aren’t enough. You want to add more contact methods or other user info like gender, age, country etc. I have listed some ways to add extr fields to user profile using some methods. For me the best method of doing so was no. 3, since it was flexible and customizable according to my needs.

1-You can add more contact fields to the user profile page in wordpress. The trick is to use the hook called ‘user_contactmethods’ to add new contact fields. Paste the code below in your functions.php

add_filter('user_contactmethods', 'my_user_contactmethods');

function my_user_contactmethods($user_contactmethods){

  $user_contactmethods['twitter'] = 'Twitter Username';
  $user_contactmethods['facebook'] = 'Facebook Username';

  return $user_contactmethods;
}

The user profile page will now look like below

2-You can also add extra fields by using a plugin such as cimy extra fields. The latest version of plugin supports adding new fields such as

1. text
2. textarea
3. textarea-rich
4. password
5. checkbox
6. radio
7. drop-down
8. picture
9. picture-url
10. registration-date
11. avatar
12. file

Another plugin for same pupose is Extended User Profile

3- Another way i added extra field to a profile page for a client was using the code below. You can repeat this code for every new field you would like to add.

//displaying the twitter field
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 ) { ?></pre>
<h3>Extra profile information</h3>
<table class="form-table">
<tbody>
<tr>
<th><label for="twitter">Twitter</label></th>
<td><input id="twitter" class="regular-text" type="text" name="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" />

 <span class="description">Please enter your Twitter username.</span></td>
</tr>
</tbody>
</table>
<pre><?php }<br ?>
//saving the field
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;

	/* Copy and paste this line for additional fields. Make sure to change 'twitter' to the field ID. */
	update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
}

Thanks to justin Tadlockfor the above code. For adding select lists for some user profile fields,i used this code.

/* Gender*/

add_action( 'show_user_profile', 'my_show_extra_profile_fieldsgender' );

add_action( 'edit_user_profile', 'my_show_extra_profile_fieldsgender' );

function my_show_extra_profile_fieldsgender( $user ) { ?></pre>
<table class="form-table">
<tbody>
<tr>
<th><label for="gender">Gender</label></th>
<td>
<!--gender-->

 <?php $value_gender=get_the_author_meta( 'gender', $user->ID );<br ?=""><br ?="">?>
<select name="gender"> <option value="<?php echo $option_value; ?>"> ></td>
</tr>
</tbody>
</table>
<pre><?php }<br ?>add_action( 'personal_options_update', 'my_save_extra_profile_fieldsgender' );
add_action( 'edit_user_profile_update', 'my_save_extra_profile_fieldsgender' );

function my_save_extra_profile_fieldsgender( $user_id ) {

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

	/* Copy and paste this line for additional fields. Make sure to change 'Gender' to

the field ID. */
	update_usermeta( $user_id, 'gender', $_POST['gender'] );
}

To display any field anywhere you simply use this code. This is for displaying twitter field.

echo esc_attr( get_user_meta( $user_id, 'twitter',true) );

So here are some methods you can use to enhance the profile page, if you have anything to share about the profile page, share that in comments.

Related Articles
Adding Extra Profile Fields