Integrating Google Search on WordPress Blog

Lately, I have setup a custom Google search feature for my blog to give better result and to free my database from heavy search. Setting it up takes just a few minutes after following the steps from doshdosh blog. There are some problems with the default setup but I managed to tweak it and make if work for my theme.

Custom Google Search Basics

The custom Google search has two main components regardless of where you wanted to put it, be in on a blog site or any other type of websites that needs Google’s excellent search algorithm.

1. Search script – this is used to render the search text box where the user enters the search key. This is necessary since it will send the search query to Google. You can put it anywhere on your page.
2. Search result script – this is used to render the search result. This script must be placed on a dedicated page on your blog or website, then it will do the rest of the job for you.

The very first thing you need to do is to create the search result page where we will put our search result script. This page is necessary since you will use this to signup for Google’s Custom Search Engine account. You can either use a static HTML file or create a WordPress page.

I choose to create a WordPress page with title Search Results and the slug url / permalink is search-results. Just leave the content empty and save it. You can choose a different permalink as long as you take note on it as you will use that to signup for Google CSE.

Actually, I just followed the post from doshdosh blog and it helps a lot. In order to get these two scripts, you need to signup for Google’s Custom Search Engine. I will not discuss the details on how to get the codes. You can either directly go to the Google’s CSE home page or follow doshdosh step by step instructions. However, doshdosh post was a bit outdated, so you may go directly Google CSE homepage to be sure.

My search script looks like this:

<!-- custom google search -->
<form action="http://blog.lysender.com/search-results/" id="cse-search-box">
  <div>
	<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxx:zzzzzzzzz" />
	<input type="hidden" name="cof" value="FORID:11" />
	<input type="hidden" name="ie" value="UTF-8" />
	<input type="text" name="q" size="31" />
	<input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
<!-- custom google search -->

And my search results script looks like this:

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 640;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

Now, what will we do with these code?

Putting Things Together

First, we will decide where to put the search text box. When you signup for Google CSE, you choose the basic layout of the search box (the textbox and the search button plus the Google search logo). Depending on your selected layout, it can go in a single line or two lines or even three lines if the container is smaller than the required width.

I’d like to put my search box on the sidebar, however, the maximum width of the sidebar is smaller than the required width. I’d not rather choose to wrap the Search button to the second line as it gets ugly. Instead, I found a spot between the header and the main content where there is a large margin in between. It put it right-aligned. In that case, we need to edit header.php in our theme. If you want to use the sidebar, edit sidebar.php instead. You can add additional styling if you want.

Next is to edit our search result page. Since I used a WordPress page, I need to edit it from the admin panel. Be sure we are in HTML mode, then put the search results script and save the page.

Width Requirement

As you signup for Google CSE, the maximum width for the search result container is 795px (if I remember it correctly). Since my theme’s content is only 640px, I need to adjust the search results script a bit. Good thing it works without Google complaining.

As you can see in the search results script, on the JavaScript portion, there is a variable googleSearchFrameWidth. Simply set that to whatever with you like but be sure it is enough the contain the search results and probably the ads. Mine, I changed it to 640. Take a look at my script once again few paragraphs above.

Finally, I have the Google Custom Search Engine working. Thanks to my theme, the 640 width gracefully adjusts the search results but the Google logo almost bumps on the search result links (almost).

That’s it!