Add Custom User And Display Users in WordPress

How to show the latest WordPress Users with their avatar url, display name, title( use bio field in WordPress for this )

In this particular blog we will learn of how to add custom user meta field in WordPress and also a way to Display users in WordPress along with their name avatar, url and social links.

Let’s get started.

Step 1:

Firstly if you are looking to add a feature where you can display multiple users and their work in WordPress. These are the steps you need to follow.

Add Users

  • Go to your WordPress admin dashboard.
  • WordPress > Dashboard > Users > Add New.
  • Add new user.
  • Enter the required Username (you can create your own) along with a valid Email address.
  • Add the First Name and the Last name that you want to display.
  • Enter the Website Url.
  • You can create your own Password or you can choose the one that WordPress has to offer.
  • Check Send the new user an email about their account if you feel like or you can leave it unchecked.
  • Under the Role field add yourself as an Administrator
  • Click on Add new user.
  • You can Add as many Users as you want.
Add User Page

If you want to view the details of all the users.

WordPress > Dashboard > Users > All Users

It should look something like this:

Users are added through dashboard and their data is stored in WordPress database (PhpMyAdmin).

  • Go to (http://localhost:8888/phpmyadmin).
  • Go to WordPress

All the data that you feed and change is stored here (make sure to not make any changes on this page).


Step 2:

  • Create a folder Includes.
  • Create a new file user.php (The name doesn’t matter as far as it makes sense. I am going to name it user.php as we are creating a section to display multiple users and their profile).
  • assets > includes > user.php

Inside of user.php we are going to write our functions and make sure to include this file in your functions.php file as shown below:

include_once 'includes/users.php';

I already have my HTML and CSS written. You can use your own ideas and design. What we are going to learn here is of how to make this particular section dynamic. And of how to add the features as mentioned above.

By this time we already know of how to Add Users. Now we are going to learn of how to display these users along with their avatar.

We are now going to get the user details with a WordPress function get_users()


Step 3

  • Follow your WordPress theme file > assets > templates-parts > (Your php file).
  • Register a variable inside of your php file. The best way to do it will be at the top of the file page.
<?php
	$professional_users = get_users([
			'paged' => 3
	]);
?>
  • In particular have declared a variable $professional_users
  • Assigned it a value of get_users()
  • Inside of get_users(WordPress function) I have created an associative array[] with ‘key‘ and their ‘key value pair’.
  • Page is for the number of pages i want to display, which is 3.

Step 4:

Nevertheless we need to run the if () | foreach() loop to display the data dynamically and i will show you exactly how.

<div class="row">
                <?php
                    if ( ! empty( $professional_users ) && is_array( $professional_users ) ) {
                    	foreach ( $professional_users as $professional_user ) {
                    	
		                    <div class="landing-team-card" style="">
			                    <img src="www.placeholder.com" 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">Web Developer</p>
			                    <nav class="team-card-social-links">
				                    <a href="#!">Fb</a>
				                    <a href="#!">Tw</a>
				                    <a href="#!">In</a>
			                    </nav>
		                    </div>
	                        <?php
	                    }
                    }
                ?>
            </div>
  • Create an opening <div> with a </div>. class name you prefer. I am going to name is row.
  • Open a php tag <?php ?> (inside of this php tag i want you you run the if() and foreach() loop along with the required HTML.
  • Inside of if statement i am going to pass an argument. if (! empty($professional_users) && is_array($professional_users)) {} perform the action declared inside of curly brackets.
  • Inside of foreach i am going to declared a condition. foreach ( $professional_users as $professional_user ) {} (fetch and display the data inside of the curly brackets ).
  • What all do i want to display. I want to display User bio along with the Name, Avatar and social ID.
  • After passing the argument inside of foreach loop parentheses open { }
  • Declared a variable $user_bio (You can name it anything you want. Just should make sense) and what are we asking it to do. get_user_meta ( ). What are the parameter ( $user_id ((Required) User ID), $key ((string) ), $single ((bool) (Optional) Whether to return a single value. This parameter has no effect if $key is not specified. Default value: false).

Now we have successfully displayed our user under $professional users inside of data and what we are displaying is the Name.

<?php echo esc_html( $professional_user->data->display_name ); ?>


Step 5 (Display Profile)

Next feature that we are going to display is user profile. How can we do that? Through function get_user_meta ().

Next feature that we are going to display is user profile. How can we do that? Through function get_user_meta ().

In your WordPress > Dashboard > Users > Select the user for whom you want to display the information > Edit.

What i want to display in my bio is WordPress Developer.

Under About Yourself section inside of Biographical info i am going to save the bio information.

We are going to hook on to a function to display this information which is get_user_meta(). We need to check what are the parameters. It requires $user_id, the meta key to retrieve and Whether to return a single value. How we find the key value pair. Well we need to check where is the About Yourself data from the Dashboard is stores. And yes it is phpmyadmin.

Go to phpmyadmin > WordPress > wp_usermeta. I will look for the meta_value which is Web Developer(thats the information that i want to display) and its meta_key(coz that’s what we are looking for).

We have the meta_key which is description. And we are using an arrow as it is an object. The code should be something as shown below:

$user_bio = get_user_meta( $professional_user->data->ID, 'description', true );


<!-- get professional user data by id, key is description. description is where it has the bio and true coz its single -->

Inside of the loop foreach loop i am going add the above mentioned code. $user_bio (name does not matter). The complete code should look something as below:

           <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 );

		                    <div class="landing-team-card" style="">
			                    <img src="www.placeholder.com" 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>

In particular where do i have to display the information? If you look closely inside of <p> tag. You will get the idea.

<p class=”team-card-job”><?php echo esc_html( $user_bio ); ?></p>.

The next feature that we want to display is the avatar (Image) of the authors or users. How? With get_avatar_url()

$user_image_url = get_avatar_url( $professional_user->data->ID, [
		                    		'size' => 295
							] );
  • Declare a variable $user_image_url (just a random name). Parameters > get_avatar_url( (The variable we created) $professional_user -> ID -> array[( Inside of array you can write the required css ]).
  • What we need to do next is to show the image. Where?
<?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="www.placeholder.com" 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
	                    }
                    }
                ?>
            </div>

Replace the <img scr=”” with a WordPress function inside of php as shown below:

<?php echo esc_url( $user_image_url ); ?>

The final code should appear same as shown below:

<?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="<?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
	                    }
                    }
                 ?>
           </div>

Last but not the least…

I hope you found this blog useful. If you did. Go ahead and try for yourself : ) .

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: