How to Integrate Google Custom Search Engine to WordPress

If you are running a website, or a blog, most probably you have a search box to allow your reader to search for content in your site. WordPress comes with its own search feature and search form. It works well, except that it is pretty basic and can’t handle complicated search functions. A great alternative to the default WordPress search is to replace it with a Google Custom Search Engine (GCSE).

If you are not aware, the Google Custom Search Engine is a service provided by Google to allow anyone to create a customized search engine. The backend is powered by the Google searchbot, but you are able to customize the search results that appear.

Since the search engine is hosted at Google, the main advantage of using a GCSE is that you can ease some load off your server and give your visitors a better search experience. In addition, you can also integrate your Google Analytics and Google Adsense to the custom search engine and track what your visitors are searching and at the same time make some extra income.

In brief, this is what we are going to do.

1. Create a Google Custom Search Engine (GCSE).
2. Customize your GCSE.
3. Integrate to your WordPress site

1. Create a Google Custom Search Engine (GCSE)

Go to Google Custom Search and click the big “Create a Custom Search Engine” button. You will have to login to your Google account.

gcse-create-search-engine

Give your custom search engine a name and description. Under the “Sites to search” field, enter “www.yourdomain.com/*” if you only want all pages from the main domain to be available. For those who wanted to include sub-domains as well, use “domain.com” or “*.yourdomain.com” instead.

If you have no intention to pay for the custom search engine, select the Standard edition. The “Site search” edition costs $100 per year and it allows you to remove Google branding and ads.

gcse-search-engine-details

The next step is to customize the look and feel of the GCSE. You can pick from any of the template or customize the default style to your own. Things that you can customize include the font-family, background-color, search input color, search result color, and many other stuff.

gcse-layout-customization

Lastly, you will be shown a bunch of code where you need to copy and paste to the place where you want the GCSE to appear. We are going to ignore this for the time being as we are going to add more customization to the custom search engine.

2. Customizing the Google Custom Search Engine

Go to the Custom Search Control Panel and select your newly created custom search engine.

There are plenty of things that you can configure here. You can take your time to go through the option one by one. Some of the more important one includes: Autocompletions, Google Analytics, Make money and Look and feel. You can even go into the details and refine the results to appear in the result page

Note: The easiest way is to add the code to your theme where you want it to appear. However, in some cases, the search form might not integrate well with your theme. One alternative that we propose is to modify the search box in your theme, and get it to serve Google search result.

Click on the “Look and feel” link at the left sidebar. Under the “Choose a Layout” section, select “Results only”.

gcse-select-results-only

Next, press the “Save and Get Code” button. Copy the code.

3. Integrate the Search Result to your WordPress site

Log in to your WordPress dashboard and install (and activate) the plugin “WP Unformatted“.

Next, create a new page. Name the page “Search Result” (or whatever search title you want to show to your reader). In the text editor, go to HTML mode and paste the GCSE code in. Save the page (If you are using WP multisite, you will need to install the Unfiltered MU plugin to allow administrators and editors to insert code in post/page).

Important: Add a new custom field “sponge” (without the quote) and set the value to “1″ (without the quote).

Publish the page. Copy the permalink of this search result page.

Next, you have to open up the theme folder and search for the search form code. The default is in the “searchform.php” file, but in case you don’t find the file there, search for it in “header.php“.

The default searchform code should look like this (based on the TwentyEleven theme):

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
    <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
    <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
</form>

You need to replace:

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

with

action="your-newly-created-search-result-page-permalink"

replacing “your-newly-created-search-result-page-permalink” with the permalink that you have copied earlier.

Next, change the field:

<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />

to

<input type="text" class="field" name="q" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />

replacing the name="s" to name="q"

Save the changes to your server.

Your custom search engine should be working now. Perform a search on your site and see the custom search results load up.

Alternatively, if you have chosen the “Two Page” option in the GCSE Look and Feel page, you can use the above method to create a search result page, but add the search form code to the theme file where you want it to appear, probably in the sidebar/widget area.

In addition, you will have to update the GCSE option page with the search result page permalink so the search query can be redirected correctly to the right URL.