adding google custom search to wordpress

custom search

One of the new features i’ve added to this blog is the google custom search engine. Previously, i only used the wordpress in built search function but it’s not very accurate and, well, it’s not google.

This site has about 1635 posts & pages at the minute. All of them are indexed in google. Quite often i’ll remember writing a post and i’ll want to reference it in the current post. But i won’t remember the exact title or the post or even when i wrote it…

So that leaves me pretty screwed if i’m trying to find a certain post. Allow me to demonstrate using an example… if i google ‘smemon gmail’, this post is ranked 2nd. And that’s the post i was looking for… using the wordpress in built search, i’d get a variety of results ordered by the most recent time i’ve mentioned ‘gmail’ (which would be quite a bit).

So google just knows what you want… it knows that you’re probably looking for the most popular post and not just the most recent post… and that’s the way it should be. The default wordpress search is simple and probably fine for small blogs, but when your blog is approaching 500,000 words, it can get a little frustrating searching for things.

So how do you add google custom search to your blog? Easy. There are one or two plugins that you can get, but right now i couldn’t get any of them to work properly so i just manually copy and pasted code myself to get it working.

Step 1

Sign up to google custom search here.

Step 2

Create a custom search engine. Give it a name, description and limit searches to your site /url only.

custom search

Step 3

Get search box code.

google search code

Where you want you search box to appear, paste in the code (it’s something like the code below).

<form action=”http://www.smemon.com/search” id=”cse-search-box”>
<div>
<input type=”hidden” name=”cx” value=”04744435458953894rfjvjhffgg” />
<input type=”hidden” name=”cof” value=”FORID:10″ />
<input type=”hidden” name=”ie” value=”UTF-8″ />
<input type=”text” name=”q” size=”31″ />
<input type=”submit” name=”sa” value=”Search” />
</div>
</form>

For now, stick it in a widget in your sidebar just to make sure it works and doesn’t break your theme layout. Get it working first, then worry about the layout later.

Step 4

Create a new page. Call it ‘Search’. Edit the page content and paste this in (make sure you’re in HTML view and not visual view);

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

Save it and then sit back and admire. You’ve just created a custom search engine.

Step 5 (if step 4 didn’t go smoothly)

When you create a custom search engine, you get ads on your results pages whether you like it or not. You can’t take out the ads, but you can change where the appear. Right, Top and Right, Top and Bottom.

If you don’t have much width on your theme, i highly recommend you choose ‘top and bottom’. The other two options need a minimum 795px in width to display search results which will break most page layouts unless you get rid of the sidebar and create a custom page template (but that’s getting more complicated and i’m too lazy to get in to that now – i will some day!).

Leave a Reply