How to Add Custom Fields to User Profile Page in WordPress

WordPress Add Custom Fields User Edit Profile Page – In this post, we see how to add custom fields to a user profile edit page in WordPress at the admin end. When the admin wants to add some extra information for the users on his/her site, then custom fields can play an important role.

As we know, WordPress provides hooks for almost every other feature/functionality so that we can update or manipulate it according to our needs. So for this also we’ll use some hooks to fulfill our post purpose.

Here’s a step-by-step guide on how to add custom fields to a user profile page in WordPress:

1. Create a custom plugin or use your theme’s functions.php file:

<?php
/**
 * Plugin Name: Add Custom Fields to User Profile Page
 * Description: How to Add Custom Fields to User Profile Page in WordPress.
 * Plugin URI: https://webkul.com/
 * Version: 1.0.0
 * Author: Webkul
 * Author URI: https://webkul.com/
 * Text Domain: webkul
 */

2. Add Custom User Fields in WordPress:

/**
 * Custom user profile fields.
 *
 * @param $user
 * @author Webkul
 */
function wk_custom_user_profile_fields( $user ) {
	echo '<h3 class="heading">Custom Fields</h3>';
	?>
	<table class="form-table">
		<tr>
			<th><label for="contact">Contact</label></th>
			<td>
				<input type="text" name="contact" id="contact" value="<?php echo esc_attr( get_the_author_meta( 'contact', $user->ID ) ); ?>" class="regular-text" />
			</td>
		</tr>
	</table>
	<?php
}

add_action( 'show_user_profile', 'wk_custom_user_profile_fields' );
add_action( 'edit_user_profile', 'wk_custom_user_profile_fields' );

In the above code, we add an action to hook ‘edit_user_profile‘ and create one input field in the callback function. This function will display a field when you are editing other user profiles. If you want to show created fields for all profiles then use the ‘show_user_profile‘ hook and add an action for the same callback function.

After executing the above code, the custom field will display on the user profile edit page as below –

Now, to save the data for created custom fields we’ll use the ‘edit_user_profile_update‘ hook.

The hook ‘edit_user_profile_update‘ only triggers when the user editing other user profiles in the same way we mentioned above for displaying the fields. To save data for all user profiles, then you also need to use the ‘personal_options_update‘ hook.

/**
 * Save custom user profile fields.
 *
 * @param User Id $user_id
 */
function wk_save_custom_user_profile_fields( $user_id ) {
	if ( current_user_can( 'edit_user', $user_id ) ) {
		update_user_meta( $user_id, 'contact', sanitize_text_field( $_POST['contact'] ) );
	}
}
add_action( 'personal_options_update', 'wk_save_custom_user_profile_fields' );
add_action( 'edit_user_profile_update', 'wk_save_custom_user_profile_fields' );

Support

That is all for this dev blog on How to Add Custom Fields to User Profile Page in WordPress. For any technical assistance, please raise a ticket or reach us by mail at support@webkul.com

Kindly visit the WooCommerce plugins page to explore a wide variety of solutions to add more features to your online store. Also, you can hire WooCommerce developers for your project work.

!!Have a Great Day Ahead!!

See you in the next post. Keep reading 🙂