Add an Engine Select Dropdown Box to Search Form
Note: This documentation is for SearchWP 3.x
SearchWP 4: 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:
<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 = SWP()->settings['engines']; | |
$current_engine = isset( $_GET['swpengine'] ) ? esc_attr( $_GET['swpengine'] ) : 'default'; | |
?> | |
<select name="swpengine" id="swpengine"> | |
<?php foreach ( $engines as $engine => $engine_settings ) : ?> | |
<option value="<?php echo esc_attr( $engine ); ?>" | |
<?php selected( $current_engine, $engine ); ?>> | |
<?php echo isset( $engine_settings['searchwp_engine_label'] ) ? esc_html( $engine_settings['searchwp_engine_label'] ) : 'Default'; ?> | |
</option> | |
<?php endforeach; ?> | |
</select> | |
<input type="submit" class="search-submit" value="Search" /> | |
</form> |
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. This can be done by adding this snippet to your theme’s functions.php
:
<?php | |
/** | |
* Callback for SearchWP engine choice dropdown. Swaps out engine config for | |
* chosen engine at runtime. | |
* | |
* @param $settings | |
* @param $query | |
* | |
* @return mixed | |
*/ | |
function my_searchwp_engine_dropdown_handler( $settings, $query ) { | |
$engines = SWP()->settings['engines']; | |
$selected_engine = isset( $_GET['swpengine'] ) ? esc_attr( $_GET['swpengine'] ) : 'default'; | |
if ( isset( $engines[ $selected_engine ] ) ) { | |
$settings = $engines[ $selected_engine ]; | |
} | |
return $settings; | |
} | |
add_filter( 'searchwp_engine_settings_default', 'my_searchwp_engine_dropdown_handler', 10, 2 ); |
This snippet is solely responsible for checking to see what was chosen from the Engines dropdown, and using that engine configuration for the search.
Use SearchWP’s Shortcodes Extension
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 an Engines dropdown to choose from:
Note: requires Shortcodes version 1.2.1 or higher
<?php | |
// // ***** 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 = SWP()->settings['engines']; | |
$current_engine = isset( $_GET['swpengine'] ) ? esc_attr( $_GET['swpengine'] ) : 'default'; | |
?> | |
<select name="swpengine" id="swpengine"> | |
<?php foreach ( $engines as $engine => $engine_settings ) : ?> | |
<option value="<?php echo esc_attr( $engine ); ?>" | |
<?php selected( $current_engine, $engine ); ?>> | |
<?php echo isset( $engine_settings['searchwp_engine_label'] ) ? esc_html( $engine_settings['searchwp_engine_label'] ) : 'Default'; ?> | |
</option> | |
<?php endforeach; ?> | |
</select> | |
</p><?php | |
} | |
add_action( 'searchwp_shortcodes_after_input', 'my_searchwp_shortcodes_inject_engines' ); |
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 theme’s functions.php
(not the theme template file where you added the form code).
<?php | |
/** | |
* Callback for SearchWP engine choice dropdown. Swaps out engine config for | |
* chosen engine at runtime. | |
* | |
* @param $settings | |
* @param $query | |
* | |
* @return mixed | |
*/ | |
function my_searchwp_engine_dropdown_handler( $settings, $query ) { | |
$engines = SWP()->settings['engines']; | |
$selected_engine = isset( $_GET['swpengine'] ) ? esc_attr( $_GET['swpengine'] ) : 'default'; | |
if ( isset( $engines[ $selected_engine ] ) ) { | |
$settings = $engines[ $selected_engine ]; | |
} | |
return $settings; | |
} | |
add_filter( 'searchwp_engine_settings_default', 'my_searchwp_engine_dropdown_handler', 10, 2 ); |
That snippet will check the search request to see which engine was chosen from the dropdown and use it for the current search.
Modify the default search form to include an Engines dropdown
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. To use this filter you will be working in your theme’s functions.php
file.
To include an Engines dropdown in your site’s default search form, add the following to your theme’s functions.php
:
<?php | |
// Adds a SearchWP Engines dropdown to the search form | |
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 = SWP()->settings['engines']; | |
$current_engine = isset( $_GET['swpengine'] ) ? esc_attr( $_GET['swpengine'] ) : 'default'; | |
?> | |
<select name="swpengine" id="swpengine"> | |
<?php foreach ( $engines as $engine => $engine_settings ) : ?> | |
<option value="<?php echo esc_attr( $engine ); ?>" | |
<?php selected( $current_engine, $engine ); ?>> | |
<?php echo isset( $engine_settings['searchwp_engine_label'] ) ? esc_html( $engine_settings['searchwp_engine_label'] ) : 'Default'; ?> | |
</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' ); |
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 theme’s functions.php
(not the theme template file where you added the form code).
<?php | |
/** | |
* Callback for SearchWP engine choice dropdown. Swaps out engine config for | |
* chosen engine at runtime. | |
* | |
* @param $settings | |
* @param $query | |
* | |
* @return mixed | |
*/ | |
function my_searchwp_engine_dropdown_handler( $settings, $query ) { | |
$engines = SWP()->settings['engines']; | |
$selected_engine = isset( $_GET['swpengine'] ) ? esc_attr( $_GET['swpengine'] ) : 'default'; | |
if ( isset( $engines[ $selected_engine ] ) ) { | |
$settings = $engines[ $selected_engine ]; | |
} | |
return $settings; | |
} | |
add_filter( 'searchwp_engine_settings_default', 'my_searchwp_engine_dropdown_handler', 10, 2 ); |