Select2

Profile Builder has a new add-on, called Select2, and it brings out to play a new type of field. This add-on enables you to add an improved select box, with search and filter capabilities.

Selecting the new field

After installing this plugin, you will find that 2 new types of fields has been added to the fields list in the Manage Fields tab: Select2 and Select2 (Multiple).

Setting up the options

There aren’t any special steps compared to a regular Select field. According to your needs, you can choose a field title, a description, the options you want your user to select and even a default selection.

Edit Field

Multiple Select

Let’s add a new Select2 (Multiple) field. You’ll notice that you can now add multiple default options and also have a new settings: Maximum selections and User Inputted options.

*NOTE: When WooCommerce plugin is activated, user inputted options are not visible in WordPress Default Edit Profile. On Profile Builder forms, user inputted options work as expected.

What users see

You can see the fields we just created, in action on this register form.

When users start typing in the select box, the list is filtered automatically.

Now, let’s add a new option in the “Topics of interest” field.

select2-multiple-dropdown

select2-multiple-typing

You can see the warning message when I try to enter a fourth option.

select2-multiple-maximum-selections

Advanced customization using code

If you have a large set of data or want to load it from local or external database you can use the filters for single select:

  • wppb_select2_options
  • wppb_select2_labels

and for multiple select:

  • wppb_select2_multiple_options
  • wppb_select2_multiple_labels

Here is an example:

1
2
3
4
5
6
/* Load select data using custom code */
add_filter('wppb_select2_options', 'wppbc_data_for_select2', 10, 6);
function wppbc_data_for_select2( $select2_data, $form_location, $field, $user_id, $field_check_errors, $request_data ) {
    $select2_data="Red, Green, Blue, Yellow"; // add your own data as comma separated values
    return $select2_data;
}

Select2 add-on is implemented using an open-source library. So far, Profile Builder’s user interface lets you use some of its features, but you can implement more features such as templating. The PHP code you need to create for further customization should be hooked to one of the available filters:

  • wppb_select2_arguments
  • wppb_select2_multiple_arguments

Here is a link to some examples of what can be done using Select2 library.

Ready to use

At this point, the field is set up and ready to be used. Get the add-on now by following the link below.

Get Profile Builder Select2 Add-On