get_search_form()
Connects the search form, theme file searchform.php. If such a file is not present in the theme template, the default code for the search form will be used.
Don't forget about security
In the search field, a user can enter anything, for example, a working script <script>alert('aaaa');<script>. And if the query string is output on the page as is, such a script will be processed by the browser. If something malicious is written in it, your site can be easily hacked.
Therefore, to output the search query on the screen, always use the function get_search_query(). It will protect you from XSS attacks. This place is one of the weakest in the security of custom WordPress themes.
<?php echo get_search_query(); ?>
The output string can also be sanitized using: esc_attr(), esc_html().
Hooks from the function
Returns
null|String.
Usage
<?php get_search_form( $args ); ?>
- $args(true/false/array)
In version 5.2, the parameter turned into an array of arguments:
-
echo(true/false)
Whether to output the generated HTML code on the screen.
Default: true - aria_label(string)
The value of the attribute<form aria-label="XXX">. It will be useful to distinguish multiple forms on one page.
Default: ''
Before version 5.2, the parameter was called $echo, was boolean, and was responsible for outputting HTML to the screen:
- true — Output the code on the screen.
- false — return for processing.
Default: array()
-
Examples
#1 Default HTML search forms
If there is no searchform.php file in the theme, calling this function will display the default HTML form:
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <div> <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label> <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" /> <input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" /> </div> </form>
This HTML tag will be output if html5 support is NOT set in the theme. Let me remind you, it is set through function add_theme_support() as follows:
// Add HTML5 theme support.
add_action( 'after_setup_theme', 'wp_kama_after_setup_theme' );
function wp_kama_after_setup_theme() {
add_theme_support( 'html5', [ 'search-form' ] );
}
However, if html5 support is enabled, by default we get this HTML code for the search form:
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>"> <label> <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span> <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" /> </label> <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" /> </form>
That is, the field type changes from text to search: type="search".
Preference should be given to the html5 form, so always include this setting in the theme!
#2 Filter (restriction) of search results
In addition to the s query parameter, you can filter the search by post type. To do this, add another input field named post_type to the form:
<input type="hidden" value="post" name="post_type" />
As a result, when we send the form (submit) we will receive a query string of the following form: ?s=text&post_type=post. This means that the search will not be done for all types of posts, but only for the post type specified in the field name="post_type", in this case for the post type post. By default, it says post_type = any (any post type).
You can also filter search results however you like using the pre_get_posts hook.
#3 HTML of the search form through the file searchform.php
Create a file searchform.php in the theme folder with the code:
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ) ?>" > <label class="screen-reader-text" for="s">Search: </label> <input type="text" value="<?php echo get_search_query() ?>" name="s" id="s" /> <input type="submit" id="searchsubmit" value="find" /> </form>
Then, where you want display the search form, call the function get_search_form(), which will display the contents of the file searchform.php we just created:
<?php get_search_form(); ?>
Keep in mind that the search form must send a GET request to the homepage: action="<?php echo home_url( '/' ); ?>", and must have the parameter s (what to search for):
<input type="text" value=""" name="s" id="s" />
#4 HTML search forms with a hook
You can not create the themes searchform.php file, but change the HTML code of the form through the hook get_search_form, which should be inserted into the theme's functions.php file.
add_filter( 'get_search_form', 'my_search_form' );
function my_search_form( $form ) {
$form = '
<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
<label class="screen-reader-text" for="s">Search query:</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Find" />
</form>';
return $form;
}
Changelog
| Since 2.7.0 | Introduced. |
| Since 5.2.0 | The $args array parameter was added in place of an $echo boolean flag. |