Categories: How To // Wordpress

Add Additional Fields To User Profile

Adding additional fields to the user profile in WordPress is a fairly easy job and requires calling four WordPress action hooks. Four action hooks?! Why? Keep on reading.

There are two action hooks for display the HTML and two hooks for saving the information.

For displaying the HTML in the user profile we will use the following two action hooks: show_user_profile and edit_user_profile.

What’s the difference? Well, show_user_profile is called when you visit your own profile and edit_user_profile is called when you edit a profile that is not your own.

By using the above two action hooks, the HTML will be displayed at the bottom of the user profile.

You can also place new additional fields in some other locations on the user profile page.

Other locations in profile page are:

  • personal_options, shown right after the “Show Toolbar when viewing site” checkbox. Do note that it is fired before the end of the table tag so use <tr><td></td></tr> before adding input fields and other elements.
  • profile_personal_options, shown right before the “Name” heading.

Right, now we know how to display the HTML fields so let’s do it.

/**
 * Display extra profile fields in user profile page.
 *
 * @param object $user
 * @return string
 *
 */
function lessthanweb_display_extra_profile_fields( $user ) {
	?>
	<h3><?php _e( 'Extra profile information', 'lessthanweb' ); ?></h3>
	<table class="form-table">
		<tr>
			<th><label for="lessthanweb-message"><?php _e( 'Message', 'lessthanweb' ); ?></label></th>
			<td>
				<textarea type="text" name="lessthanweb_message" id="lessthanweb-message" class="regular-text"><?php echo esc_html( get_user_meta( $user->ID, 'lessthanweb_message', true ) ); ?></textarea>
			</td>
		</tr>
		<tr>
			<th><label for="lessthanweb-phone"><?php _e( 'Phone', 'lessthanweb' ); ?></label></th>
			<td>
				<input type="text" type="text" name="lessthanweb_phone" id="lessthanweb-phone" class="regular-text" value="<?php echo esc_attr( get_user_meta( $user->ID, 'lessthanweb_phone', true ) ); ?>" />
			</td>
		</tr>
	</table>
	<?php
}
add_action( 'show_user_profile', 'lessthanweb_display_extra_profile_fields' ); 
add_action( 'edit_user_profile', 'lessthanweb_display_extra_profile_fields' );

If you now go to your profile page, you will see two new fields at the bottom of the page.

Clicking Update Profile button at this stage will not save the information you entered into your additional fields. For saving to work, we need to call the other two action hooks.

Action hooks for saving additional fields are: personal_options_update and edit_user_profile_update.

Again two action hooks, remember above why we have two action hooks for additional fields on user profile page? If not, scroll back up and read it again. ;)

The two hooks that we need are: personal_options_update which will be called when saving for current user and edit_user_profile_update which will be called if you save a profile of a different user.

Now let’s write the code for saving the two profile fields we displayed before.

/**
 * Save information in the extra profile fields to user meta.
 *
 * @param	integer	$user_id
 * @return	boolean
 *
 */
function lessthanweb_save_extra_profile_fields( $user_id ) {
	//	We should check if current user can edit users.
	if ( ! current_user_can( 'edit_user', $user_id ) ) {
		return false;
	}

	//	Get the posted fields.
	//	Do note that you should always escape any information that was posted.
	$message = isset( $_POST['lessthanweb_message'] ) ? wp_strip_all_tags( $_POST['lessthanweb_message'] ) : '';			
	$phone = isset( $_POST['lessthanweb_phone'] ) ? sanitize_text_field( $_POST['lessthanweb_phone'] ) : '';
	
	//	Update the user meta.
	update_user_meta( $user_id, 'lessthanweb_message', $message );
	update_user_meta( $user_id, 'lessthanweb_phone', $phone );

	return true;
}
add_action( 'personal_options_update', 'lessthanweb_save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'lessthanweb_save_extra_profile_fields' );

And that’s it really. Copy, paste and play around. ;)

Leave a Reply

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