Modifying Search Bar inputs

GravityView filters change which fields the Search Bar lists, which inputs each field can use, and which template draws each input. The examples on this page follow one change from start to finish: an Entry Color value, saved in entry meta, offered in the Search Bar as a color picker.

Add a field to the Search Bar #

The Search Bar lists every form field except File Upload, Post Image, Post ID, and Section fields. The gravityview/search/searchable_fields filter adds other fields, such as an entry meta key. Give each one a label and a type. The type decides which inputs the field can use.

This example adds an Entry Color field for the entry meta key mymeta:

add_filter( 'gravityview/search/searchable_fields', function( $fields, $form_id ) {
    $fields['mymeta'] = array(
        'label' => 'Entry Color',
        'type'  => 'color',
    );

    return $fields;
}, 10, 2 );

add_filter( 'gravityview/search/searchable_fields', function( $fields, $form_id ) {
    $fields['mymeta'] = array(
        'label' => 'Entry Color',
        'type'  => 'color',
    );

    return $fields;
}, 10, 2 );

To leave more field types out of the list, add them to the array the gravityview_blocklist_field_types filter returns.

Choose which inputs a field can use #

Each search field has an Input type setting. Its choices depend on the field type:

• Single Line Text, Paragraph Text, Email, and other text fields: Text.
• Number fields: Text and Number range.
• Date fields: Date and Date range.
• Drop Down and Radio Buttons fields: Select, Radio, and Links.
• Checkboxes and Multi Select fields: Select, Select (multiple values), Radio, Checkbox, and Links.

In code, each input type has a key. These are the built-in keys, with the name the Input type setting shows for each:

Add your own input type #

These steps give the Entry Color field from the first example a color picker. Use the code from all four steps together.

Step 1: Name the input type

The gravityview/search/input_labels filter adds the name the Input type setting shows for the new input:

add_filter( 'gravityview/search/input_labels', function( $labels ) {
    $labels['colorpicker'] = 'Color Picker';

    return $labels;
} );

add_filter( 'gravityview/search/input_labels', function( $labels ) {
    $labels['colorpicker'] = 'Color Picker';

    return $labels;
} );

Step 2: Give the field type its own input group

GravityView sorts field types into input groups, such as date or select, and puts any type it does not know into the text group. The gravityview/extension/search/input_type filter gives the color type a group of its own:

add_filter( 'gravityview/extension/search/input_type', function( $input_type, $field_type ) {
    if ( 'color' === $field_type ) {
        return 'color';
    }

    return $input_type;
}, 10, 2 );

add_filter( 'gravityview/extension/search/input_type', function( $input_type, $field_type ) {
    if ( 'color' === $field_type ) {
        return 'color';
    }

    return $input_type;
}, 10, 2 );

Step 3: List the inputs for the group

The gravityview/search/input_types filter sets which inputs each group offers, by key. This example lets Date fields use a Text input as well, and gives the color group the color picker and a Text input:

add_filter( 'gravityview/search/input_types', function( $types ) {
    $types['date'][] = 'input_text';
    $types['color']  = array( 'colorpicker', 'input_text' );

    return $types;
} );

add_filter( 'gravityview/search/input_types', function( $types ) {
    $types['date'][] = 'input_text';
    $types['color']  = array( 'colorpicker', 'input_text' );

    return $types;
} );

With the code from steps 1 to 3, the Entry Color field’s Input type setting offers Color Picker and Text:

Step 4: Create the template

Each input draws from a template named search-field- followed by its key, such as search-field-select.php. GravityView’s own templates are in wp-content/plugins/gravityview/src/Widget/Search/templates/. To change one, copy it into a gravityview folder in your theme and edit the copy.

A new input type needs a template of its own. Copy search-field-input_text.php into your theme’s gravityview folder, rename it search-field-colorpicker.php, and change its input to the one you need. Keep the input’s name attribute: GravityView reads the search from filter_ followed by the field ID, filter_mymeta here. To keep templates outside the theme, register their folder with the gravityview_template_paths filter.

Change how a search filters entries #

To change which entries a search returns, use the gravityview/view/query action. It receives the Gravity Forms query object by reference, the View, and the request.