{"id":828,"date":"2018-03-14T13:53:30","date_gmt":"2018-03-14T08:23:30","guid":{"rendered":"http:\/\/holithemes.com\/blog\/?p=828"},"modified":"2018-03-14T13:53:30","modified_gmt":"2018-03-14T08:23:30","slug":"wordpress-search-form-as-google-custom-search-engine-search-box","status":"publish","type":"post","link":"https:\/\/holithemes.com\/blog\/wordpress-search-form-as-google-custom-search-engine-search-box\/","title":{"rendered":"Make WordPress Search Form as Google Custom Search Engine – Search box"},"content":{"rendered":"\n
Make The Default WordPress Search Form to search using Google Custom Search<\/p>\n\n\n\n
WordPress initially check for "searchform.php" to display the search form. ( in child theme or in parent theme )\u00a0and this search form can access using "get_search_form()"<\/p>\n\n\n\n<\/figure>\n\n\n\n
For demo purpose we are using Twenty Seventeen Theme<\/p>\n\n\n\n
This is the\u00a0Twenty Seventeen Theme – search form ( searchform.php )<\/p>\n\n\n\n
and then at the "input" field notice the name attribute – name="s"<\/p>\n\n\n\n
name="s"<\/code><\/pre>\n\n\n\n
this is the search field parameter, and this is the default search parameter for wordpress<\/p>\n\n\n\n
you can check this by directly entering in URL bar – "youdomain.com\/?s=some-query-text<\/p>\n\n\n\n
Now WordPress will search for "some-query-text" and display result<\/p>\n\n\n\n
"s" is query paramater<\/p>\n\n\n\n
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"\u00a0 \u00a0)<\/p>\n\n\n\n
To Make the Default WordPress search form to search using Google Custom Search – Change the query parameter "s" to "q"<\/strong><\/p>\n\n\n\n
i.e. the "input" filed "name" attribute value will be "q"<\/p>\n\n\n\n
name="q"<\/code><\/pre>\n\n\n\n
and have to add Google Custom Search Engine script in the page where the form action navigate<\/p>\n\n\n\n
now create a page "search" and add custom search engine script in that page alone.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Now When user search on any page – it navigates to "yourdomain.com\/search" and will display the result using Google Custom Search Engine.<\/p>\n\n\n\n
In Search form if you enter "nyc" then the page will navigate to "yourdomain.com\/search\/?q=nyc"<\/p>\n\n\n\n
Google Custom Search Engine will get the search query term from the URL<\/p>\n\n\n\n
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<\/p>\n\n\n\n
![\"\"](\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2018\/03\/Make-WordPress-Search-Form-as-Google-Custom-Search-Engine-Search-box-1.png\")
<\/figure>\n\n\n\n![\"Google](\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2018\/03\/image-13.png\")
<\/figure>\n\n\n\n