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:
- 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.
-
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.
-
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, in the Basic section, 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/datatables@1.10.18/media/css/jquery.dataTables.min.css', '1.10.18', true ); wp_enqueue_script( 'datatable-script', 'https://cdn.jsdelivr.net/npm/datatables@1.10.18/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(array( '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 theposition
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 in 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 in Frontend
- Create a Custom Avatar for User with Meta Box Plugin
- Display a User List On the Frontend with Meta Box
Other case studies you might be interested in
- Create A Dynamic Landing Page in WordPress Using Custom Field
- How to Create ACF Flexible Content Field with Meta Box
- How to Create a Product Page using Meta Box Plugin
- How to Add Related Posts to WordPress Using Meta Box
- How to Create a Classified Ads Website using Meta Box
- Create Posts Series in WordPress Using Meta Box
- How to Add Guest Author in WordPress using Meta Box (Part 1)
- How to Add Guest Author in WordPress using Meta Box (Part 2)
- Create Dynamic Favicon in WordPress using Meta Box plugin
- How to Build a Hotel Booking Website Using Meta Box – P1
- How to Build a Hotel Booking Website Using Meta Box – P2 – Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create an FAQs Page Using Meta Box
- How to Manually Reorder Posts with Meta Box
- How to Add Custom JavaScript Actions Using Button Field with Meta Box
- Display a User List On the Frontend with Meta Box
- How to Build a Hotel Booking Website Using Meta Box – P4 – Booking Management Page
- How to Filter Posts by Custom Fields and Custom Taxonomies on Archive Pages
- How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS
- Create an OTA Website Like Booking.com with Meta Box Plugin – P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin – P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin – P3: Create Filters for Single Hotel Pages
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Create Download Buttons Using Custom Fields with Meta Box Plugin
- How to Create a Recipe with Meta Box Plugin