Google Custom Search Setup

by Mike Nichols

The search capabilities of the standard WordPress widget is woefully lacking. It’s slow and misses a lot, and despite a host of plugins that enhance its capability, it still can’t hold a candle to Google Search.

This article shows you how to set up Google Custom Search for your site, how to get the various bits of code that Google offers, and how to install the search bar and search page on your site.

Setting up Google Custom Search

In your browser, go to Google Custom Search.

Screen 1: Click on this button to get started

Screen 1 will invite you to create a Custom Search Engine. Click the button.

Screen 2: Basic information, search parameters

Screen 2 is for basic information, like the name of your search engine.
1. Under “What do you want to search?” I suggest “Only sites I select.”
2. Under “Select some sites,” put in your site with an asterisk after it. This will search your entire site. Like this:

 http://thesisthemetools.com/*

Note that you can change these settings later if you choose.

Screen 3: My search engines

Screen 3: That’s it! You’re set up. Now it’s time to get the code to set up Google Custom Search on your site.

Get the Google Custom Search code for your site

From the “My search engines” screen (Screen 3), click “Control Panel.” Then in the Control Panel’s left sidebar, “Get Code.”

Control Panel: Traditional widget-search page method

This page lets you choose one of three methods to use Google Custom Search. Most people use the second radio box, “Host results on my website using an iframe.” This method allows you to have a text widget in your sidebar for your search box, and a separate search page for the results.
1. Enter the page on your site that will be your search page. You need to have set this page up in WordPress prior to this step, since you need to know the page’s URL.
2. Select where you will want the ads to appear. (Hey, it’s free, but Google’s got to make money somehow, right?)
3. The top box of code is for your widget. Copy this code. I suggest creating a document on your computer to hold this and your search page code from the next step. But if you don’t, you can always come back and get it again.
4. The bottom box is the code you will put in your search page. Copy it.

Control Panel: New Google Custom Search Element

This same page will also let you choose to use the new Google Custom Search Element, which shows the search results inline under the search box widget in the sidebar. If you want to try out this feature, click the third radio button and copy the code. Note that this is the same code you get if you click “custom search element” from the “My search engines” page.

You can customize the colors and look of the Google Custom Search Element. From the Control Panel, click on “Look and feel” in the left sidebar to customize your search element.

Installing the Google Custom Search code on your site

Installing the widget code into a text widget

Installing the code into a widget is the same whether you are using the more traditional Google Custom Search code, or the new Google Custom Search Element code.
1. From the Admin panel, click on Appearance, then Widgets.
2. Grab the text widget and drag it to the sidebar where you want it to appear.
3. Open the new text widget, give it a title, then put your Google Custom Search or Google Custom Search Element widget code into it.
4. Save and test.

If you are using the new Google Custom Search Element, you are done, since the search results will appear inline under your search widget in the sidebar.

Installing the search page code into your search page

If you are using the search method that requires a search page:
1. From the Admin panel, go to Pages, then edit the search page you created before getting the page code.
2. Click the HTML tab in the upper right hand corner of the editing box.
3. Paste the code for the search page here.
4. Save and test.

Google Custom Search is now set up!

There’s nothing more to do now but to enjoy faster, more accurate search for your site.

Should you ever choose to change some of your search settings, you can always go back to Google Custom Search, choose different parameters, and grab the new code.

I hope this has been easy and clear for you. Please feel free to comment or leave me an email using the “Contact” tab.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!