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.
- Hand code somewhere in a custom function
- Use a plugin/widget
- Google Custom Search Plugin
- 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
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
- 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
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
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 Wordpress, or the Thesis theme?
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 or Thesis theme 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.
145
