Select2 for Profile Builder

Razvan Mocanu
Last Updated: 21/11/16

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:

/* 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

15 thoughts on “Select2 for Profile Builder

    Do we need a separate database application for it or is it enough?

    Reply

    Hi Todd,

    This is a WordPress plugin that adds extra functionality to the Profile Builder plugin for WordPress. So no, you simply need a normal WordPress installation with Profile Builder plugin also installed.

    Reply

    I have downloaded and activated the ‘profile builder’ plugin and I am not able to get any of the shortcodes to work. I am using the latest WordPress and my theme is Tesseract.
    I really would appreciate it if anyone can help me.
    Belinda

    Reply

    Hi Belinda,
    I have tested Profile Builder with a standard Tesseract theme and everything seems to work properly.
    Please provide us more details so we can try to solve your issue by opening a support ticket at http://www.cozmoslabs.com/support/ .

    Reply

    Did you ever wanted to have some admin only fields attached to your user profiles?

    Reply

    Is there any way to allow users to input their location without manually adding it to the list of options? I am trying to develop a facet to my site where users are shown to other users in terms of distance from each other, so having that location option and having it be functional instead of simply for show is very very important.

    Reply

    Hi Ellis,
    Such a localization field is not available at the moment with Profile Builder.

    Reply

    How can I default the CSS to the WPPB CSS, i cannot get the select box to line up with the label, it drops below whereas all the other fields in the PB line up and use my default theme….Sorry if this question is basic as I have limited programming skills.

    Reply

    Hi Kirt,
    The way a page looks is the result of processing inline styling and multiple CSS files, including the CSS from Select2, Profile Builder and your active theme’s stylesheet.
    In order to help you align the Select2 field, you will have to provide me with a link to your page.
    As this is very specific to your case, it would be great if we could continue this conversation in a support ticket.

    Reply

    Hello, i am trying to use select2 to allow users to tag themselves with their interests so others could use a search function to find them, so far i havent had any luck. is this possible?

    Reply

    Hello,
    Yes, it’s possible for users to select interests in a custom field of type select.
    The field will be searchable in the User listing.
    We are currently working on more advanced searching and filtering in User Listing.
    You can tell me exactly what issues are you having with it, so I can help you further, by submitting a support ticket.

    Reply

    how to use the value of select2 field ??

    Reply

    Hello,
    If you are trying to retrieve the value submitted by a particular user you can use get_user_meta PHP function. Use the meta_key configured in Profile Builder->Manage fields.

    If this is not what you need, please submit a support ticket with more details on what you are trying to achieve.

    Reply

    I have Created Select2 & populate Custom Taxonomy through add filter.. but when i’m Creating Another Select2 Control it shows same data..

    Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.