Display a User List On the Frontend with Meta Box

When using WordPress, you probably already know about managing a user list in the Admin panel. This is also one of the needs that many people are interested in. Especially, people seem to have a higher demand to display users only when they want to publish their accounts.

So today, I will show you how to display the user list on the frontend with Meta Box plugin and publish the user accounts only when they are allowed by the owners, besides, hide the accounts that users don’t want to publish.

Before Getting Started

To show the user list on the frontend and set up it as I mentioned above, you will need to have these tools:

1. Meta Box: This is a free WordPress plugin that provides a framework for creating custom fields, so you definitely need to install and activate it. You can download the Meta Box plugin on WordPress.org.

2. Meta Box Builder: This is a paid premium extension of Meta Box so it helps you create custom fields with an intuitive user interface (UI) with easy drag-and-drop manipulations on the backend. If you can code to create a custom field, you can skip this extension. But there is another free tool if you still want to use UI, which is the Online Generator.

3. DataTables: It is a library that uses jQuery to add advanced features to tables in HTML. It helps you display and create functions with tables more easily.

Display a User List on the Frontend with Meta Box Plugin

Step 1: Create a New Custom Field for Users to Choose their Account Display Mode

To create a user listing page that has only accounts published by their users, I need to create a custom field for users to choose whether their account is private or public. Hence, I will use the Meta Box plugin to create this custom field.

First of all, go to Meta Box/Add new to create a new Field Group. Then, click Add Fields button, choose Radio for the field type.

You can see that I created two selections Yes/No in the Choices section, which means Publish/not Publish the user accounts. Also, I set the Default value of this field to Yes. I also named this field "Publish or not?" and use it to refer to this field in the next section. Depending on your demand, you can customize it as needed.

Let move to the Settings tab and choose User for the Show For section to display this field group on the User page.

Then, click Save and turn to the User page to check. If you do it properly, you can see the custom field look like this:

In addition, you can create other fields for users to fill in more information similarly. For example:

Step 2: Create a New Page on the Front End

In this step I will create a new page on the frontend without any content (I haven’t included the user list yet). At the same time, I will create a template for it.

First, go to the theme directory, create a new file named users-listing-page.php. Then, add the following code to it:

<?php
/*
*    Template Name: Users Listing Page
*/
?>
<?php get_header(); ?>
<h1>Users List</h1>
<table id="Userslist">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
<tbody>
        </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>
<?php get_footer(); ?>

Next, go to Page/Add new and create a new page called Users List. Now look at the Page Attributes section, you can see the Template tab. In this tab, select Users Listing Page. This is the Template Name that I created for the file above.

Step 3: Import the Library and JavaScript File to the Website

First, import the DataTables library prepared in step 1. Here, I didn’t download it but use it directly by CDN on jsDelivr.

To import the library and script file, you need to add this code to the functions.php file.

function libs_import() {
           wp_enqueue_style( 'datatable-style', 'https://cdn.jsdelivr.net/npm/[email protected]/media/css/jquery.dataTables.min.css', '1.10.18', true );
           wp_enqueue_script( 'datatable-script', 'https://cdn.jsdelivr.net/npm/[email protected]/media/js/jquery.dataTables.min.js', array( 'jquery' ) );
wp_enqueue_script( theme-script', get_template_directory_uri() . '/js/script.js' );
}
add_action( 'wp_enqueue_scripts', 'libs_import' );

After that, create a script.js file in the js folder of theme to write JavaScript.

Step 4: Display User List on the Front End

Now, open the users-listing-page.php file that we made in step 2 and follow these steps.
Use the following function to get users’ data only when the value of the "Publish or not?" field (the field’s ID is publish_account) is Yes:

$users = get_users( [
    'meta_key'   => 'publish_account',
    'meta_value' => 'yes',
] );

Next, we will use the foreach loop to get the users’ information and output html.

<?php
        foreach ($users as $user) { $user_id = $user->ID; ?>
        <tr>
                <td><?php echo $user->display_name; ?></td>
                <td><?php echo rwmb_meta( 'position', array( 'object_type' => 'user' ), $user_id ); ?></td>
                <td><?php echo rwmb_meta( 'office', array( 'object_type' => 'user' ), $user_id ); ?></td>
                <td><?php echo rwmb_meta( 'age', array( 'object_type' => 'user' ), $user_id ); ?></td>
                <td><?php echo rwmb_meta( 'start_date', array( 'object_type' => 'user' ), $user_id ); ?></td>
                <td>$<?php echo number_format(rwmb_meta( 'salary', array( 'object_type' => 'user' ), $user_id ),3,",","."); ?></td>
</tr>
<?php } ?>

Explanation:

• $user_id = $user->ID: this function helps to get user ID and assign it to $user_id.
• rwmb_meta( 'position', array( 'object_type' => 'user' ), $user_id ): this function is to get the value of the field with the position ID from user’s ID.

You will see the user list display on the frontend like this:

There is a problem that my list just has under 100 users but it looks pretty long. So, if the number of users on your website is much more than that, you will not be able to display it in just one page like this. That's why I need to use the DataTables library. This tool will help me paging, sorting, and searching data in tables more easily.

To use this library, you have to add this code to the script.js file.

$(document).ready(function() {
    $('#Userslist').DataTable();
} );

Note: #Userslist is the ID of the table I created from users-listing-page.php file before. You just need to replace your file’s ID when setting up this part.

In order not to set up more, I used the datatable under the form of Zero configuration. There are also many other customization options. You can refer to the library here to customize based on your needs!

And here is the final result:

Visit here to see the full source code:

https://github.com/wpmetabox/tutorials/tree/master/list-users

Final Words

After reading this tutorial, you can display the user list on the frontend with the support of Meta Box plugin, Meta Box Builder extension and Datatable jQuery. It is not complicated if you follow the steps, right?

In addition, Meta Box plugin also has many other applications, you can go here to learn more about the applications of this plugin in building useful features for your website.

• The Effortless Way to Create WordPress User Profile Forms
• How to Create Your WordPress Custom User Profile Page on Frontend
• Create a Custom Avatar for User with Meta Box Plugin
• Display a User List On the Frontend with Meta Box

• The Effortless Way to Create WordPress User Profile Forms
• How to Create Your WordPress Custom User Profile Page on Frontend
• Create a Custom Avatar for User with Meta Box Plugin
• Display a User List On the Frontend with Meta Box