This post is a part 13 of Creating a WordPress Admin Theme post series.
In this article I will show you how to add fields on WordPress admin profile page. And then how to retrieve the profile information for our customized fields on front-end.
Adding new field to WordPress profiles
To add markup for new fields to admin profile page you need to use show_user_profile and edit_user_profile actions. And then to save the field data when form is submitted you need to use personal_options_update and edit_user_profile_update actions.
update_user_meta is used to store custom profile data in WordPress database. And to retrieve custom profile data from database we need to use get_user_meta.
Displaying new fields
<?php
//$profileuser contains basic profile information about the currently logged in user. Basic profile info includes user id, email, username etc. We need the user id to retrieve profile data specific to a user
function add_profile_fields($profileuser)
{
$facebook_url = get_user_meta($profileuser->ID, 'facebook_url', true);
$twitter_url = get_user_meta($profileuser->ID, 'twitter_url', true);
?>
<h3><?php _e('Social Information'); ?></h3>
<table class="form-table">
<tr>
<th><label for="facebook_url"><?php _e('Facebook Profile URL'); ?></label></th>
<td><input type="text" name="facebook_url" id="facebook_url" value="<?php if(isset($facebook_url)){ echo esc_attr($facebook_url); } ?>" class="regular-text" /></td>
</tr>
<tr>
<th><label for="twitter_url"><?php _e('Twitter Profile URL'); ?></label></th>
<td><input type="text" name="twitter_url" id="twitter_url" value="<?php if(isset($twitter_url)){ echo esc_attr($twitter_url); } ?>" class="regular-text" /></td>
</tr>
</table>
<?php
}
//attach same callback to both actions
add_action('show_user_profile', 'add_profile_fields');
add_action('edit_user_profile', 'add_profile_fields');
?>
//$profileuser contains basic profile information about the currently logged in user. Basic profile info includes user id, email, username etc. We need the user id to retrieve profile data specific to a user
function add_profile_fields($profileuser)
{
$facebook_url = get_user_meta($profileuser->ID, 'facebook_url', true);
$twitter_url = get_user_meta($profileuser->ID, 'twitter_url', true);
?>
<h3><?php _e('Social Information'); ?></h3>
<table class="form-table">
<tr>
<th><label for="facebook_url"><?php _e('Facebook Profile URL'); ?></label></th>
<td><input type="text" name="facebook_url" id="facebook_url" value="<?php if(isset($facebook_url)){ echo esc_attr($facebook_url); } ?>" class="regular-text" /></td>
</tr>
<tr>
<th><label for="twitter_url"><?php _e('Twitter Profile URL'); ?></label></th>
<td><input type="text" name="twitter_url" id="twitter_url" value="<?php if(isset($twitter_url)){ echo esc_attr($twitter_url); } ?>" class="regular-text" /></td>
</tr>
</table>
<?php
}
//attach same callback to both actions
add_action('show_user_profile', 'add_profile_fields');
add_action('edit_user_profile', 'add_profile_fields');
?>
Saving fields when form is submitted
<?php
//$user_id is assigned to the id of currently logged in user. We need the user id to store profile data specific to a user
function update_profile_fields($user_id)
{
if(!empty($_POST['facebook_url']))
{
update_user_meta($user_id, 'facebook_url', sanitize_text_field($_POST['facebook_url']));
}
if(!empty($_POST['twitter_url']))
{
update_user_meta($user_id, 'twitter_url', sanitize_text_field($_POST['twitter_url']));
}
}
//attach same callback to both actions
add_action( 'personal_options_update', 'update_profile_fields');
add_action( 'edit_user_profile_update', 'update_profile_fields');
?>
//$user_id is assigned to the id of currently logged in user. We need the user id to store profile data specific to a user
function update_profile_fields($user_id)
{
if(!empty($_POST['facebook_url']))
{
update_user_meta($user_id, 'facebook_url', sanitize_text_field($_POST['facebook_url']));
}
if(!empty($_POST['twitter_url']))
{
update_user_meta($user_id, 'twitter_url', sanitize_text_field($_POST['twitter_url']));
}
}
//attach same callback to both actions
add_action( 'personal_options_update', 'update_profile_fields');
add_action( 'edit_user_profile_update', 'update_profile_fields');
?>
You can also include advanced fields like file upload fields. They can be used for uploading profile images. Many themes use Gravatar to retrieve image of a user but having option to upload a profile pic in admin panel makes the theme stand out.
Displaying custom profile fields based on user role
If you want users with different roles to have different profile fields in the profile page then you can use the below code to retrieve the role of the currently logged in user and then display appropriate fields using conditionals.
function get_current_user_role() {
global $wp_roles;
$current_user = wp_get_current_user();
$roles = $current_user->roles;
$role = array_shift($roles);
return isset($wp_roles->role_names[$role]) ? translate_user_role($wp_roles->role_names[$role] ) : false;
}
global $wp_roles;
$current_user = wp_get_current_user();
$roles = $current_user->roles;
$role = array_shift($roles);
return isset($wp_roles->role_names[$role]) ? translate_user_role($wp_roles->role_names[$role] ) : false;
}
Retrieve profile information on front-end
Let’s see how to retrieve author’s profile information, use the function get_the_author_meta inside WordPress loop to retrieve basic information of the current page/post author. To retrieve custom profile fields values use the get_user_meta function supplied with the author id retrieved from get_the_author_meta function.
Let’s see how to retrieve logged in users profile information, first retrieve the user id of the logged in user using get_current_user_id function. Now use the function get_the_author_meta to retrieve basic profile information and use get_user_meta to retrieve custom profile information supplied with the user id.
