Add custom user meta fields in WordPress

In our pervious blog we did learn of how to show WordPress Users. In this particular blog we will learn how to display social links.

For complete knowledge visit the previous blog.

Below is our pervious final code for displaying WordPress Users:

<?php
	$professional_users = get_users([
			'paged' => 3
	]);
?>          
        <div class="row">
                <?php
                    if ( ! empty( $professional_users ) && is_array( $professional_users ) ) {
                    	foreach ( $professional_users as $professional_user ) {
                    		$user_bio = get_user_meta( $professional_user->data->ID, 'description', true );
		                    $user_image_url = get_avatar_url( $professional_user->data->ID, [
		                    		'size' => 295
							] );
                    		?>
		                    <div class="landing-team-card" style="">
			                    <img src="<?php echo esc_url( $user_image_url ); ?>" class="Landing-team-img" alt="" width="295" height="362">
			                    <h5 class="team-card-name"><?php echo esc_html( $professional_user->data->display_name ); ?></h5>
			                    <p class="team-card-job"><?php echo esc_html( $user_bio ); ?></p>
			                    <nav class="team-card-social-links">
				                    <a href="">Fb</a>
				                    <a href="">Tw</a>
				                    <a href="">In</a>
			                    </nav>
		                    </div>
	                        <?php
	                    }
                    }
                 ?>
           </div>

Basically the next thing that we want to display are Social links. And how do we do that? We need to hook on to a WordPress action add_action(). How? Lets see.

add_action('show_user_profile', 'my_user_profile_edit_action');
add_action('edit_user_profile', 'my_user_profile_edit_action');
function my_user_profile_edit_action($user) {
  $checked = (isset($user->artwork_approved) && $user->artwork_approved) ? ' checked="checked"' : '';
?>
  <-- Write your html here -->
<?php 
}

Particularly we don’t have any default option in WordPress to social links for Users. For which we need to create a meta field. The point is that how do we create that particular new user meta field for users.

You can write below code into your functions.php to hook into the user profile actions and add a new field.

To add the filed to the form you can hook into the show_user_profile and edit_user_profile action and output the html field.

add_action('show_user_profile', 'my_user_profile_edit_action');
add_action('edit_user_profile', 'my_user_profile_edit_action');
function my_user_profile_edit_action($user) {
?>
  <-- Write your HTML here -->
<?php 
}

Then you need to hook into the personal_options_update and edit_user_profile_update actions, get the value of your field and save this as user meta.

add_action('personal_options_update', 'my_user_profile_update_action');
add_action('edit_user_profile_update', 'my_user_profile_update_action');
function my_user_profile_update_action($user_id) {
  update_user_meta($user_id, 'your_meta_key', ($_POST['artwork_approved']);
}

The condition will be shown as below:

if (get_user_meta($current_user->ID, 'your_meta_key', true)) {

Particularly you need to create a new php file. I am going to name it users.php because it sounds relevant and is related to users social links ( You can use your own). Plus it makes easier for us to locate files in future. Make sure to include the path of this particular file to you functions.php file.

Let’s hook on to the action shown in our above code and assign the value.

<?php

/**
 * Create User Meta field form.
 *
 * This will be visible in WordPress dashboard > Users > Profile
 * @param $user
 */
function oleez_user_profile_edit_action($user) {
	$facebook_link = (isset($user->facebook_link) && $user->facebook_link) ? $user->facebook_link : '';
	?>
	<h3>Social Links</h3>
	<!--Facebook-->
	<label for="facebook_link">
		Facebook Link
		<input name="facebook_link" type="text" id="facebook_link" value="<?php echo $facebook_link; ?>">
	</label>
	<br>
	<?php
}
add_action('show_user_profile', 'oleez_user_profile_edit_action');
add_action('edit_user_profile', 'oleez_user_profile_edit_action');

/**
 * Add/update the user meta key and value in the database.
 *
 * @param $user_id
 */
function oleez_user_profile_update_action($user_id) {
	update_user_meta($user_id, 'facebook_link', $_POST['facebook_link']);
}
add_action('personal_options_update', 'oleez_user_profile_update_action');
add_action('edit_user_profile_update', 'oleez_user_profile_update_action');

Time to explain the steps and the process.

I want you to follow the below steps to get this right. As below is the explanation of what exactly is getting executed.

  • Now i want you to Create a User Meta field form.
  • This will be visible in WordPress dashboard > Users > Profile. How
  • Create a function oleez_user_profile_edit_action (name doesn’t matter). Now $user becomes available inside of this hooked function
  • We are using an isset() function to check if the value $user->facebook_link exists
	$facebook_link = (isset($user->facebook_link) && $user->facebook_link) ? $user->facebook_link : '';
  • Here we are checking if Facebook link exist in database then we set its value to facebook_link else an empty string.
<h3>Social Links</h3>
	<!--Facebook-->
	<label for="facebook_link">
		Facebook Link
		<input name="facebook_link" type="text" id="facebook_link" value="<?php echo $facebook_link; ?>">
	</label>
	<br>
	<?php
}
add_action('show_user_profile', 'oleez_user_profile_edit_action');
add_action('edit_user_profile', 'oleez_user_profile_edit_action');

/**
 * Add/update the user meta key and value in the database.
 *
 * @param $user_id
 */
function oleez_user_profile_update_action($user_id) {
	update_user_meta($user_id, 'facebook_link', $_POST['facebook_link']);
}
add_action('personal_options_update', 'oleez_user_profile_update_action');
add_action('edit_user_profile_update', 'oleez_user_profile_update_action');

  • Second things we are doing is creating a <label >and < input>. What is the input type? Well its text as you can see.
  • We have provided it an ID of facebook_link
  • Whatever we want to output will go inside if the value tab which is $facebook_link. Because that is what we want.
  • Well what i have done is that, I had to hook it onto an add_action function. which would be shown below. I dont want you guys to be confused with names that i am using because we can use our own prefix to make is sound relevant.
    add_action('show_user_profile', 'oleez_user_profile_edit_action');
    add_action('edit_user_profile', 'oleez_user_profile_edit_action');
  • Along with showing the user profile action we also need to hook onto edit user profile action as mentioned above. Because in future if we need to make any kind of change it should also have an edit option.
  • Apart from this we also need to Add/Update the user meta key and value in the database.
  • So let’s Create a function (random name. Doesn’t matter). Inside of parentheses pass $user_id
  • Well we need to use a WordPress function update_user_meta(). And what does it require – (parameters).
  • It requires $user_id, $meta_key, $meta_value as params.
  • Hence we provide it the $user_Id, meta key which would be facebook_link and a value $_POST[‘facebook_link’]. And everything together should look something like this.
	update_user_meta($user_id, 'facebook_link', $_POST['facebook_link']);

Finally we need to hook onto add_action function for execution.

add_action('personal_options_update', 'oleez_user_profile_update_action');
add_action('edit_user_profile_update', 'oleez_user_profile_update_action');

We are using WordPress hook personal_options_update in the second place holder we are executing the oleez_user_profile_update_action function that we created.

Let’s go ahead and add few more social link follow the above steps.

And this is what it look’s like in the end:

<?php

/**
 * Create User Meta field form.
 *
 * This will be visible in WordPress dashboard > Users > Profile
 * @param $user
 */
function oleez_user_profile_edit_action($user) {
	$facebook_link = (isset($user->facebook_link) && $user->facebook_link) ? $user->facebook_link : '';
	$twitter_link = (isset($user->twitter_link) && $user->twitter_link) ? $user->twitter_link : '';
	$twitter_link = (isset($user->instagram_link) && $user->instagram_link) ? $user->instagram_link : '';
	?>
	<h3>Social Links</h3>
	<!--Facebook-->
	<label for="facebook_link">
		Facebook Link
		<input name="facebook_link" type="text" id="facebook_link" value="<?php echo $facebook_link; ?>">
	</label>
	<br>
	<br>
	<!--Twitter-->
	<label for="twitter_link">
		Twitter Link
		<input name="twitter_link" type="text" id="twitter_link" value="<?php echo $twitter_link; ?>">
	</label>
	<label for="Instagram_link">
		Instagram Link
		<input name="instagram_link" type="text" id="instagram_link" value="<?php echo $instagram_link; ?>">
	</label>
	<?php
}
add_action('show_user_profile', 'oleez_user_profile_edit_action');
add_action('edit_user_profile', 'oleez_user_profile_edit_action');

/**
 * Add/update the user meta key and value in the database.
 *
 * @param $user_id
 */
function oleez_user_profile_update_action($user_id) {
	update_user_meta($user_id, 'facebook_link', $_POST['facebook_link']);
	update_user_meta($user_id, 'twitter_link', $_POST['twitter_link']);
	update_user_meta($user_id, 'instagram_link', $_POST['instagram_link']);
}
add_action('personal_options_update', 'oleez_user_profile_update_action');
add_action('edit_user_profile_update', 'oleez_user_profile_update_action');

Next step is to show this information. Where? Well in your html file. Let’s see how?

<?php
                    if ( ! empty( $professional_users ) && is_array( $professional_users ) ) {
                    	foreach ( $professional_users as $professional_user ) {
                    		$user_bio = get_user_meta( $professional_user->data->ID, 'description', true );
		                    $facebook_link = get_user_meta( $professional_user->data->ID, 'facebook_link', true );
							          $twitter_link = get_user_meta( $professional_user->data->ID, 'twitter_link', true );
							          $instagram_link = get_user_meta( $professional_user->data->ID, 'instagram_link', true);
		                    $user_image_url = get_avatar_url( $professional_user->data->ID, [
		                    		'size' => 295
							] );
                    		?>
		                    <div class="landing-team-card" style="">
			                    <img src="<?php echo esc_url( $user_image_url ); ?>" class="Landing-team-img" alt="" width="295" height="362">
			                    <h5 class="team-card-name"><?php echo esc_html( $professional_user->data->display_name ); ?></h5>
			                    <p class="team-card-job"><?php echo esc_html( $user_bio ); ?></p>
			                    <nav class="team-card-social-links">
				                    <a href="<?php echo esc_url( $facebook_link ); ?>">Fb</a>
				                    <a href="<?php echo esc_url( $twitter_link ); ?>">Tw</a>
				                    <a href="<?php echo esc_url( $instagram_link); ?>">In</a>
			                    </nav>
		                    </div>
	                        <?php
	                    }
                    }
                ?>

Now we use get_user_meta() to fetch the data stored for user meta fields with names facebook_link , twiiter_link and instagram_link

The third parameter true means we want a single value as response from the get_user_meta() and not an array.

Now all we have to do is echo out these links in href of the <a>

That’s all folks!

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: