Make WordPress Search Form as Google Custom Search Engine – Search box

Make The Default WordPress Search Form to search using Google Custom Search

WordPress initially check for "searchform.php" to display the search form. ( in child theme or in parent theme ) and this search form can access using "get_search_form()"

For demo purpose we are using Twenty Seventeen Theme

This is the Twenty Seventeen Theme – search form ( searchform.php )

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label for="<?php echo $unique_id; ?>">
		<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'twentyseventeen' ); ?></span>
	</label>
	<input type="search" id="<?php echo $unique_id; ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'twentyseventeen' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
	<button type="submit" class="search-submit"><?php echo twentyseventeen_get_svg( array( 'icon' => 'search' ) ); ?><span class="screen-reader-text"><?php echo _x( 'Search', 'submit button', 'twentyseventeen' ); ?></span></button>
</form>

Notice the form – "action" attribute – it points to the home URL, we can change this

action="<?php echo esc_url( home_url( '/' ) );

and then at the "input" field notice the name attribute – name="s"

name="s"

this is the search field parameter, and this is the default search parameter for wordpress

you can check this by directly entering in URL bar – "youdomain.com/?s=some-query-text

Now WordPress will search for "some-query-text" and display result

"s" is query paramater

Google Custom Search Query default parameter is "q" ( can change this, but if you changed to "s" again default wordpress result may appear, so change to any letter other then "s", "p"   )

To Make the Default WordPress search form to search using Google Custom Search – Change the query parameter "s" to "q"

i.e. the "input" filed "name" attribute value will be "q"

name="q"

and have to add Google Custom Search Engine script in the page where the form action navigate

action="<?php echo esc_url( home_url( '/' ) );

here it navigates to home URL, so add Google Custom Search engine script in home page

or change the form navigation URL to some other page and add Custom code engine script in that page alone.

action="<?php echo esc_url( home_url( '/search' ) );

now create a page "search" and add custom search engine script in that page alone.

Now When user search on any page – it navigates to "yourdomain.com/search" and will display the result using Google Custom Search Engine.

In Search form if you enter "nyc" then the page will navigate to "yourdomain.com/search/?q=nyc"

Google Custom Search Engine will get the search query term from the URL

You can add the Default search form in sidebar, footer or so . . using Widgets .. which is less wait, and no need to load google script all the time. and when user search's it will navigate to a page. and in that page alone Google custom search engine script will loads

---

Create simple Search Form for Google Custom Search Engine

Add Google Custom Search Engine in Website