User Listing

Activating the User Listing Addon

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

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.

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 using one of the provided User-Listing Themes: Default, Tablesi, Vergid, Boxomo, Glimplist.

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

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 or type the Meta field to add as a search option. If you want to use a repeater meta or a meta outside Profile Builder just type the value and press enter.
• Behaviour (only for Checkboxes and Select Multiple Facet Types)
  • Narrow the result – Only 1 option can be selected
  • Expand the results – Multiple options can be selected
• Visible Choices (only for Checkboxes and Select Multiple Facet Types) – Choose how many options to display, otherwise all options will be displayed

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.

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.

Search Settings

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

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.

Themes

Click on the Preview button to see an example with the selected Theme’s templates.

Activate User-Listing Theme

Click on the Activate button of the desired Theme.

After Theme activation the following Settings are modified: Roles to Display, Number of Users/Page, Default Sorting Criteria, Default Sorting Order, Avatar Size (All-userlisting), Avatar Size (Single-userlisting).

These Settings can be saved individually per each theme, by adding the desired values and pressing the Update button.

Your existing All-userlisting and Single-userlisting Templates are replaced with the templates of the activated Theme. Any changes you make to these templates will be saved when the Update button is clicked.

Reset User-Listing Theme

To Reset an active User Listing Theme to it’s default settings, click on the Reset Data button (visible when hovering over an active Theme).

Select which Settings to be reset to their defaults and press Confirm. The default settings will be loaded on the page and saved when the Update button is clicked.

Use Template files from your currently active WordPress Theme

You can use your own template by adding the corresponding file to the currently active WordPress Theme or Child Theme in the following location:

– wp-content/themes/Your Active Theme/

Create the profile-builder directory containing the userlisting directory.
– wp-content/themes/Your Active Theme/profile-builder/userlisting

Add your template file into the userlisting directory.

To identify the ID you need go to the User Listing Edit Page and look for the “post=xxx” argument in the link of the browser.
Example: www.your-website.com/wp-admin/post.php?post=803&action=edit – the ID you are looking for is 803

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.

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

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.

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.

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.

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:

The Single-Userlisting Template in Front End

And this is the Single User profile page:

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

How to

Display WooCommerce Fields inside the User Listing

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

• Profile Builder Pro (at least v2.5.5)
• WooCommerce Sync (at least v1.4.5)
• WooCommerce

First you will need to go to Profile Builder -> Manage Fields to create the WooCommerce Customer Billing Address and WooCommerce Customer Shipping Address 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.

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.

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.

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

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.

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.

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.

Display bbPress Forum Users inside the User Listing

Using the User listing addon 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

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

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

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

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.

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.

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.

Make the Single Profile URL work with user nicename

https://www.cozmoslabs.com/docs/profile-builder-2/developers-knowledge-base/userlisting/make-single-profile-url-work-user-nicename/

Add Contact Form to Single Userlisting Template

https://www.cozmoslabs.com/docs/profile-builder-2/developers-knowledge-base/userlisting/add-contact-form-single-userlisting-template/

Hide Userlisting until search is performed

https://www.cozmoslabs.com/docs/profile-builder-2/developers-knowledge-base/userlisting/hide-userlisting-until-search-is-performed/

Create a Map of All Users Location

Using the Map field you can allow users to pin their location and then using the User Listing module you can list all the users locations on a map.

You can do this by following the steps below:

• Profile Builder -> Form Fields setup your map field with “POIs Load Type: POIs of all the users for the filter* (no pagination)”
• Profile Builder -> User Listing -> All UserListing Template -> Extra Functions use the {{{users_one_map}}} tag to create a map with all the points. This particular tag only works with the All User Listing Template.
• Profile Builder -> User Listing -> Single UserListing Template -> User Fields Tag. Will have a unique name based on the metaname you created in Form Fields.

The video below goes through all the required steps for creating a map of all your users locations:

Embed a youtube video or a different url

By default WordPress supports embeding content from different services directly in your pages. For an exact list of supported services please visit: https://wordpress.org/support/article/embeds/

However, that only works inside a page or post content.

In order to embed content like a youtube video inside User Listing you’ll need to use the shortcode.

• Create a custom field called Youtube for your users to place the link to their youtube video they want included
• Include the video like so inside user listing:
  
  
• you can exclude the width and height and they will get a default
• Share:
• Facebook
• Twitter
• Google


Profile Builder Pro

Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.

Unlock PRO Features

Or download FREE version