Plugin Planet

Premium WordPress Plugins

USP Pro version 3.6 and better uses Selectize to display select/dropdown fields in a more stylish, user-friendly way. As of USP Pro 3.7, the Selectize script applies to the Category and Tag fields, as well as any select/dropdown custom fields.

Default Usage

By default, USP Pro enables the Selectize script Category and Tag select fields. For example, if you add the following shortcodes to any USP Pro form:

[usp_tags include="all_include_empty"]

[usp_category include="all_include_empty"]

..that will display the “Post Tag” and “Post Category” fields using the fancy Selectize styles. You don’t need to do anything else; Selectize is added automatically when using either the [usp_tags] or [usp_category] shortcodes to display select/dropdown fields. Learn more about adding Category and Tag fields.

Multiple Select: By default the [usp_tags] and [usp_category] shortcodes allow only one option to be selected by the user. To change that, so users can select multiple options, add multiple="true", like [usp_tags multiple="true"].

For reference, here is documentation for Category and Tag shortcodes. There you will find a list of all available attributes, so you can customize the fields however is necessary.

Screenshots

Here are some screenshots to give you a better idea of what to look for. The first screenshot shows how the “Post Tag” and “Post Category” select fields look normally, without Selectize.

Normal/vanilla display of select fields How the select/dropdown fields look normally, without any fancy Selectize script

And here are screenshots that show how the Post Tag and Post Category fields look with Selectize enabled.

Selectize enabled Category and Tag fields (1/3) Default view of a USP Form with Selectize applied to the Category and Tag fields

Selectize enabled Category and Tag fields (2/3) Showing what happens when the user clicks into the Tags field, all the available options are displayed

Selectize enabled Category and Tag fields (3/3) Showing multiple options selected for the Tags and Category field

FYI: The above screenshots were taken using the default WordPress theme, Twenty Twelve. Captured via latest Chrome on macOS.

Note that the CSS/styles provided by Selectize are highly opinionated, in order to make the fields look all snazzy and cool. The downside is that the Selectize styles may not “gel” with your specific theme. It all depends on how the theme handles styling for form elements. SO in the event that Selectize styles don’t match well with your theme styles, or you prefer using plain/vanilla <select> fields, you can always disable Selectize with a simple step (see next section).

Disable Selectize

If the fancy Selectize styles are not suitable for whatever reason, you can disable them by adding the following line to the USP Pro setting “Custom JavaScript”, located under the CSS/JS tab.

var usp_disable_selectize = true;

Then save changes and done. Selectize is now disabled and your Category and Tag fields will be displayed in their default/vanilla fashion (as shown in the first screenshot above).

Important: Adding the above line will disable Selectize for all select/dropdown fields, even those added in future versions of USP Pro.

(Re)enable Selectize

To (re)enable the Selectize script at any time, simply remove the above line from the “Custom JavaScript” setting and save your changes. Or if you restore the default USP Pro plugin options, the Selectize script will be enabled by default.