Easily Show and Edit User Meta in WordPress Using a foreach Loop
As a WordPress developer, one of the common tasks you may encounter is the need to display and edit user meta data on the user profile page. This can be particularly useful when you want to add custom fields to the user profile, such as social media links or other relevant information.
In this article, we'll explore a simple and efficient approach to achieving this using a foreach
loop. By the end of this post, you'll have a solid understanding of how to create a custom user profile fields section and seamlessly integrate it into your WordPress site.
Understanding User Meta in WordPress
In WordPress, user meta data is stored in the wp_usermeta
table, which is part of the WordPress database. This table contains key-value pairs associated with each user, allowing you to store and retrieve additional information beyond the default user fields.
To access and update user meta data, WordPress provides a set of built-in functions, such as get_the_author_meta()
and update_user_meta()
. These functions make it easy to interact with the user meta data programmatically.
Creating a Custom User Profile Fields Section
Let's dive into the implementation process. We'll start by creating a custom user profile fields section that will be displayed on the user profile page.
Here's an example of a mysite_show_extra_profile_fields()
function that you can use:
function mysite_show_extra_profile_fields($user) {
print('<h2>Social Profiles Information</h2>');
print('<table class="form-table">');
$meta_number = 0;
$mysite_custom_meta_fields = mysite_custom_define();
// Match keys as defined in mysite_custom_define().
$custom_meta_fields_desc = array(
'facebook' => 'Description for Facebook',
'instagram' => 'Description for Instagram',
'twitter' => 'Description for Twitter',
);
foreach ($mysite_custom_meta_fields as $meta_field_name => $meta_disp_name) {
$meta_number++;
print('<tr>');
print('<th><label for="' . $meta_field_name . '">' . $meta_disp_name . '</label></th>');
print('<td>');
print('<input type="url" name="' . $meta_field_name . '" id="' . $meta_field_name . '" value="' . esc_attr( get_the_author_meta($meta_field_name, $user->ID ) ) . '" class="regular-text code" /><br />');
$desc = isset( $custom_meta_fields_desc[ $meta_field_name ] ) ?
$custom_meta_fields_desc[ $meta_field_name ] :
'Fill in the complete URL of your ' . $meta_disp_name;
print('<p class="description">' . $desc . '</p>');
print('</td>');
print('</tr>');
}
print('</table>');
}
In this example, the mysite_show_extra_profile_fields()
function takes a $user
parameter, which represents the current user being displayed on the profile page.
The function first prints an <h2>
heading to label the custom user profile fields section. It then creates a <table>
element to display the fields in a structured manner.
Next, the function uses a foreach
loop to iterate over the custom meta fields defined in the mysite_custom_define()
function (which we'll cover shortly). For each meta field, the function:
- Prints a
<tr>
element to represent a table row.
- Prints a
<th>
element with a label for the meta field.
- Prints a
<td>
element containing an <input>
field to display and edit the meta value.
- Prints a
<p>
element with a description for the meta field.
The $custom_meta_fields_desc
array is used to provide custom descriptions for each meta field. If a description is not available for a specific field, a default description is used.
Now, let's define the mysite_custom_define()
function, which is responsible for storing the custom meta field names and their corresponding display names:
function mysite_custom_define() {
return array(
'facebook' => 'Facebook Profile',
'instagram' => 'Instagram Profile',
'twitter' => 'Twitter Profile',
);
}
In this example, the mysite_custom_define()
function returns an associative array where the keys represent the meta field names and the values represent the display names for those fields.
To integrate this custom user profile fields section into your WordPress site, you'll need to hook the mysite_show_extra_profile_fields()
function into the show_user_profile
and edit_user_profile
actions. Add the following code to your WordPress plugin or theme's functions.php file:
add_action('show_user_profile', 'mysite_show_extra_profile_fields');
add_action('edit_user_profile', 'mysite_show_extra_profile_fields');
Now, when a user visits their profile page or the admin user edit page, the custom user profile fields section will be displayed.
Saving the User Meta Data
The next step is to ensure that the user-entered data in the custom profile fields is saved to the database. To achieve this, we'll create a mysite_save_extra_profile_fields()
function that will be hooked into the personal_options_update
and edit_user_profile_update
actions.
function mysite_save_extra_profile_fields($user_id) {
if (!current_user_can('edit_user', $user_id)) {
return false;
}
$mysite_custom_meta_fields = mysite_custom_define();
foreach ($mysite_custom_meta_fields as $meta_field_name => $meta_disp_name) {
if (isset($_POST[$meta_field_name])) {
update_user_meta($user_id, $meta_field_name, sanitize_text_field($_POST[$meta_field_name]));
}
}
}
add_action('personal_options_update', 'mysite_save_extra_profile_fields');
add_action('edit_user_profile_update', 'mysite_save_extra_profile_fields');
In this mysite_save_extra_profile_fields()
function, we first check if the current user has the capability to edit the user profile. This is an important security measure to ensure that only authorized users can save the custom meta data.
Next, we iterate over the custom meta fields defined in the mysite_custom_define()
function. For each field, we check if the corresponding form field was submitted in the $_POST
data. If so, we use the update_user_meta()
function to save the user-entered value to the database.
The sanitize_text_field()
function is used to sanitize the input data before saving it, which helps to prevent potential security vulnerabilities.
Finally, we hook the mysite_save_extra_profile_fields()
function into the personal_options_update
and edit_user_profile_update
actions, which ensures that the custom meta data is saved whenever the user profile is updated.
Displaying the User Meta Data
Now that we have the custom user profile fields set up and saved, we can display the user meta data in various parts of our WordPress site. Here's an example of how you can retrieve and display the user meta data using the get_the_author_meta()
function:
$facebook_url = get_the_author_meta('facebook', $user->ID);
if (!empty($facebook_url)) {
echo '<a href="' . esc_url($facebook_url) . '" target="_blank">Facebook</a>';
}
$instagram_url = get_the_author_meta('instagram', $user->ID);
if (!empty($instagram_url)) {
echo '<a href="' . esc_url($instagram_url) . '" target="_blank">Instagram</a>';
}
$twitter_url = get_the_author_meta('twitter', $user->ID);
if (!empty($twitter_url)) {
echo '<a href="' . esc_url($twitter_url) . '" target="_blank">Twitter</a>';
}
In this example, we use the get_the_author_meta()
function to retrieve the user meta data for the facebook
, instagram
, and twitter
fields. We then check if the meta values are not empty and display them as links.
You can integrate this code snippet into your WordPress theme or plugin to display the user's social media profiles on various pages, such as the author bio, post meta, or user archive pages.
Conclusion
In this article, we've explored a simple and efficient way to display and edit user meta data in WordPress using a foreach
loop. By creating a custom user profile fields section and integrating it into your WordPress site, you can easily add additional information to your users' profiles and leverage that data throughout your application.
Remember, the approach demonstrated here is just one example, and you can further extend it to suit your specific requirements. For instance, you could add validation rules, retrieve the user meta data using AJAX, or integrate the custom user profile fields with other WordPress functionality.
If you're looking to take your website's user experience to the next level, consider using a tool like Flowpoint.ai to identify technical errors and generate AI-driven recommendations to boost your conversion rates.
Happy coding
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.