To add a custom field to user profiles in WordPress, you can use the show_user_profile and edit_user_profile hooks along with the add_user_meta and update_user_meta functions. This allows you to add a custom field to the user profile page in the WordPress admin area.
Here’s an example code snippet that demonstrates how to add a custom field called “Twitter Handle” to user profiles:
// Add custom field to user profiles
function wpsnippets_add_twitter_field( $user ) {
?>
<h3><?php esc_html_e( 'Twitter Handle', 'text-domain' ); ?></h3>
<table class="form-table">
<tr>
<th><label for="twitter_handle"><?php esc_html_e( 'Twitter Handle', 'text-domain' ); ?></label></th>
<td>
<input type="text" name="twitter_handle" id="twitter_handle" value="<?php echo esc_attr( get_user_meta( $user->ID, 'twitter_handle', true ) ); ?>" class="regular-text" />
<p class="description"><?php esc_html_e( 'Please enter your Twitter handle.', 'text-domain' ); ?></p>
</td>
</tr>
</table>
<?php
}
add_action( 'show_user_profile', 'wpsnippets_add_twitter_field' );
add_action( 'edit_user_profile', 'wpsnippets_add_twitter_field' );
// Save custom field data
function wpsnippets_save_twitter_field( $user_id ) {
if ( ! current_user_can( 'edit_user', $user_id ) ) {
return;
}
if ( isset( $_POST['twitter_handle'] ) ) {
update_user_meta( $user_id, 'twitter_handle', sanitize_text_field( $_POST['twitter_handle'] ) );
}
}
add_action( 'personal_options_update', 'wpsnippets_save_twitter_field' );
add_action( 'edit_user_profile_update', 'wpsnippets_save_twitter_field' );
This code adds a custom field called “Twitter Handle” to the user profile page. The field is displayed using the show_user_profile and edit_user_profile hooks, and the field value is saved using the update_user_meta function. The saved value can be retrieved using the get_user_meta function.
Examples
Example 1: Adding a Custom Field to User Profiles
This use case demonstrates how to add a custom field to user profiles in WordPress. The code example below adds a custom field called “Phone Number” to the user profile page.
function wpsnippets_add_user_profile_fields( $user ) {
?>
<h3><?php _e( 'Extra Profile Information', 'textdomain' ); ?></h3>
<table class="form-table">
<tr>
<th><label for="phone_number"><?php _e( 'Phone Number', 'textdomain' ); ?></label></th>
<td>
<input type="text" name="phone_number" id="phone_number" value="<?php echo esc_attr( get_the_author_meta( 'phone_number', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description"><?php _e( 'Please enter your phone number.', 'textdomain' ); ?></span>
</td>
</tr>
</table>
<?php
}
add_action( 'show_user_profile', 'wpsnippets_add_user_profile_fields' );
add_action( 'edit_user_profile', 'wpsnippets_add_user_profile_fields' );
The code adds a custom field called “Phone Number” to the user profile page. It uses the show_user_profile and edit_user_profile hooks to display the field on both the user profile edit and view pages. The field is displayed within a table and includes a label, input field, and description.
Example 2: Saving the Custom Field Value
This use case demonstrates how to save the value of a custom field added to user profiles. The code example below saves the value of the “Phone Number” field.
function wpsnippets_save_user_profile_fields( $user_id ) {
if ( ! current_user_can( 'edit_user', $user_id ) ) {
return;
}
update_user_meta( $user_id, 'phone_number', sanitize_text_field( $_POST['phone_number'] ) );
}
add_action( 'personal_options_update', 'wpsnippets_save_user_profile_fields' );
add_action( 'edit_user_profile_update', 'wpsnippets_save_user_profile_fields' );
The code uses the personal_options_update and edit_user_profile_update hooks to save the value of the “Phone Number” field when the user profile is updated. It checks if the current user has the capability to edit the user profile before updating the meta value using the update_user_meta() function.
Example 3: Displaying the Custom Field Value
This use case demonstrates how to display the value of a custom field added to user profiles. The code example below displays the value of the “Phone Number” field on the user profile page.
function wpsnippets_display_user_profile_fields( $user ) {
?>
<h3><?php _e( 'Extra Profile Information', 'textdomain' ); ?></h3>
<table class="form-table">
<tr>
<th><label for="phone_number"><?php _e( 'Phone Number', 'textdomain' ); ?></label></th>
<td>
<?php echo esc_html( get_the_author_meta( 'phone_number', $user->ID ) ); ?>
</td>
</tr>
</table>
<?php
}
add_action( 'show_user_profile', 'wpsnippets_display_user_profile_fields' );
add_action( 'edit_user_profile', 'wpsnippets_display_user_profile_fields' );
The code uses the show_user_profile and edit_user_profile hooks to display the value of the “Phone Number” field on both the user profile edit and view pages. It retrieves the meta value using the get_the_author_meta() function and displays it within a table.