Add Custom Fields to User Profiles in WordPress Without Using Plugins

WordPress provides user profiles as a fundamental feature to store essential information about users. However, the default profile fields may not always meet specific requirements for your website or application. In such cases, adding custom fields to user profiles can be a powerful solution. In this tutorial, we will guide you through the process of programmatically adding custom fields to user profiles in WordPress. We will focus on using a child theme and code snippets to achieve this functionality, without relying on plugins. Additionally, we will cover how to display the custom field value on the front-end of your website.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Register the Custom Field

In your child theme’s functions.php file, register the custom field using the user_contactmethods filter hook. This code snippet will add the custom field to the user profile editing page.

function custom_user_profile_fields( $user_contactmethods ) {
	$user_contactmethods['custom_field_name'] = 'Custom Field Label';
	return $user_contactmethods;
}
add_filter( 'user_contactmethods', 'custom_user_profile_fields' );
Code language: PHP (php)

In the code above, replace 'custom_field_name' with the desired field name (e.g., ‘phone_number’) and 'Custom Field Label' with the label you want to display for the custom field (e.g., ‘Phone Number’).

Display the Custom Field in User Profile

After registering the custom field, we need to display it on the user profile page. To display the custom field on the user profile page, modify the functions.php file by adding the following code snippet. This will render the custom field input within the user profile form.

function display_custom_user_profile_fields( $user ) {
	?>
	<h3>Custom Fields</h3>
	<table class="form-table">
		<tr>
			<th><label for="custom_field_name">Custom Field Label</label></th>
			<td>
				<input type="text" name="custom_field_name" id="custom_field_name" value="<?php echo esc_attr( get_the_author_meta( 'custom_field_name', $user->ID ) ); ?>" class="regular-text" /><br />
				<span class="description">Enter your custom field value.</span>
			</td>
		</tr>
	</table>
	<?php
}
add_action( 'show_user_profile', 'display_custom_user_profile_fields' );
add_action( 'edit_user_profile', 'display_custom_user_profile_fields' );
Code language: PHP (php)

Replace 'custom_field_name' with the field name you used in Step 2 and 'Custom Field Label' with the label you want to display for the custom field.

Save the Custom Field Value

To ensure that the custom field value gets saved, we need to update the user’s metadata when the profile is saved. Add the following code snippet to your functions.php file:

function save_custom_user_profile_fields( $user_id ) {
	if ( ! current_user_can( 'edit_user', $user_id ) ) {
		return false;
	}
	update_user_meta( $user_id, 'custom_field_name', sanitize_text_field( $_POST['custom_field_name'] ) );
}
add_action( 'personal_options_update', 'save_custom_user_profile_fields' );
add_action( 'edit_user_profile_update', 'save_custom_user_profile_fields' );
Code language: PHP (php)

Again, replace 'custom_field_name' with the field name you used before.

Using the Custom Field on the Front-End

To use the newly added custom field on the front-end of your WordPress website, you’ll need to retrieve the field value and display it in the desired location within your theme templates. Here’s an example of how you can accomplish this:

Step 1: Locate the template file where you want to display the custom field value. This could be, for example, the user profile page or any other relevant template.

Step 2: Within the template file, add the following code snippet to retrieve and display the custom field value:

$user_id            = get_current_user_id(); // Get the ID of the current user
$custom_field_value = get_user_meta( $user_id, 'custom_field_name', true ); // Retrieve the custom field value

if ( ! empty( $custom_field_value ) ) {
	echo 'Custom Field Value: ' . $custom_field_value;
}
Code language: PHP (php)

Replace 'custom_field_name' with the field name you used in the previous steps.

Step 3: Save the template file, and the custom field value will now be displayed on the front-end for the respective user.

Note: Make sure that the template file you are editing is part of your child theme. Modifying parent theme files directly is not recommended, as your changes may be overwritten during theme updates.

By incorporating the above code snippet within the appropriate template file, you will be able to retrieve the custom field value and display it on the front-end of your WordPress website for the corresponding user.

Remember to customize the display of the custom field value according to your specific requirements, such as applying CSS styling or formatting the output as needed.

Add more custom fields

To add multiple custom fields to user profiles in WordPress, you can modify the custom_user_profile_fields and display_custom_user_profile_fields function to include additional fields. Here’s a full example of adding multiple custom fields and save them.

function custom_user_profile_fields($user_contactmethods) {
	// Add the first custom field
	$user_contactmethods['custom_field_name'] = 'Custom Field Label';
	// Add additional custom fields
	$user_contactmethods['custom_field2_name'] = 'Custom Field 2 Label';
	$user_contactmethods['custom_field3_name'] = 'Custom Field 3 Label';

	// Continue adding more custom fields as needed...

	return $user_contactmethods;
}
add_filter('user_contactmethods', 'custom_user_profile_fields');

function display_custom_user_profile_fields($user) {
	?>
	<h3>Custom Fields</h3>
	<table class="form-table">
		<tr>
			<th><label for="custom_field_name">Custom Field Label</label></th>
			<td>
				<input type="text" name="custom_field_name" id="custom_field_name" value="<?php echo esc_attr( get_the_author_meta( 'custom_field_name', $user->ID ) ); ?>" class="regular-text" /><br />
				<span class="description">Enter your custom field value.</span>
			</td>
		</tr>
		<tr>
			<th><label for="custom_field2_name">Custom Field 2 Label</label></th>
			<td>
				<input type="text" name="custom_field2_name" id="custom_field2_name" value="<?php echo esc_attr( get_the_author_meta( 'custom_field2_name', $user->ID ) ); ?>" class="regular-text" /><br />
				<span class="description">Enter your custom field 2 value.</span>
			</td>
		</tr>
		<tr>
			<th><label for="custom_field3_name">Custom Field 3 Label</label></th>
			<td>
				<input type="text" name="custom_field3_name" id="custom_field3_name" value="<?php echo esc_attr( get_the_author_meta( 'custom_field3_name', $user->ID ) ); ?>" class="regular-text" /><br />
				<span class="description">Enter your custom field 3 value.</span>
			</td>
		</tr>
		<!-- Add more table rows for additional custom fields -->
	</table>
	<?php
	}
	add_action( 'show_user_profile', 'display_custom_user_profile_fields' );
	add_action( 'edit_user_profile', 'display_custom_user_profile_fields' );

	function save_custom_user_profile_fields( $user_id ) {
		if ( ! current_user_can( 'edit_user', $user_id ) ) {
			return false;
		}

		// Save the values of the custom fields
		update_user_meta( $user_id, 'custom_field_name', sanitize_text_field( $_POST['custom_field_name'] ) );
		update_user_meta( $user_id, 'custom_field2_name', sanitize_text_field( $_POST['custom_field2_name'] ) );
		update_user_meta( $user_id, 'custom_field3_name', sanitize_text_field( $_POST['custom_field3_name'] ) );

		// Save values for additional custom fields
		// update_user_meta($user_id, 'custom_field4_name', sanitize_text_field($_POST['custom_field4_name']));
		// update_user_meta($user_id, 'custom_field5_name', sanitize_text_field($_POST['custom_field5_name']));
		// ...
	}
	add_action( 'personal_options_update', 'save_custom_user_profile_fields' );
	add_action( 'edit_user_profile_update', 'save_custom_user_profile_fields' );

Code language: PHP (php)

In the code above, we added two additional custom fields and added two additional table rows for the custom fields(custom_field2_name and custom_field3_name). You can continue this pattern to add as many custom fields as you require.

Similarly, in the save_custom_user_profile_fields function, we added the respective update_user_meta lines to save the values of the custom fields. Uncomment and modify those lines to include saving for additional custom fields.

Remember to replace 'Custom Field Label', 'Custom Field 2 Label', and 'Custom Field 3 Label' with the desired labels for each custom field.

With these modifications, you can include multiple custom fields in the table markup on the user profile editing page, and the values will be saved when the user profile is updated.

That’s it! You have successfully learned how to add custom fields to user profiles in WordPress without relying on plugins. Adding custom fields to user profiles programmatically in WordPress allows you to collect specific information from users that goes beyond the default profile fields. By following the steps outlined in this tutorial, you can extend the functionality of user profiles and tailor them to your unique requirements. Remember to leverage a child theme and code snippets to maintain the integrity and flexibility of your WordPress setup.