How to integrate Google Custom Search in WordPress

First of all, what is Google Custom search? Simply put is a search tool that you can integrate in your website so when someone looks for something on your website the results page uses Google’s search engine to seek the correct pages through your entire website. On the plus side, besides better search results (after all Google is the king of search), you can earn some extra money via Adsense if someone clicks on the the ads Google displays into the search results page.

Google custom search is still in beta

In this post I’ll treat the case of integrating the Google Custom search engine in WordPress, the most used free software platform for blogging.

What do you need?

• A blog running a self hosted version of WordPress. Sorry guy, but no wordpress.com domains.
• An HTML editor (I use Notepad ++)
• FTP client (I use FileZilla)
• An AdSense account
• Some time and a few HTML/CSS knowledge

Steps required to integrate custom search in WordPress

First, you have to sign in to your Google AdSense account and create a new ad slot for the custom search results ads: Adsense Setup – AdSense for Search. Once you get here select “Single page” to have all options on one page. I’ll explain to you what every field means:

• Search type: specifies where to search, the Internet or only your site
• Selected sites: put here every site URL you wish to search, one per each line
• Optional Keywords: if there’ any word combination you wish to add to the string of chars the used inputs in the Custom Search field here’s the place to mention them
• Site language: self explanatory, is the language your blog uses
• Your site encoding: go to your blog, right click on a free space, select “View Source” and look for “charset”. Select in the Adsense drop down list the encoding your website uses
• Country or territory for Google domain: to better list localized search results Google needs to know the region of your website’s visitors, where most of them come from
• Custom channel: give a name to the ad channel to better track its results in your Adsense reports
• Safe Search: specify if you want adult content to be omitted from displayed results
• Look and Feel: choose from a few themes available for the search box
• Text Box Length: specify the size of the search box as it will appear on your site
• Opening of search results page: here you’ll specify how the search results page will look like. Options are in the same page, in new windows (easiest to implement), or in a dedicated page on your site. For the last option you have to create a page on your blog (page, not post) and give it a name that you’ll specify in this Adsense wizard. Mine is called “search”, so the URL is http://www.johnpopes.com/search. Also enter the width of the search results area so that it will fit your theme layout.
• Ad location: where should google display ads on your search results page. Depending on what you choose the aforementioned Width of the results area has a bigger minimum value.
• The Palettes: here you’ll change the colors of the search results. Every change is reflected in a sample box on the left.
• Agree with the special terms
• Enter a name for this particular search unit and hit “Submit and Get Code”

The long Adsense setup wizard (click for large image)

Now you’re presented with two codes (if you chose to display results in the same page or in another page on your blog, not in a new window. Now the input box code goes in your theme. Mine was searchform.php. The second one goes into the page template (here is more info on how to create a WordPress page template) I’ve created starting with page.php and replaced the part with the_content(). Use this template when creating the page that will you’re your results (see the “Opening of search results page” step). Remember that those file names in your WordPress theme may be different, but also look for the code that displays your normal search box and create a new template for pages, where you replace the content with the provided code by Adsense.

Custom search results on my blog

If you want to change the look of the Custom Search you have to log back in Google Adsense and hit Adsense Setup – Manage Ads and Edit on your Custom Search module. That’s it. If you get stuck at one step or need more clarification don’t hesitate to post a comment below and I’ll help you.