WordPress Searchform, Template Tag or Template

There are several ways to integrate search function into a theme for WordPresss, usually built in a template, which is included into the theme. This is not in all cases necessary and can also be realized by using a WordPress template tag.

WordPress provides a function that allows an easy way to use the search form: get_search_form(). It’s similar to get_sidebar() or get_header() which is in use in most of the themes. The function is available since WordPress version 2.7 and is found in wp-includes/general-template.php.

HTML-Result

The output without changing the function looks like this in HTML.

    

        ' . __('Search for:') . '
        
        
    

Content in input field

Now, the function provides a hook to influence the search field. In this example, the text will be affected in the search box, so that the user finds an info there.
This is realized through a filter hook the_search_query. Within the function that is passed to this hook is also ascertained whether there is a value already in the field and if this is not the default value, but the returned value of the search. Then the value will left unchanged.
This function belongs in functions.php of the themes and can of course be adapted to your needs.

function fb_get_search_query() {
	$return = stripslashes( get_query_var( 's' ) );
	if ( $return == '' )
		$return = __( 'Type in your search keyword...', FB_BASIS_TEXTDOMAIN );
	else
		$return = apply_filters( 'get_search_query', $return );
	
	return $return;
}
add_filter( 'the_search_query', 'fb_get_search_query' );

Search field and special needs

The search form may not always be as you want it and therefore it makes sense to create a custom search field. Still offering the possibility of WordPress, it makes sense of a function or template called searchform.php, see more info further down, to integrate into the theme and provide the hooks with. Therefore Plugins can access the search form. A short example which includes a small JavaScript function.

First the function for functions.php of the theme.

function fb_get_search_form() {
    do_action( 'get_search_form' );

    $form = '

    
' . __('Search for:') . '
    
    
    
    
';

    echo apply_filters('get_search_form', $form);
}

The function already contains the above-mentioned hook the_search_query, and also the extension of the JavaScript onfocus="clearSearch();". This little function does ensure that the content of the search field is cleared when you click in the box. It only deletes the content if the content is Type in your search keyword….

function clearSearch() {
	queryBox = document.getElementById('s');

	if ( queryBox.value == 'Type in your search keyword...' ) {
		queryBox.value = '';
	}
	queryBox.style.color = '#292929';
}

This little script is stored in a file and is also loaded from the functions.php of the theme. This serves the following call, for further information about wp_enqueue_script you can go to https://wpengineer.com/use-javascript-libraries-in-and-of-wordpress/.
wp_enqueue_script( 'fb_scripts', get_bloginfo('template_directory') . '/js/script.js', '', '', true );


Template searchform.php

Of course, you are still be able to create an extra template for the search form. WordPress is looking for a template searchform.php in your theme. WordPress is looking in the first step for this template, if this is not found, since version 2.7 of WordPress, the form from the template tag get_search_form() get used.

Which way you go, that’s for sure depending on the working methods and habits, but there is a template tag available and it can save a template.