WordPress/Thesis Tutorial: Custom Google Search Engine

One of the things you always want to provide visitors to your website is a good search tool. The default search tool that comes standard with WordPress is adequate. However, if your website covers a topic, or area of topics, or you have a Google AdSense account, you can take advantage of Google’s Custom Search Tool.

The Google’s Custom Search Tool offers a few options during setup:

  • What websites you want to search (other than your own)
  • What language to use (a long list included during setup)
  • Ability to refine your search by using the sites you list and the web and deciding how to prioritize that
  • The “look and feel” and how its displayed on your website

It’s possible to search more than just the WordPress website you are managing. If you have other websites that are related by your ownership, or they cover the same topics, you can add them to the list of sites to search. Be sure to pay attention to how you format what sites you want searched. There are some options to specify with how Google indexes the sites you submit.

The last bit to mention about signup is whether you want the standard or business edition of the tool. Standard is free but places ads on the results pages. Business costs $100 a year but includes no ads and some additional features so its up to you. For this tutorial I have selected the Standard edition.

Getting Google Custom Search Engine (CSE) into Thesis

You have a couple of options to do this.

  1. Hand code somewhere in a custom function
  2. Use a plugin/widget
    1. Google Custom Search Plugin
    2. Text widget

I am going to do the latter. However, depending on what your needs are you could use the plugin I have referenced in the list above.

Get a Google Custom Search Tool

After you select your options Google gives you a “test” search box to try out the tool. Once you tried that click “finish” and then you can tweak some other settings including adding a connection to your AdSense account if you have one.

  • Go register for an account at Google’s Custom Search Tool
    • If you already have an AdSense account, login with those credentials
  • Create a New Search Engine
  • At the “Look and Feel” page, choose the first style with the watermark
Click on image to enlarge

Click on image to enlarge

On the Code tab

  • choose the iframe option
  • specify a URL http://your_domain_name/search_results/
    • you will create this page in WordPress shortly so take note of the URL you give it
  • place advertising on the right
  • copy the code under “Search box code
Click on image to enlarge

Click on image to enlarge

  • open a new tab in your web browser and login to the admin area of your WordPress installation
  • navigate to Appearance/Widgets
  • move a new “text” widget over to whichever sidebar you would like the search bar to display
  • leave the title blank and paste the code into the content area
  • click save
    • Note in my example I have removed the following code to remove the “search” button. Hitting return makes search happen.  <input type=”submit” name=”sa” value=”Search” />
Click image to see larger version

Click image to see larger version

Once that is saved its time to create your search results page.

  • Make a full backup of yourWordpress site
  • Create a new page named Search
  • Edit the post slug if needed to ensure Permalink is http://your_domain_name/search/
  • Click the HTML tab
  • Paste theGoogle Search result code.
  • Keep the default page template.
  • Write down the Page ID as given in the URL of the web browser because it will be needed later. The Page ID is the number after the post= argument. In my case,the Search Page ID is 7: …/wp-admin/page.php?action=edit&post=7
  • Save and publish the page.
  • Create a new page named “Search Results
  • Edit the post slug if needed to ensure Permalink is http://your_domain_name/search_results/
    • This is the permalink you specified in the Google Custom Search Engine creation process above
  • Click the HTML tab
  • Paste the Google Search result code
  • Make sure to keep the page in HTML mode!
  • Save and publish the page
Click to see larger version

Click to see larger version

Note: I have changed the width in the line, var googleSearchFrameWidth = 460;

The default value is much to large for my design so I adjusted that in the code above.

Some extra CSS styling goodness

In order to get everything tightened up and looking proper in my template I added the following CSS to my custom.css file. Please adjust yours to suit.

The first bit defines how wide my search box is in the sidebar:

.custom #cse-search-box div input {
width: 195px;
}

The second bit defines how wide my search results area is on the results page:

.custom #cse-search-results {
width: 475px;
}

The third bit defines how wide my search results iframe is, and hides any overflow:

.custom #cse-search-results iframe{
width: 475px;
overflow: hidden;
}

Conclusion

That’s pretty much it in a nutshell. Took a bit of tweaking back and forth to get things to look proper as I imagine that will be the case for anyone following this tutorial. All together took me about 2 hours to get this all sorted. The results page and the iframe from Google were tricky but not impossible to get to behave.

As always, welcome your comments and questions below. Hope this helps.

Do you need help with your website?

If you are a web designer or web developer needing help, or a 'do-it-yourselfer' looking for a professional Internet presence I can help. If you need help with a specific WordPress issue or a complete website, I offer consultation, complete web design, and web development services. Get in touch and we can talk about your needs and start the process.

, , , , , , ,

Do you need a WordPress consultant? Someone with experience?

I specialize in making WordPress work for people.

If you need help with a specific WordPress issue, I offer consultation, complete web design, and web development services.

Get in touch and we can talk about your needs and start the process.

  • great overview, thanks!

  • Hi Bert,
    Great info (as always!).
    Is there an easy way to adapt this code to work with the Custom Search Element feature (to display results in an overlay)?
    Thanks,
    Josh

  • Chris

    I can't get my width to change, I've tried changing it in both the Javascript and with CSS to no avail. Any ideas?

  • I'm willing to bet the width is hard coded in the html. Check the tag
    for the input box.

  • Pingback: WordPress/Thesis Tutorial: Custom Google Search Engine — berchman.com()

  • Thanks for the tutorial. It works for the search.. however now all of my posts go to “http://lazysupper.com/http:/lazysupper.com/search_results/” !!

    I didn't change anything in any php files or do anything other than what you described above.

    Now I can't go to individual posts.

    Remedy or thoughts?

  • You may have resolved it. I see the result go to http://lazysupper.com/search-results/
    …..

  • Nope. Not resolved.

    The search results page is there (and search works fine).

    However, ALL of my blog post headings now point to “http://lazysupper.com/http:/lazysupper.com/search_results/”

    I can't figure out why it would do this?

  • Actually… I've since figured out what I did. I changed the permalinks for all permalinks to point to search_results.

    it seems I cannot change the permalink for a single page. they all have to follow the same format. (So my search results page is “http://lazysupper.com/?page_id=645” and I can't seem to change it.)

    Thoughts?

  • Yan

    Great tut! I love the fact that you added the CSS styling at the end of it but there is something I'm not sure about. It seems like whenever I use your search box, there is only one Google ad floated to the right. How did you do that?

  • Interesting because I see no ads floated to the right when I search.
    Can you email me a screen shot?

  • Aaron

    Thanks for the article on this, much appreciated.

  • Aaron

    Thanks for the article on this, much appreciated.

  • Pingback: 71 Best Tutorials for Thesis Wordpress Theme Users()

  • Pingback: 250+ Thesis Theme Resources | Sahil Kotak dot Com()

  • This is a great little tutorial, worked perfectly, not as much going back and forth as you alluded to. Very impressed. Thank you.

  • This is a great little tutorial, worked perfectly, not as much going back and forth as you alluded to. Very impressed. Thank you.

  • wow very helpful for someone who has 'zero' knowledge about coding.
    I need to adjust the iframe as it is overflowing over the side bar. Would assist me with that?
    tahnks
    H

  • 'zero' knowledge like me, that's what I meant lol
    I have figured out the css iframe css issue as well.
    thanks a bunch!
    H

  • Will

    It looks like the Google Custom Search Tool pages have changed. Both this tutorial and the WordPress plugin instructions can't be followed because the code page at Google no longer seems to allow for hosting the results on a page on your site. You can host them at Google or have them listed in the sidebar below your widget. (looks terrible). None of the control panel pages or options give you a way to do this as described.

  • Will

    For anyone else that may run into this, I discovered that you can not use the default setup wizard that comes up when you go to the Custom Google Search Tool. Fro some reason the wizard no longer gives you the option to host the results on your own page. You must click the button that says you want all Google Search creation options on one page. Then you will find the option to host the results on your own site's page.

  • Will, Thanks so much for sharing what you have found. Really valuable info. Appreciate it much.
    Happy New Year!

  • Will

    It looks like the Google Custom Search Tool pages have changed. Both this tutorial and the WordPress plugin instructions can't be followed because the code page at Google no longer seems to allow for hosting the results on a page on your site. You can host them at Google or have them listed in the sidebar below your widget. (looks terrible). None of the control panel pages or options give you a way to do this as described.

  • Will

    For anyone else that may run into this, I discovered that you can not use the default setup wizard that comes up when you go to the Custom Google Search Tool. Fro some reason the wizard no longer gives you the option to host the results on your own page. You must click the button that says you want all Google Search creation options on one page. Then you will find the option to host the results on your own site's page.

  • Will, Thanks so much for sharing what you have found. Really valuable info. Appreciate it much.
    Happy New Year!

  • I know AdSense typically takes a while to show up on a site, but I've waited a few hours and still no dice. I followed those steps but when you press enter, you're brought to my home page. Do you know what I've done wrong? http://www.askthedentist.com Thank you!

  • Pingback: How to Integrate Google Search in Your WordPress Blog | WebTechWise()

  • Pingback: 47 Customizations for the Thesis Theme()

  • Good tutorial, but couple of questions:
    1. You created a http://your_domain_name/search/ but inserted “Google Search result code” in it. Shouldn’t this be “Search boc code”?

    2. You asked to keep a note of the page ID to be used later, but I can’t see any use of it anywhere. Did I miss something?

  • Hi,
    The search box code you copy from Google is pasted into a sidebar widget. And as for the ID I believe you are correct. I don't see a way for it to be used. 🙂

  • Pingback: Building a Site Like This With Wordpress and Thesis()

  • Pingback: velayutham mp3 songs free download|velayutham mp3 download| | ConcerningLyrics.info()

  • Pingback: The Huge Thesis Compilation| Skins , Resources , Tutorials()

  • Great tutorial. Thanks for sharing.

  • Amy

    Thanks so much for this!

  • I was able to fix the issue.
    Thanks,

  • Pingback: How To Customize Thesis Theme for WordPress – A List Of Complete Guide | Bridging IT Gaps()

  • Thanks! This helped me get search straightened out so I could stop using those questionable search plugins.

  • Sahar

    this is simple great thanks , but i need to ask how can i place google search on top in my home page pls help me and i need to activate comments on my site so do help me on that to thanks 

  • Anonymous

    Great tutorial and as a result I got myself a searcbox and results page

    However I only get two search results shoing on the reults page!
    Would  you know a way to fix this and or what the problem could be

    Best Regards
    griffin6311

  • thanks, finally found how to create custom search in my thesis

  • Steve

    Do you know how to highlight the search terms using Thesis’ default search widget?

  • hlw sir i’m having problem with google custom search! i exactly did what you told. May be something went wrong……..