User Listing

The User Listing module is available only with a Profile Builder Pro license.

Activating the User Listing module

In order to activate the User Listing module you will need to go to the Modules tab and under the User Listing status select Active then click Save Changes.

Profile Builder - User Listing - Activate Module

After this a new User Listing tab will show up in the Profile Builder Admin interface. You can now create Multiple User Listings to display your users in the front-end of your website in any way you desire.

Displaying your website users in the front-end can be achieved by using the User Listing shortcode.

Managing our User Listings

By navigating to the User Listing tab from the Profile Builder menu, you’ll notice a list of all the created User Listings and their specific shortcode.

From here you can also setup a new User Listing by clicking the Add New button at the top.

Profile Builder - User Listing - New User Listing

Note – If you haven’t yet created any User Listings, clicking the User Listing tab will take you directly to the Add New User Listing screen.

Creating a new User Listing

The Add New User Listing page will first asks you to enter a Title, followed by the User Listing Settings box. Then you can customize the All-Userlisting and Single-Userlisting Templates.

Note – The shortcode will be available after you publish the User Listing. Changing the form title also changes the shortcode.

Profile Builder - User Listing - Add New

User Listing Settings

Profile Builder - User Listing - Settings

Inside the User Listing Settings tab we can set the:

  • Roles to Display – Allows you to display only certain role(s) in the front-end User Listing. If not specified, defaults to all existing roles. If Admin Approval is set then users need to be approved in order to view them in the User Listing
  • Numbers of Users/Page – Control the number of users displayed on each page
  • Default Sorting Criteria– Sort by any Custom User Fields. Selecting the “Random” value will list a random list of users. WARNING: do not use this on a large database with over 10K users. It is extremely slow
  • Default Sorting Order – Sort Ascending or Descending
  • Avatar Size – Control over the Avatar size in both All-Userlisting and Single-Userlisting Templates
  • Visibility – Restrict the User Listing visibility to logged in users only (choose roles)

Faceted Menus

Profile Builder - User Listing - Faceted Menus

Faceted Menus lets you search users by selecting multiple options saved in user meta. Inside the Faceted Menus tab we can set the:

  • Label – Choose the facet name that appears on the frontend
  • Facet Type – Select the Type of Facet displayed on the User Listing page: Checkboxes, Select, Range or Search
  • Facet Meta – Choose the Meta field to add as a search option
  • Behaviour (only for Checkboxes Facet Type)
    • Narrow the result – Only 1 checkbox can be checked
    • Expand the results – Multiple checkboxes can be checked
  • Visible Choices (only for Checkboxes Facet Type) – Choose what options to display, otherwise all options will be displayed as checkboxes
Setup Faceted Menus

Profile Builder - User Listing - Setup Faceted Menus

Lets say we created 3 Extra Fields Types inside Profile Builder -> Manage Fields. We added a Number Field called Age, a Select Field called Sex and a Select (Country) Field called Country.

We can now setup our Faceted Search based on those fields:

  • For the Number field – We set the Label to Age, Facet Type to Range (since it is a number field) and Facet Meta to Age since this is how we set the name of the field
  • For the Select field – We set the Label to Sex, Facet Type to Select (since it is a select field) and Facet Meta to Sex since this is how we set the name of the field
  • For the Select (Country) field– We set the Label to Country, Facet Type to Checkbox and Facet Meta to Country since this is how we set the name of the field

In order to generate the Facet Search Menu in Front End, in the User Listing, you will need to use the {{{faceted_menus}}} tag, found in the Extra Functions tab, inside the All-Userlisting Template.

Profile Builder - User Listing - Frontend Faceted Menus

If we set the Age to 32, the Sex to Male and Country to United States it will list all the users that correspond with those options.

Profile Builder - User Listing - Using the Frontend Faceted Menus

Search Settings

In the Search Settings tab we select the fields that the Search Field will look into.

Profile Builder - User Listing - Search Settings

In order to generate the Search field in Front End, in the User Listing, you will need to use the {{{extra_search_all_fields}}} tag, found in the Extra Functions tab, inside the All-Userlisting Template.

Profile Builder - User Listing - Search All Fields

The All-Userlisting Template

The All-Userlisting Template allows you to customize the looks of your Front End User Listing that displays a list of all your users. It’s shown on each page where the User Listing shortcode is present.

Customizing your All-Userlisting Template

The All-Userlisting Template contains a default HTML template which includes User Fields Tags, that you can modify to fit your needs.

Note – Some User Fields Tags use 3 {{{ }}} (curly braces) in order to render HTML properly. For example: {{{meta_biographical_info}}}.

Profile Builder - User Listing - All-Userlisting Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{{{extra_search_all_fields}}}
{{{faceted_menus}}}
<table class="wppb-table">
 <thead>
 <tr>
 <th scope="col" colspan="2" class="wppb-sorting">{{{sort_user_name}}}</th>
 <th scope="col" class="wppb-sorting">{{{sort_first_name}}}</th>
 <th scope="col" class="wppb-sorting">{{{sort_role}}}</th>
 <th scope="col" class="wppb-sorting">{{{sort_number_of_posts}}}</th>
 <th scope="col" class="wppb-sorting">{{{sort_registration_date}}}</th>
 <th scope="col">More</th>
 </tr>
 </thead>
 <tbody>
 {{#users}}
     <tr>
 <td data-label="Avatar" class="wppb-avatar">{{{avatar_or_gravatar}}}</td>
 <td data-label="Username" class="wppb-login">{{meta_user_name}}</td>
 <td data-label="Firstname" class="wppb-name">{{meta_first_name}} {{meta_last_name}}</td>
 <td data-label="Role" class="wppb-role">{{meta_role}}</td>
 <td data-label="Posts" class="wppb-posts">{{{meta_number_of_posts}}}</td>
 <td data-label="Sign-up Date" class="wppb-signup">{{meta_registration_date}}</td>
 <td data-label="More" class="wppb-moreinfo">{{{more_info}}}</td>
 </tr>
 {{/users}}
 </tbody>
</table>
     Registered Users: {{{user_count}}}
{{{pagination}}}

In the default All-Userlisting Template, you’ll have access to:

  • User Fields Tags – Giving you access to all the user information (fields). When rendered in the front-end, this will return the field values for each user. Must be used within the {{#users}} and {{/users}} conditional tags
  • Sort Variables – For inserting a sort by user field (either default or custom). When rendered in the front-end, this will translate into a link which once clicked will sort the users by that given field
  • Extra Functions – You can easily add extra functions in your user listing template. Things like Pagination and a Search All Fields can be used to customize the user listing by copy/pasting them into the template:
    • Pagination – This function will display the pagination for our User Listing
    • Search All Fields – This function will search in all meta fields or you can use Search Settings to choose the fields in which the search will look in.
    • Faceted Menus – This function will display the Faceted Menus in Front End
    • User Count – This function will show the number of users displayed in the User Listing

Profile Builder - User Listing - Extra Functions

The Single-Userlisting Template

The Single-Userlisting Template applies for all individual user pages displayed in the front-end. You can access the Single-Userlisting page by clicking the “More” link from the All-Userlisting page.

Customizing your Single-Userlisting Template

The Single-Userlisting Template contains a default HTML template which includes User Fields Tags, that you can modify to fit your needs.

Note – Some User Fields Tags use 3 {{{ }}} (curly braces) in order to render HTML properly. For example: {{{meta_biographical_info}}}.

Profile Builder - User Listing - Single-Userlisting Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{{{extra_go_back_link}}}
<ul class="wppb-profile">
 <li>
 <h3>Name</h3>
 </li>
 <li class="wppb-avatar">
 {{{avatar_or_gravatar}}}
 </li>
 <li>
 <label>Username:</label>
 <span>{{meta_user_name}}</span>
 </li>
 <li>
 <label>First Name:</label>
 <span>{{meta_first_name}}</span>
 </li>
 <li>
 <label>Last Name:</label>
 <span>{{meta_last_name}}</span>
 </li>
 <li>
 <label>Nickname:</label>
 <span>{{meta_nickname}}</span>
 </li>
 <li>
 <label>Display name:</label>
 <span>{{meta_display_name}}</span>
 </li>
 <li>
 <h3>Contact Info</h3>
 </li>
 <li>
 <label>Website:</label>
 <span>{{meta_website}}</span>
 </li>
 <li>
 <h3>About Yourself</h3>
 </li>
 <li>
 <label>Biographical Info:</label>
 <span>{{{meta_biographical_info}}}</span>
 </li>
</ul>
{{{extra_go_back_link}}}

In the default Single-Userlisting Template, you’ll have access to:

  • User Fields Tags – Giving you access to all the user information (fields). When rendered in the front-end, this will return the field values for each user
  • Extra Functions – {{{extra_go_back_link}}} will generate a link that will take the user back to the All-Userlisting Template

Single User Listing Shortcode

You can display the Single User Listing Template of a user inside a page using:

[wppb-list-users single name="userlisting" id="3"]

Supported parameters:

  • name – Inside the name parameter we define the template that will be used. If the name is not specified it will display the default template
  • id – Inside the id parameter we define the user ID. If the ID is not specified it will display the current logged in user Single User Listing template.

User Listing shortcode

After setting up the User Listing you can go ahead an publish it by using the “Publish” button. After publishing your User Listing, the Form Shortcode tab will populate with the custom shortcode that you can use to display the newly created User Listing in any given page.

userlisting-shortcode-1

You can add extra parameters to the shortcode, to further filter the results.

The Extra Shortcode Parameters

  • meta_key=”key_here” – We need to set the meta name of the field
  • meta_value=”value_here” – Displays users having a certain meta-value within a certain (extra) meta-field
  • include=”user_id_1, user_id_2″ – Displays only the users that you specified the user_id for
  • exclude=”user_id_1, user_id_2″ – Displays all users except the ones you specified the user_id for
[wppb-list-users name="member-directory" meta_key="custom_field_1" meta_value="value"] 
[wppb-list-users include="user_id_1, user_id_2"] 
[wppb-list-users exclude="user_id_1, user_id_2"] 

Remember though, that the field-value combination must exist in the database.

Note – If you want to use this method with a checkbox, you need to put a trailing comma after the meta_value value.

Example:

[wppb-list-users name="member-directory" meta_key="custom_field_1" meta_value="value1,value2"]

The All-Userlisting Template in Front End

Here’s a look of how the User Listing page might look in the front end of your website:

Profile Builder - User Listing - Frontend Faceted Menus

The Single-Userlisting Template in Front End

And this is the Single User profile page:

Profile Builder - User Listing - Single User Listing Front End

As shown above, both the All-Userlisting and Single-Userlisting Templates can be styled in any way you desire, directly from plugin UI.

How to

Display WooCommerce Fields inside the User Listing

pb_addon_woocommerce_sync

In order to integrate Profile Builder Pro with WooCommerce you will need to have the following plugins installed and activated on your site:

First you will need to go to Profile Builder -> Manage Fields to create the WooCommerce Customer Billing Address and WooCommerce Customer Shipping Address fields.

Profile Builder - User Listing - Create WooCommerce Fields

The next step is to setup the User Listing so go to Profile Builder -> User Listing -> Add New. In our case we named our User Listing – “Customers”. We also checked, in the “Roles to Display” option, the Customer role.

By doing so only users with the “Customer” role will be displayed in the User Listing. This role is created by the WooCommerce plugin.

We also set the Default Sorting Criteria to “Billing Country” – Order Ascending. This option will list and sort the users ascending based on Country.

Profile Builder - User Listing - WooCommerce User Listing

In the Faceted Menus section we can add filters to further sort our User Listing based on WooCommerce fields. We added a filter based on Billing Town / City and another one based on Billing State / County.

Profile Builder - User Listing - WooCommerce Faceted Menus

In the Search Settings tab we can set in which fields should the Search Field look into. For example we can allow to search based on Billing Postcode / Zip and Billing Phone.

In order to generate the Search field in Front End, in the User Listing, you will need to use the {{{extra_search_all_fields}}} tag, found in the Extra Functions tab, inside the All-Userlisting Template.

Note – To search based on country inside the Search Field you will need to use the country code and not the country name. For example if we want to search based on “Canada” we will need to use “CA” inside the search field.

Profile Builder - User Listing - WooCommerce Search Settings

In the All-Userlisting Template we can add all the WooCommerce fields by using the appropriate User Fields Tags.

Profile Builder - User Listing - WooCommerce All User Listing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{{{extra_search_all_fields}}}
{{{faceted_menus}}}
<table class="wppb-table">
	<thead>
		<tr>
	  <th scope="col" class="wppb-sorting">{{{sort_billing_country}}}</th>
	  <th scope="col" class="wppb-sorting">{{{sort_billing_first_name}}}</th>
	  <th scope="col" class="wppb-sorting">{{{sort_billing_last_name}}}</th>
	  <th scope="col" class="wppb-sorting">{{{sort_billing_company}}}</th>
	  <th scope="col" class="wppb-sorting">{{{sort_billing_address_1}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_address_2}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_city}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_state}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_postcode}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_email}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_phone}}}</th>
		<th scope="col">More</th>
		</tr>
	</thead>	
	<tbody>
		{{#users}}
		<tr>
		  <td data-label="Billing Country" class="wppb-billing-country">{{meta_billing_country}}</td>
          <td data-label="Billing First Name" class="wppb-billing-first-name">{{meta_billing_first_name}}</td>
          <td data-label="Billing Last Name" class="wppb-billing-last-name">{{meta_billing_last_name}}</td>
          <td data-label="Billing Company" class="wppb-billing-company">{{meta_billing_company}}</td>
          <td data-label="Billing Address 1" class="wppb-billing-address-1">{{meta_billing_address_1}}</td>
          <td data-label="Billing Address 2" class="wppb-billing-address-2">{{meta_billing_address_2}}</td>
          <td data-label="Billing City" class="wppb-billing-city">{{meta_billing_city}}</td>
          <td data-label="Billing State" class="wppb-billing-state">{{meta_billing_state}}</td>
          <td data-label="Billing Postcode" class="wppb-billing-postcode">{{meta_billing_postcode}}</td>
          <td data-label="Billing Email" class="wppb-billing-email">{{meta_billing_email}}</td>
          <td data-label="Billing Phone" class="wppb-billing-phone">{{meta_billing_phone}}</td>
		  <td data-label="More" class="wppb-moreinfo">{{{more_info}}}</td>
		</tr>
		{{/users}}
	</tbody>
</table>
	Registered Clients:{{{user_count}}}
{{{pagination}}}

In the Single-Userlisting Template we can add all the WooCommerce fields by using the appropriate User Fields Tags.

Profile Builder - User Listing - WooCommerce Single User Listing Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
{{{extra_go_back_link}}}
<ul class="wppb-profile">
  <li>
    <h3>Billing Address:</h3>
  </li>
  <li>
    <label>Country</label>
    <span>{{meta_billing_country}}</span>
  </li>
  <li>
    <label>First Name:</label>
    <span>{{meta_billing_first_name}}</span>
  </li>
  <li>
    <label>Last Name:</label>
    <span>{{meta_billing_last_name}}</span>
  </li>
  <li>
    <label>Company Name:</label>
    <span>{{meta_billing_company}}</span>
  </li>
  <li>
    <label>Address 1:</label>
    <span>{{meta_billing_address_1}}</span>
  </li>
  <li>
    <label>Address 2:</label>
	<span>{{meta_billing_address_2}}</span>
  </li>
    <li>
      <label>Town / City:</label>
	<span>{{meta_billing_city}}</span>
  </li>
    <li>
      <label>State / County:</label>
	<span>{{meta_billing_state}}</span>
  </li>
    <li>
      <label>Post Code / Zip:</label>
	<span>{{meta_billing_postcode}}</span>
  </li>
    <li>
    <label>Email:</label>
	<span>{{meta_billing_email}}</span>
  </li>
    <li>
    <label>Phone:</label>
	<span>{{meta_billing_phone}}</span>
  </li>
  <li>
    <h3>Shipping Address:</h3>
  </li>
  <li>
  	<label>Country:</label>
	<span>{{meta_shipping_country}}</span>
  </li>
  <li>
  	<label>First Name:</label>
	<span>{{meta_shipping_first_name}}</span>
  </li>
  <li>
  	<label>Last Name:</label>
	<span>{{meta_shipping_last_name}}</span>
  </li>
  <li>
  	<label>Address 1:</label>
	<span>{{meta_shipping_address_1}}</span>
  </li>
  <li>
  	<label>Address 2:</label>
	<span>{{meta_shipping_address_2}}</span>
  </li>
  <li>
    <label>Town / City:</label>
	<span>{{meta_shipping_city}}</span>
  </li>
  <li>
    <label>State / County:</label>
	<span>{{meta_shipping_state}}</span>
  </li>
  <li>
    <label>Postcode / Zip:</label>
	<span>{{meta_shipping_postcode}}</span>
  </li>
</ul>
{{{extra_go_back_link}}}

To view the User Listing in Frontend we will need to use the generated shortcode inside a page. In our case the shortcode will look like this: [wppb-list-users name="customers"]

This is how the User Listing will look in Front End.

Profile Builder - User Listing - WooCommerce User Listing in Frontend

Note – The {{{sort_billing_address_2}}} sort tag will not generate a Sort Title in the User Listing

Display BuddyPress Forum Users inside the User Listing

Several tags are available to use in the User Listing templates:

  • BuddyPress Avatar: {{{bp_avatar}}} – Returns the Url of the BuddyPress Avatar.
  • BuddyPress Cover Photo: {{{bp_cover_photo}}} – Returns the Url of the BuddyPress Avatar
  • BuddyPress Last Active: {{bp_last_active}} – Returns a relative time since the user has been BuddyPress active.
  • BuddyPress Add Friend Button: {{{bp_add_friend}}} – Returns an appropriate button that allows a user to Add Friend, Cancel Friendship or Cancel Friendship Request.
  • BuddyPress Latest Update: {{{bp_latest_update}}} – Returns the latest BuddyPress update, alongside a View link
  • My BuddyPress Friends Tab: {{{bp_my_friends_tab}}} – Found in the Extra Functions tab, it can be used only for All User Listing template. It returns a bar with tabs for All Members and My Friends, that filter users accordingly.

Notice – Because BuddyPress has an Avatar field, Profile Builder managed Avatar is disabled.

Display bbPress Forum Users inside the User Listing

Using the User listing module available in Profile Builder Pro you can create a member directory of all your forum users.

The bbPress add-on adds 3 new user tags which you can use on both All User Listing as well as Single-User Listing:

  • Forum Role: {{bbp_forum_role}} – For displaying the forum user role (e.g. “Participant”)
  • Topics Started: {{bbp_topics_started}} – Shows the number of topics the user has started
  • Replies: {{bbp_replies_created}} – Shows the number of replies the user has created

Display Repeater Fields

Lets say we have a Repeater field that uses the following field title: Accommodations. Inside the Repeater we added 2 Input fields that use the following field titles: Hotel and Motel.

All-Userlisting Template – The syntax below will output in a loop all the sets of fields inputted by the user on registration or while editing his profile.

1
2
3
4
{{#meta_accommodations}}
    Hotel:{{meta_accommodations_1}}
    Motel:{{meta_accommodations_2}}
{{/meta_accommodations}}

Single-Userlisting Template

1
2
3
4
Hotel:{{meta_accommodations_1}}
Motel:{{meta_accommodations_2}}
Hotel:{{meta_accommodations_1}}
Motel:{{meta_accommodations_2}}

Do not display field if no value was added

Lets say we have a Select field that uses the following meta name: custom_field_1. In the Single-Userlisting template we will need to add:

1
2
3
4
5
6
{{#meta_custom_field_1}}
  <li>
   <label>Select Field:</label>
   <span>{{meta_custom_field_1}}</span>
  </li>
{{/meta_custom_field_1}}

Read more about Mustache Tags here.

Display an uploaded file inside the Single Userlisting

To display an uploaded file (example: a .pdf file) inside the Single-Userlisting Template you will need first to add inside Profile Builder -> Manage Fields an Upload field.

Inside the Single-Userlisting Template we will need to use:

1
2
3
4
<li>
	<label>Uploaded file:</label>
	<span><a href="{{meta_custom_field_1}}"><img src="http://wwwimages.adobe.com/content/dam/acom/en/legal/images/badges/Adobe_Document_Cloud_logo_SCREEN_RGB_48px.png" width="25px" height="25px"/></a></span>
</li>

Replace {{meta_custom_field_1}} with the meta name assigned to your Upload field.

Front End Single Userlisting

Profile Builder - User Listing - Uploaded File

Download an uploaded file from the Single Userlisting

To download an uploaded file (example: a .pdf file) from the Single-Userlisting Template you will need first to add inside Profile Builder -> Manage Fields an Upload field.

Inside the Single-Userlisting Template we will need to use:

1
2
3
4
<li>
	<label>Download:</label>
	<span><a href="{{meta_custom_field_1}}" download><img src="http://wwwimages.adobe.com/content/dam/acom/en/legal/images/badges/Adobe_Document_Cloud_logo_SCREEN_RGB_48px.png" width="25px" height="25px"/></a></span>
</li>

Replace {{meta_custom_field_1}} with the meta name assigned to your Upload field.

Front End Single Userlisting

Profile Builder - User Listing - Download File

Display an uploaded photo inside the Single Userlisting

To display an uploaded photo (example: a .png or .jpg file) inside the Single-Userlisting Template you will need first to add inside Profile Builder -> Manage Fields an Upload field.

Inside the Single-Userlisting Template we will need to use:

1
2
3
4
<li>
	<label>Photo:</label>
	<span><img src="{{meta_custom_field_1}}" alt="WordPres" height="300" width="200"></span>
</li>

Replace {{meta_custom_field_1}} with the meta name assigned to your Upload field.

Front End Single Userlisting

Profile Builder - User Listing - Display a Photo

Embed an uploaded video inside the Single Userlisting

To embed an uploaded video (example: a .mp4 file) inside the Single-Userlisting Template you will need first to add inside Profile Builder -> Manage Fields an Upload field.

Inside the Single-Userlisting Template we will need to use the [video] shortcode:

1
2
3
4
<li>
	<label>Video:</label>
	<span>[video src="{{meta_custom_field_1}}"]</span>
</li>

Replace {{meta_custom_field_1}} with the meta name assigned to your Upload field.

Front End Single Userlisting

Profile Builder - User Listing - Uploaded Video

Display the Age of the user based on a Datepicker field

To display the Age of a user inside the Single-Userlisting Template you will need first to add inside Profile Builder -> Manage Fields a Datepicker field.

Note – Set an appropriate meta name for the Datepicker field like: meta_birthday

1. Inside the Single-Userlisting Template you will need to add the following script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
  function getAge(dateString) 
{
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) 
    {
        age--;
    }
    return age;
}
  jQuery(document).ready(function(){
  	jQuery('.calc-age').each(function(index,item){
  		birthday = jQuery(item).text();
  		if(birthday != ''){
  			age = getAge(birthday);
  			jQuery(item).text(age)
  		}
  	})
  })
</script>

2. And also to add the Datepicker User Field Tag:

1
2
3
4
<li>
	<label>Age:</label>
	<span class="calc-age">{{meta_birthday}}</span>
</li>

Replace {{meta_birthday}} with the meta name assigned to your Datepicker field.

Note – The {{meta_birthday}} User Field Tag needs to be inside a span, paragraph or anything with a .css class of “calc-age”

Calculate Age based on Birthday, save it in user meta, and filter by Age

To filter, by the user’s Age, the User Listing by using the Faceted Menus you will need first to add inside Profile Builder -> Manage Fields a Datepicker field and an Input field.

Important – Set the meta name for the Datepicker field and the Input field as explained below:

  • Datepicker field -> birthday
  • Input field -> age

Now we will need to use some custom code:

1. Create an empty plugin like this: https://gist.github.com/sareiodata/76f701e01db6685829db

2. Add the following code to the end of it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/*
 * Calculate Age based on birthday and save it in user meta. Then recalculate daily
 */
 
function wppbc_age_calculator($dob){
    if(!empty($dob)){
        $birthdate = new DateTime($dob);
        $today   = new DateTime('today');
        $age = $birthdate->diff($today)->y;
        return $age;
    }else{
        return 0;
    }
}
 
// Always clear $_POST['age'] so we don't update it
 
add_action('plugins_loaded', 'wppbc_ignore_age_submit', 6);
function wppbc_ignore_age_submit(){
    if (isset ( $_REQUEST['action'] ) && isset( $_POST['age']) ){
        unset($_POST['age']);
    }
}
 
// Calculate Age on Birthday update
 
add_action( "added_user_meta", 'wppbc_update_age_on_birthday_change', 10, 4);
add_action( "update_user_meta", 'wppbc_update_age_on_birthday_change', 10, 4);
function wppbc_update_age_on_birthday_change( $meta_id, $object_id, $meta_key, $_meta_value ){
    if ( $meta_key === 'birthday' ){
        $age = wppbc_age_calculator($_meta_value);
        add_user_meta($object_id, 'age', '', true);
        wppbc_sql_update_age( $object_id, 'age', $age );
    }
 
 
}
 
// Custom update function without hooks so we can block update_user_meta for Age field
 
function wppbc_sql_update_age($object_id, $meta_key, $meta_value){
    global $wpdb;
    $table = _get_meta_table( 'user' );
    $data  = compact( 'meta_value' );
    $column = sanitize_key('user' . '_id');
    $where = array( $column => $object_id, 'meta_key' => $meta_key );
 
    $result = $wpdb->update( $table, $data, $where );
    if ( ! $result )
        return false;
 
    wp_cache_delete($object_id, 'user_meta');
}
 
// Block the update of the Age
 
add_filter('update_user_metadata', 'wppbc_block_age_update', 10, 5);
function wppbc_block_age_update($check, $object_id, $meta_key, $meta_value, $prev_value){
    if( $meta_key === 'age'){
        return false;
    }
    return $check;
}
 
// Register daily Cron Job to calculate how many users there are, as well as generate Single Cron Jobs for batches
 
add_action('wp', 'wppbc_daily_cron_for_age');
function wppbc_daily_cron_for_age() {
    if ( !wp_next_scheduled( 'wppbc_calculate_age_daily_event' ) ) {
        wp_schedule_event( current_time( 'timestamp' ), 'daily', 'wppbc_calculate_age_daily_event');
    }
}
 
add_action('wppbc_calculate_age_daily_event', 'wppbc_schedule_age_calculations');
function wppbc_schedule_age_calculations(){
    $users = get_users( array( 'fields' => 'ID' ) );
    $user_count = count( $users );
    for( $i=0; $i<$user_count; $i+=100){
        $number = 100;
        $offset = $i;
        wp_schedule_single_event( time() + $i + 600, 'wppbc_update_age', array( 'number' => $number, 'offset' => $offset ) );
    }
}
 
add_action( 'wppbc_update_age','wppbc_update_age', 10, 1 );
function wppbc_update_age($args){
 
    //$args = array('number' => 100, 'offset' => 0);
    ( isset($args['number']) ) ? ($number = $args['number']) : ($number = 100);
    ( isset($args['offset']) ) ? ($offset = $args['offset']) : ($offset = 0);
 
    $users = get_users( array( 'number' => $number, 'offset' => $offset, 'fields' => 'ID' ) );
    var_dump( $users );
    foreach ( $users as $uid ){
        $birthday = get_user_meta( $uid, 'birthday', true );
        $age = wppbc_age_calculator( $birthday );
        add_user_meta($uid, 'age', '', true);
        wppbc_sql_update_age( $uid, 'age', $age );
    }
}

3. Install this plugin via FTP (copy it inside wp-content/plugins) or create a zip archive with it and install it via the WordPress plugin upload functionality

The custom code above will add inside the Age field the age of the user calculated based on the date added inside the Birthday field. Adding manually the age inside the Age field will not work because it will be overwritten by the custom code.

Go to your User Listing and setup a Faceted Menu Filter based on the Age Field.

Note – Old users, before implementing the custom code, will see their Age after 24h and new users will see it after Registration