Select2

Profile Builder Pro - Select2 - Thumbnail

 

Select2 Add-on enables you to add an improved select box, with search and filter capabilities.

Install Select2 Add-on

First of all, click on the button below to download the add-on. Once downloaded, you can install the add-on as a normal WordPress plugin, by uploading the .zip file in your WordPress Admin -> Plugins -> Add New -> Upload Plugin.

Alternatively, you can install the Select2 Add-On by extracting the folder found inside the archive and uploading the entire folder via FTP to your /wp-content/plugins folder found inside your WordPress install.

Get Select2 – Profile Builder Add-on

Note – For Select2 Add-On to work as expected, you’ll also need to have the following plugin installed and activated on your site:

Add the Select2 Field

After installing the add-on you will find that 2 new field types have been added to the Fields List in the Manage Fields tab: Select2 and Select2 (Multiple).

Profile Builder Pro - Select2 - Manage Fields

Setting up a Select2 Field

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 and labels you want your user to select, a default selection, if the field is required or not and even a conditional logic rule.

Profile Builder Pro - Select2 - Add Field

Setting up a Select2 (Multiple) Field

Adding a Select2 (Multiple) field you’ll notice that you can now add multiple default options and also you have new settings: Maximum Selections and User Inputted Options.

Profile Builder Pro - Select2 - Add Select2 (Multiple) Field

Note – When WooCommerce plugin is activated user inputted options are not visible in the WordPress Default Edit Profile page. On Profile Builder forms user inputted options work as expected.

Front End – User Side

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

Profile Builder Pro - Select2 - Registration Form

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

Select2

Profile Builder Pro - Select2 - Registration Form Select2

Select2 (Multiple)

Profile Builder Pro - Select2 - Registration Form Select2 (Multiple)

Now let’s add a new option in the “Topics of interest” field. You will see the warning message when you will try to enter a fourth option.

Profile Builder Pro - Select2 - Registration Form Select2 (Multiple) Restriction

How to

Advanced customization using filters

If you have a large set of data or you want to load it from a local or a 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 a template. 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.