Use Search Box of WordPress to Send Query to Google CSE

At the onset, let me say that this is not really required to use WordPress Search Box! If you want to use Google Custom Search Engine (CSE), you can and you should use Google’s search box. Using Google CSE search box has several benefits.

However, for whatever reason, if you really want to use the search box of WordPress but perform CSE search through it –you can send search query to Google and get the results through CSE.

This tutorial assumes that you are well-versed with PHP and editing PHP files in WordPress. I recommend that you be careful while editing the code of your WP site. Here, I am giving you only clues –assuming that you know how to go about properly editing theme PHP code.

Go to Google CSE page and create a custom search engine. You can specify which website(s) your search engine should show the results from. You can also customize the look and feel of your CSE search engine and select from several search related features.

In the end, save your settings and get Google code to be embedded into your site to integrate newly create CSE into it.

The code you get from contains three parts:

1. A JavaScript code
2. Search box markup ( <gcse:searchbox></gcse:searchbox> )
3. Search result markup ( <gcse:searchresults-only></gcse:searchresults-only> )

TechWelkin publishes helpful WordPress tips for you!

Open your theme’s search.php file. In most WordPress themes, PHP file that shows the search results is named search.php –but it in some cases the name could be different. So, look for it and open the file that is responsible for showing search results.

Delete all the code in this file EXCEPT functions that create header, sidebar and footer (i.e. <?php get_header(); ?> AND  <?php get_sidebar(); ?> AND <?php get_footer(); ?>)

After <?php get_header(); ?> paste Google’s JavaScript and search result markup.

This essentially replaces the theme’s code that shows search results with the Google’s search result displaying code.

Just now you’ve pasted search result markup that you got from Google. Original markup looks like:

<gcse:searchresults-only></gcse:searchresults-only>

Now change this markup as:

<gcse:searchresults-only queryParameterName=”s”></gcse:searchresults-only>

This is it! Save the search.php file

Now, when you’ll enter a search query in your WordPress search box –the results will be shown from Google search and not from WordPress database.

WordPress search box sends the query string with a parameter named as “s”. Luckily, Google CSE allows you to define the queryParameterName. The search.php file now contains Google’s code and this code sends the defined parameter’s value to Google’s server. Google server search your WordPress website for the query and returns the results back to the search.php.

We hope this works for you. As mentioned earlier –please edit the WordPress code if you know what you are doing. Please feel free to ask me if you have any questions on the topic of WordPress search and Google CSE. I will be happy to try and help you. Thank you for using TechWelkin.