How to Add Google Search in Thesis Theme

by Jay Pabs on January 25, 2011

In this tutorial I will teach you on how to add Google search in your Thesis theme. Be sure you have “Thesis OpenHook” plugin. If you don’t have you can still use the custom file editor that came with Thesis theme.

You need to have a Google account in order to use Google search. If you have existing accounts please follow this steps to get the code from Google search.

  1. Open http://www.google.com/cse/.
  2. Click “Create a Custom Search Engine”.
  3. Login using your Google Account.
  4. In the “Set up your search engine” enter all the necessary information and click next.
  5. Click next on “Try it out” page after you try your search engine.
  6. Click “Look and feel” and select “Iframe”.
  7. Click Get code.
  8. Create a page (not post) in your WordPress site and name it “search”.

After you save your page the URL should look like this:

http://www.example.com/search/

Now, copy this URL and paste it on “Specify the url in your site where you want the search results to appear:” in Google Custom Search.

Here’s the screenshot of my own Google CSE.

Google Custom Search Code

We have two important codes here to integrate in our website. The Search box code and the Search results code.

  1. Copy the code under the “Search box code” on your site. You can select to appear it on your sidebar.
  2. Open the Thesis OpenHook under Appearance on your WordPress Dashboard and look for “Post Box Top”.

Paste the code from Google CSE under “Search results code” in “Post Box Top”.

You will then see a similar screenshot below:

Google Custom Search Result Code

When you search on your site the result will appear on the content of your website.

{ 10 comments… read them below or add one }

jerel barnes February 3, 2011 at 3:44 pm

hey, how do i get it to not show it like it does when you search for something on my blog

Reply

jerel barnes February 4, 2011 at 2:47 am

Like how do I stop it from leaking over into my sidebar?

Reply

Jay Pabs February 4, 2011 at 8:46 am

Hi,

I can’t get what you mean. Do you mean the search form at the right side bar of your site?

Reply

jerel barnes February 4, 2011 at 9:44 am

Type in the search bar on my blog. When the results come up it looks really bad. Text and ads leak over into my sidebar. I do not know how to get it to fit just into the context area like your blog

Reply

Jay Pabs February 4, 2011 at 10:19 am

I see.

But did you follow my instruction? You should put the result under the “Post Box Top” if you are using Thesis OpenHook.

Reply

jerel barnes February 5, 2011 at 4:19 am

yes i followed your instructions exactly

Reply

Jay Pabs February 5, 2011 at 1:47 pm

Did you set the googleSearchFrameWidth like?

var googleSearchFrameWidth = 600;

Reply

jerel barnes February 6, 2011 at 7:30 am

Where do I do that at?

Reply

Sara September 1, 2011 at 1:39 am

Thank you, thank you for this! I wasn’t able to integrate this to my site before reading this post today!

Reply

Jake December 1, 2011 at 11:27 pm

Thank you for this tutorial. I am looking for this for a week and found yours very helpful.

Reply

Leave a Comment

Current day month ye@r *

Previous post:

Next post: