Adding Custom Fields to User Profile in Wordpress

Author - Komal Dhiman
16.02.2018
|
0 Comments
|

In WordPress, each user profile has many fields like first name,last name, website url etc which are almost sufficient to get the user information. We also have the user’s contact info like his email address but still sometimes situation arises when we need some extra information from the user like his/her Company Name, Location, Address, Phone no etc which are not available in WordPress User Profile by default. Therefore, we may require to add some new fields to user profile sometimes.

WordPress does not provide the facility to add the extra fields to User profile directly. But there are two ways to achieve this – either using an available plugin from the WordPress market or through code. We have many plugins available in the market which provide feature for profile and users settings. But what if we only need some custom fields to add in the user profile and nothing else? Then there is no need to buy or to get the extra plugins to embed in our site if this is possible through little code.

In order to add custom fields to User’s profile with custom code we need to add the below code to functions.php file of our theme.

NOTE: Create a child theme to change the functions.php as the changes will get lost on updating the theme if done on the parent theme:

function add_custom_userprofile_fields( $user ) {    ?>
<table class="form-table">
<tr>
<th>
<label for="company_name"><?php _e('Company Name', 'your_textdomain'); ?>
</label></th>
<td>
<input type="text" name="company_name" id="company_name" value="<?php echo esc_attr( get_the_author_meta( 'company_name', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description"><?php _e('Please enter your company name.', 'your_textdomain'); ?></span>
</td>
</tr>
<tr>
<th>
<label for="user_phone"><?php _e('Phone No.', 'your_textdomain'); ?>
</label></th>
<td>
<input type="text" name="user_phone" id="user_phone" value="<?php echo esc_attr( get_the_author_meta( 'user_phone', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description"><?php _e('Please enter your phone number.', 'your_textdomain'); ?></span>
</td>
</tr>
</table>
<?php }
function save_custom_userprofile_fields( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) )
return FALSE;
update_usermeta( $user_id, 'company_name', $_POST['company_name'] );
update_usermeta( $user_id, 'user_phone', $_POST['user_phone'] );
}
add_action( 'show_user_profile', add_custom_userprofile_fields );
add_action( 'edit_user_profile', add_custom_userprofile_fields );
add_action( 'personal_options_update', 'save_custom_userprofile_fields' );
add_action( 'edit_user_profile_update', 'save_custom_userprofile_fields' );

Here:

add_custom_userprofile_fields is the function that we created to add the fields to the WordPress user’s profile page. In this function, we are just adding the fields to a table and retrieving value (if already added) through get_the_author_meta( ‘user_phone’, $user->ID ).

save_custom_userprofile_fields is the function created to save the values of custom fields to user meta. In this function we are checking if user has right to edit the fields (as different users can have different roles and permissions), if yes then we can update the user meta otherwise we will not update it and return.

update_usermeta is the function that is used in wordpress to update user meta field on the basis of $user_id i.e user id.

show_user_profile is the action hook that is used to output new fields to bottom of wordpress’s user profile page. It triggers itself when a user views his own profile page.

edit_user_profile is the action hook that is also used to output new fields to bottom of wordpress’s user profile page but it triggers when a user view another user’s profile page.

In order to show the fields to all the user’s profile page, it is mandatory to use both these hooks.

personal_options_update is the action hook that is used to save custom fields that have been added to the WordPress profile page. It triggers itself when a user saves his own profile page.

edit_user_profile_update is the action hook that is also used to save custom fields that have been added to the WordPress profile page but it triggers when a user saves another user’s profile page.

In order to save the fields to all the user’s profile page, it is mandatory to use both these hooks.

This above code will add two custom fields labelled as ‘Company Name’ and ‘Phone No.’ to the bottom of the User Profile so we can enter input values there:

Now if we want to get the value of these fields then we can simply get those just like User’s other fields. If we want to get these fields as merge tags in our forms to retrieve their value we can simply do so like:

Here ‘user’ in {user:user_phone} is to refer the current user logged in and ‘user_phone’ is the name of the field that we used while creating it.


		
Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

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

Send your message