WordPress user profiles contain standard fields such as username, email address, website, and biographical information. But what if your website needs additional information, such as a company name, job title, phone number, department, or customer ID?
You can extend the WordPress user profile page by adding custom fields with WordPress action hooks and user metadata. In this tutorial, you'll learn how to add custom fields to the WordPress user profile page, display them on both the Add New User and Edit User screens, and save the field value to the WordPress database.
Why Add Custom Fields to WordPress User Profiles?
Every WordPress website has different user-data requirements. The default profile fields may not provide everything your application needs.
Custom user profile fields can be useful for storing information such as:
- Company name
- Job title
- Department
- Phone number
- Location
- Customer information
- Professional profile details
WordPress stores additional user information as user metadata, which makes custom fields flexible and suitable for many types of WordPress projects.
What You'll Build
In this example, we will create a custom Company Name field.
The field will appear on:
- The WordPress Add New User screen
- The WordPress Edit User screen
- The user's profile page
We will then save the value using WordPress user metadata.
Step 1: Add a Custom Field to the WordPress User Profile
WordPress provides several action hooks that allow developers to add custom fields to user profile screens. The show_user_profile and edit_user_profile hooks can be used for existing users, while user_new_form allows you to display the field when creating a new user.
Here is an example that adds a Company Name field:
<?php
function custom_user_profile_fields($user) {
$company = '';
if (is_object($user) && isset($user->ID)) {
$company = get_user_meta($user->ID, 'company', true);
}
?>
<h2>Additional Profile Information</h2>
<table class="form-table">
<tr>
<th>
<label for="company">Company Name</label>
</th>
<td>
<input
type="text"
class="regular-text"
name="company"
id="company"
value="<?php echo esc_attr($company); ?>"
/>
<p class="description">
Enter the user's company name.
</p>
</td>
</tr>
</table>
<?php
}
add_action('show_user_profile', 'custom_user_profile_fields');
add_action('edit_user_profile', 'custom_user_profile_fields');
add_action('user_new_form', 'custom_user_profile_fields');
Understanding the WordPress User Profile Hooks
The three hooks in the example serve different purposes.
show_user_profile
The show_user_profile hook is used when displaying the profile page for the current user.
edit_user_profile
The edit_user_profile hook allows you to add fields to the profile editing screen when an existing user is being edited.
user_new_form
The user_new_form hook is particularly useful when you want the custom field to appear on the Add New User screen.
This is important because adding a field to an existing user's profile does not automatically make it appear when creating a new user.
Step 2: Save the Custom User Field
Displaying a field is only part of the process. You also need to save its value as user metadata when a user is created or updated.
WordPress provides the user_register action for newly registered users and profile_update for updates to existing user profiles.
Use the following code:
<?php
function save_custom_user_profile_fields($user_id) {
if (!current_user_can('manage_options')) {
return;
}
if (isset($_POST['company'])) {
update_user_meta(
$user_id,
'company',
sanitize_text_field(wp_unslash($_POST['company']))
);
}
}
add_action('user_register', 'save_custom_user_profile_fields');
add_action('profile_update', 'save_custom_user_profile_fields');
How the Save Function Works
The function performs several important steps.
Check User Permissions
The current_user_can() check prevents users without the required capability from modifying the custom field through this functionality.
Check Whether the Field Exists
The isset() check ensures that the code only attempts to save the value when the company field has been submitted.
Sanitize the Input
sanitize_text_field() is used to clean the submitted company name before it is stored.
Save the Value as User Metadata
update_user_meta() stores the custom value against the user's ID using company as the metadata key.
How to Display the Saved Custom Field
Once the company name has been stored, you can retrieve it anywhere in WordPress using get_user_meta().
<?php$company = get_user_meta($user_id, 'company', true);echo esc_html($company);
The third parameter, true, tells WordPress to return a single value rather than an array of values.
Complete WordPress Custom User Field Example
If you want the complete functionality in one place, you can combine the field display and saving logic like this:
<?php
function custom_user_profile_fields($user) {
$company = '';
if (is_object($user) && isset($user->ID)) {
$company = get_user_meta($user->ID, 'company', true);
}
?>
<h2>Additional Profile Information</h2>
<table class="form-table">
<tr>
<th>
<label for="company">Company Name</label>
</th>
<td>
<input
type="text"
class="regular-text"
name="company"
id="company"
value="<?php echo esc_attr($company); ?>"
/>
<p class="description">
Enter the user's company name.
</p>
</td>
</tr>
</table>
<?php
}
add_action('show_user_profile', 'custom_user_profile_fields');
add_action('edit_user_profile', 'custom_user_profile_fields');
add_action('user_new_form', 'custom_user_profile_fields');
function save_custom_user_profile_fields($user_id) {
if (!current_user_can('manage_options')) {
return;
}
if (isset($_POST['company'])) {
update_user_meta(
$user_id,
'company',
sanitize_text_field(wp_unslash($_POST['company']))
);
}
}
add_action('user_register', 'save_custom_user_profile_fields');
add_action('profile_update', 'save_custom_user_profile_fields');
Note: If you copy the complete example, make sure the final profile_update line uses matching quotation marks:
add_action('profile_update', 'save_custom_user_profile_fields');
Where Should You Add This Code?
You can place the functionality in your theme's functions.php file, but a small custom plugin is often a better choice for site functionality.
Putting the code in a plugin means your custom user-profile functionality can continue working even if you change the website's theme.
Best Practices for WordPress Custom User Fields
- Use unique metadata keys: Choose a descriptive key such as
companyto avoid conflicts. - Sanitize submitted data: Clean user input before storing it.
- Escape output: Use functions such as
esc_attr()andesc_html()when displaying stored values. - Check capabilities: Restrict who can modify sensitive user information.
- Use a custom plugin: Keep site functionality separate from presentation when practical.
- Use appropriate field types: Choose text fields, select boxes, checkboxes, or other controls based on the information you need to collect.
Frequently Asked Questions
How do I add a custom field to a WordPress user profile?
You can add a custom field by using WordPress user-profile hooks such as show_user_profile, edit_user_profile, and user_new_form. The field value can then be stored using WordPress user metadata.
How do I add a custom field to the Add New User screen in WordPress?
Use the user_new_form action hook to display your custom field on the WordPress Add New User screen. You can then save its value with the user_register action.
How do I save custom user fields in WordPress?
Use update_user_meta() to save custom profile information as user metadata. The user_register and profile_update hooks can be used when a user is created or updated.
Where does WordPress store custom user profile fields?
Custom user profile values created with update_user_meta() are stored as user metadata in WordPress. Each value is associated with a specific user ID and metadata key.
Can I add multiple custom fields to a WordPress user profile?
Yes. You can add multiple fields by creating additional form controls and storing each value with a separate user-meta key.
Can I add custom fields for specific WordPress user roles?
Yes. You can use WordPress roles and capabilities to conditionally display or save custom profile fields for particular users.
Do I need a plugin to add custom WordPress user fields?
No. Developers can create custom user fields using WordPress hooks and user metadata. For larger projects, a custom plugin can be used to keep the functionality organized and independent of the theme.
Conclusion
Adding custom fields to WordPress user profiles gives developers more flexibility when a website needs information beyond the default WordPress profile fields. By combining show_user_profile, edit_user_profile, and user_new_form with update_user_meta(), you can create custom profile fields that work across user creation and profile editing screens.
In this example, we added a Company Name field, displayed it on the relevant WordPress user screens, sanitized the submitted value, and saved it as user metadata.
Last updated: