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.

Create a new custom field for users to choose whether their account is private or public

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.

Set up to display the custom field 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:

the custom field

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

Create other custom fields for users to fill in more information

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:

*    Template Name: Users Listing Page
<?php get_header(); ?>
<h1>Users List</h1>
<table id="Userslist">
            <th>Start date</th>
            <th>Start date</th>
<?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.

Create the Users List page
Create the Users List page

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( [
    'meta_key'   => 'publish_account',
    'meta_value' => 'yes',
] );

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

        foreach ($users as $user) { $user_id = $user->ID; ?>
                <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>
<?php } ?>


  • $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:

the user list display on the frontend

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() {
} );

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:

the final result

Visit here to see the full source code:


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.

Want to try MB User Profile

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. How to Create ACF Flexible Content Field with Meta Box
  3. How to Create a Product Page using Meta Box Plugin
  4. How to Add Related Posts to WordPress Using Meta Box
  5. How to Create a Classified Ads Website using Meta Box
  6. Create Posts Series in WordPress Using Meta Box
  7. How to Add Guest Author in WordPress using Meta Box (Part 1)
  8. How to Add Guest Author in WordPress using Meta Box (Part 2)
  9. Create Dynamic Favicon in WordPress using Meta Box plugin
  10. How to Build a Hotel Booking Website Using Meta Box - P1
  11. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  12. Create a Filter to Find Hotels by Location
  13. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  14. How to Create an FAQs Page Using Meta Box
  15. How to Manually Reorder Posts with Meta Box
  16. How to Add Custom JavaScript Actions Using Button Field with Meta Box
  17. Display a User List On the Frontend with Meta Box
  18. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  19. How to Filter Posts by Custom Fields and Custom Taxonomies on Archive Pages
  20. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS
  21. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  22. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  23. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  24. How to Add Custom Fields to Display Banners using Meta Box Plugin
  25. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  26. How to Create a Recipe with Meta Box Plugin
  27. How to Create an Auto-Updated Cheat Sheet in WordPress
  28. How to Create Online Admission Form for School or University
  29. How to Create Online Reservation Form for Restaurants using Meta Box
  30. How to Create Buttons with Dynamic Link using Custom Fields
  31. How to Create Category Thumbnails & Featured Images Using Custom Fields

2 thoughts on “Display a User List On the Frontend with Meta Box

  1. There's a tiny typo in one of the codeblocks (step 4):

    `$users = get_users(array(
    'meta_key' => publish_account',
    'meta_value' => 'yes'

    There's a quote missing right before publish_account.

Leave a Reply

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