Modal search form shortcode

Relevanssi includes a modal search form shortcode that opens the search form in a dialog. The shortcode is relevanssi_modal_search.

[relevanssi_modal_search] will display a “Search” button that opens the modal search form.

Changing the labels

Use the label parameter to change the text on the button:

[relevanssi_modal_search label="Find"]

Use the modal_label parameter to change the heading inside the dialog:

[relevanssi_modal_search label="Find products" modal_label="Search the product catalogue"]

The modal heading is also used as the accessible label for the dialog.

Using an icon-only button

To display only the search icon, use the icon parameter:

[relevanssi_modal_search icon="true" label="Open search"]

The label is visually hidden but remains available to screen readers, so use a label that clearly describes what the button does. The values 1, true, yes and on enable boolean parameters.

Adding query parameters

The modal shortcode accepts the same search restrictions as the regular searchform shortcode. Parameters that are not modal settings are passed to the search form.

[relevanssi_modal_search post_types="product"] will restrict the search form to just products.

[relevanssi_modal_search post_types="post,page,news"] will restrict the search form to posts, pages and news.

[relevanssi_modal_search cats="10,14,17"] will restrict the search form to categories 10, 14 and 17.

[relevanssi_modal_search searchblogs="1,2,3"] will do a multisite search on blogs 1, 2 and 3.

These parameters are added to the search form as hidden input fields.

Adding dropdowns

The modal shortcode supports dropdown selections for post types and taxonomies.

[relevanssi_modal_search dropdown="post_type"] will create a dropdown for post types in the index.

[relevanssi_modal_search dropdown="category"] will create a dropdown for categories.

[relevanssi_modal_search dropdown="post_tag"] will create a dropdown for tags.

All other taxonomies are also possible. You can add multiple dropdowns by using different names for the attributes. As long as the attribute name begins with “dropdown”, it will create a dropdown in the form:

[relevanssi_modal_search dropdown_1="post_tag" dropdown_2="category"]

Checkboxes

You can also add checkbox lists for taxonomy terms and post types. This creates a checkbox list of categories for the user to choose from:

[relevanssi_modal_search checklist="category"]

If you want checkboxes for post types, use this:

[relevanssi_modal_search post_type_boxes="post,page,project"]

You can also have some post types checked by default by prefixing them with asterisks:

[relevanssi_modal_search post_type_boxes="*post,page,project"]

Adding the modal search block

You can also add the modal search using the Relevanssi Modal Search block in the block editor. The block settings let you change:

• The trigger button label
• The dialog heading
• Whether the trigger displays only the search icon
• The post types included in the search

Adding the modal search to a navigation menu

You can open the modal search from a classic WordPress navigation menu. Add a Custom Link to the menu and set its URL to:

#relevanssi-modal-search

Set the link text to “Search” or another suitable label. Relevanssi detects the link and adds the modal search dialog to the page automatically.

Using the PHP function

Theme and plugin developers can render the modal with the relevanssi_modal_search() function:

relevanssi_modal_search();

Arguments are passed as an array:

relevanssi_modal_search(
	array(
		'label'       => 'Find products',
		'modal_label' => 'Search the product catalogue',
		'post_types'  => 'product',
	)
);

The function prints the modal by default. Set the second parameter to false to return the HTML instead:

$modal = relevanssi_modal_search( $args, false );

The supported modal arguments are:

• id sets the dialog ID.
• label sets the trigger button label.
• modal_label sets the dialog heading.
• icon displays an icon-only trigger when enabled.
• class adds CSS classes to the modal wrapper.
• button_class adds CSS classes to the trigger button.
• trigger determines whether Relevanssi generates the trigger button.

Other arguments are passed to the search form.

Theme integration

The trigger is a native button with the wp-element-button class. This lets it inherit button styling from the active theme and WordPress Global Styles. Relevanssi does not force its own button colours, borders or typography.

If your theme uses a custom button class, add it with the button_class parameter:

[relevanssi_modal_search button_class="my-theme-button"]

The search icon follows the button text colour.

Accessibility

The modal uses the native HTML dialog element where available and includes a fallback for older browsers. The modal includes:

• An accessible dialog heading
• Properly labelled trigger buttons
• Focus moved to the search field when the modal opens
• Focus returned to the trigger when the modal closes
• Escape-key and backdrop closing
• A visible, keyboard-accessible close button
• Reduced-motion support

Developer hooks

The modal search includes the following filter hooks:

• relevanssi_modal_search_args
• relevanssi_modal_search_form_args
• relevanssi_modal_search_trigger_classes
• relevanssi_modal_search_trigger_html
• relevanssi_modal_search_dialog_html
• relevanssi_modal_search_html
• relevanssi_modal_search_preload_style

The JavaScript API can open and close a modal by its ID:

RelevanssiModalSearch.open( 'catalog-search' );
RelevanssiModalSearch.close( 'catalog-search' );

For this to work, give the modal the matching ID:

[relevanssi_modal_search id="catalog-search"]

The dialog also dispatches relevanssi:modal-open and relevanssi:modal-close events when its state changes.

Troubleshooting

The modal uses the WordPress default search form provided by get_search_form(). If your theme includes a searchform.php file, the modal will use that form. This may cause unexpected results if the theme search form greatly deviates from the WordPress standard.