Add an Engine Select Dropdown Box to Search Form

One of SearchWP’s most popular features is the ability to create multiple search engines. More often than not multiple engines result in multiple search forms, each with their own search results template. It’s also possible to instead use your default search form and results template for any search engine in SearchWP.

This article will explain how you can accomplish three different approaches to adding an Engine dropdown to your search form.

Build your own search form with an Engine dropdown
Customize the Shortcodes Extension to include an Engine dropdown
Customize the default search form to include an Engine select dropdown

Building your own search form

Building your own search form involves editing your theme files to include the input fields and buttons we want to include. At a most basic level you can add the following to your theme template file where you would like the form to appear:

view raw searchform.php hosted with ❤ by GitHub

Note: ‘Default’ is output for the default engine, you can customize that by editing line 14 in that snippet.

This form is structured like the default WordPress search form, but it also includes a select containing all of your defined SearchWP Engines.

Once your form has been set up it will redirect to your default search results template, but we also need to tell SearchWP which engine to use for the search.

All hooks should be added to your custom SearchWP Customizations Plugin.

	<?php

	// @link https://searchwp.com/documentation/knowledge-base/engine-select-dropdown/
	if ( ! empty( $_GET['swpengine'] ) ) {
	add_filter( 'searchwp\query\args', function( $args ) {
	$args['engine'] = $_GET['swpengine'];

	return $args;
	} );
	}

view raw functions.php hosted with ❤ by GitHub

This snippet is solely responsible for checking to see what was chosen from the Engines dropdown, and using that engine configuration for the search.

SearchWP’s Shortcodes Extension allows you to easily output search forms and control search results pages using WordPress Shortcodes. Here is an example search form that includes a Categories dropdown to choose from:

Note: requires Shortcodes version 1.2.1 or higher

All hooks should be added to your custom SearchWP Customizations Plugin.

	<?php

	// @link https://searchwp.com/documentation/knowledge-base/engine-select-dropdown/

	// ***** UNCOMMENT THIS IF YOU WANT TO USE SHORTCODES IN WIDGETS
	// add_filter( 'widget_text', 'do_shortcode' );

	// Output a SearchWP Engines dropdown
	function my_searchwp_shortcodes_inject_engines() { ?>
	<p class="searchwp-shortcodes-engines">
	<?php
	$engines = \SearchWP\Settings::get_engines();
	$current_engine = isset( $_GET['swpengine'] ) ? esc_attr( $_GET['swpengine'] ) : 'default';
	?>
	<select name="swpengine" id="swpengine">
	<?php foreach ( $engines as $engine_name => $engine ) : ?>
	<option value="<?php echo esc_attr( $engine_name ); ?>"
	<?php selected( $current_engine, $engine_name ); ?>>
	<?php echo esc_html( $engine->get_label() ); ?>
	</option>
	<?php endforeach; ?>
	</select>
	</p><?php
	}

	add_action( 'searchwp_shortcodes_after_input', 'my_searchwp_shortcodes_inject_engines' );

view raw functions.php hosted with ❤ by GitHub

This will customize the SearchWP Shortcodes form to also include our Engines dropdown. That only handles the dropdown, however. We still need to tell SearchWP which engine to use when performing a search. This can be done by adding the following to your SearchWP Customizations plugin (not the theme template file where you added the form code).

	<?php

	// @link https://searchwp.com/documentation/knowledge-base/engine-select-dropdown/
	if ( ! empty( $_GET['swpengine'] ) ) {
	add_filter( 'searchwp\query\args', function( $args ) {
	$args['engine'] = $_GET['swpengine'];

	return $args;
	} );
	}

view raw functions.php hosted with ❤ by GitHub

That snippet will check the search request to see which engine was chosen from the dropdown and use it for the current search.

WordPress allows us to filter the default search form found in many themes. It’s generated by a call to get_search_form() which can be completely customized either by including a file named searchform.php in your theme directory, or via the get_search_form filter. For this example we will be using the get_search_form filter.

All hooks should be added to your custom SearchWP Customizations Plugin.

To include an Engines dropdown in your site’s default search form, add the following to your SearchWP Customizations plugin:

	<?php

	// Adds a SearchWP Engines dropdown to the search form
	// @link https://searchwp.com/documentation/knowledge-base/engine-select-dropdown/
	function my_searchwp_get_search_form_with_engines_dropdown( $form ) {
	ob_start(); ?>
	<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label>
	<span class="screen-reader-text">Search For</span>
	<input type="search" class="search-field" placeholder="Search..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:" />
	</label>
	<?php
	$engines = \SearchWP\Settings::get_engines();
	$current_engine = isset( $_GET['swpengine'] ) ? esc_attr( $_GET['swpengine'] ) : 'default';
	?>
	<select name="swpengine" id="swpengine">
	<?php foreach ( $engines as $engine_name => $engine ) : ?>
	<option value="<?php echo esc_attr( $engine_name ); ?>"
	<?php selected( $current_engine, $engine_name ); ?>>
	<?php echo esc_html( $engine->get_label() ); ?>
	</option>
	<?php endforeach; ?>
	</select>
	<input type="submit" class="search-submit" value="Search" />
	</form>
	<?php return ob_get_clean();
	}

	add_filter( 'get_search_form', 'my_searchwp_get_search_form_with_engines_dropdown' );

view raw functions.php hosted with ❤ by GitHub

The form code used here is based on the default search form that ships with WordPress. There is a chance your theme previously customized the form, and you simply want to add the dropdown to it. You can simply modify the form code to match what shipped with your theme and adding lines 11-22 from that code sample where you want your Engines dropdown to appear.

This snippet only modifies the search form, we still need to capture the value from the dropdown and tell SearchWP to use the chosen Engine for the search. We can do that by adding the following to your SearchWP Customizations plguin (not the theme template file where you added the form code).

	<?php

	// @link https://searchwp.com/documentation/knowledge-base/engine-select-dropdown/
	if ( ! empty( $_GET['swpengine'] ) ) {
	add_filter( 'searchwp\query\args', function( $args ) {
	$args['engine'] = $_GET['swpengine'];

	return $args;
	} );
	}

view raw functions.php hosted with ❤ by GitHub

	<!-- https://searchwp.com/documentation/knowledge-base/engine-select-dropdown/ -->
	<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label>
	<span class="screen-reader-text">Search for:</span>
	<input type="search" class="search-field" placeholder="Search..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:" />
	</label>
	<?php
	$engines = \SearchWP\Settings::get_engines();
	$current_engine = isset( $_GET['swpengine'] ) ? esc_attr( $_GET['swpengine'] ) : 'default';
	?>
	<select name="swpengine" id="swpengine">
	<?php foreach ( $engines as $engine_name => $engine ) : ?>
	<option value="<?php echo esc_attr( $engine_name ); ?>"
	<?php selected( $current_engine, $engine_name ); ?>>
	<?php echo esc_html( $engine->get_label() ); ?>
	</option>
	<?php endforeach; ?>
	</select>
	<input type="submit" class="search-submit" value="Search" />
	</form>

Add an Engine Select Dropdown Box to Search Form

Building your own search form

Use SearchWP’s Shortcodes Extension

Modify the default search form to include an Engines dropdown

Create a Better WordPress Search Experience Today