SKIP navigation
Buildit Template Widgets
BuilditInformation Services

This page's main content:

buildit documentation

note:

Unlike the other widgets, this widget can be used in any template - except the WTA_03 template. But be sure to note that this widget is only for use in the left-hand column of any usable template.

widget: 'Local Search'

looks like this:

eNotes Archive

Why use it?

Do you have lots of content? Lots of pages? Would you like for users to be able to perform a search that only shows results for pages from your site? Well, the 'Local Search' widget might be just the ticket.

How to use it

Let's start by saying that this particular widget is not a particularly easy one to implement. Even so, carefully reading and following the directions on this page should get you where you want to go.

The main 'UNO Search' function is based upon the Google Custom Search Engine (CSE). The 'Local Search' option will utilize that service as well. So begin by setting up your own account on Google.

Examples:

Try the example at http://www.unomaha.edu/enotes/archive3.php. Try searching from that page's 'eNotes Archive' widget for a look at the results page. You can try another example at http://www.unomaha.edu/news/releases/. Or you can just try the one on this very page. So now that we know where we're headed ... let's get going!

Part I – Create your Google Custom Search Engine (CSE)

  1. Navigate to the Google CSE site.
  2. If you don't already have a Google account, you'll need to create one now.
  3. Once that's all taken care of, click the 'Create a Custom Search Engine' button to get started.
  4. Sign into your account at the prompt.
  5. Now you're ready to get it all set up.

Fill out the form in step one using your own parameters (There are many possibilites with Google's CSE &ndash some quite advanced – these instructions cover the basics, and should be sufficient for most users. Use the Google CSE site to learn more.):

Google CSE screen 1

Test out your CSE in step two:

Google CSE screen 2

If everything's working to your satisfaction, click the 'Finish' button. Don't worry, you can always go back and re-configure your parameters later.

Part II – Style your CSE

Click the 'Control Panel' link:

Google CSE screen 3

Now that you're at the 'Control Panel' you'll notice that, as promised, you again have access to the parameters you set in step one. You can ignore those now and focus in on the row of links that have appeared near the top of that page. The only link we're concerned with here is the one for 'Look and Feel':

Google CSE screen 4

Change the values for the parameters highlighted in the graphic above. Note that those are zeros (0). It is important that you use the values shown. We want our search result pages to reflect the styling of our other pages, and any deviation from the sitewide the link and/or background colors will only serve to confuse users – and that is a bad thing. Standardized colors, placements, and functionalities free the user from having to guess, or re-learn navigation upon arrival at new pages – 'usability' is a good thing. Click the 'Save Changes' button.

While still at your Google CSE 'Control Panel' — click the 'Code' tab:

Google CSE screen 8

Under the 'Search results hosting options' sub-heading, select the 'Host results on your website' radio button. Skip down the page and copy the code in the 'Search box code' window (highlighted). Paste that code into a new 'Notepad' or 'Simpletext' file and you'll get something like the code below. There's just one part you'll need – the 'value' on the third line. It will be different than this one, but will be something equally long and obtuse no doubt. In the case below that 'value' would be '002646972799999025672:i0lbkpfqblc' – we'll come back and copy your 'value' in Part III.

<form action="http://www.google.com/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="002646972799999025672:i0lbkpfqblc" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
   </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>

Part III – Create Your Widget

OK - now we're ready to set up the widget. Create a new file: DW > File > New > Blank Page > – delete the entire contents of this new file, then copy the code below and paste it into that blank file. Now save it into your site's includes folder (/inc/) as 'search-local.inc' – by saving it as an include you'll be able to more easily insert it into multiple pages. In the code, you'll only need to be concerned about the sections in red. Don't mess with any of the other parts of the code. For the 'form action' url, use something like 'http://www.unomaha.edu/yoursite/search-result.php' (you'll be creating that page later). :

<!-- Google CSE Search Box Begins -->
<form action="http://www.unomaha.edu/news/releases/search-result.php" id="searchbox_002646972799999025672:i0lbkpfqblc">
  <div id="lsearch-118">
  <h4>Search these pages:</h4>
    <div id="lsearch-118-pad">
      <h6><label>eNotes Archive</label></h6>
      <div class="cse-branding-right">
        <div class="cse-branding-form">
          <input type="hidden" name="cx" value="002646972799999025672:i0lbkpfqblc" />
          <input type="hidden" name="cof" value="FORID:11" />
          <input type="hidden" name="ie" value="UTF-8" />
          <input type="text" name="q" id="search-local" class="menu" style="border:1px solid #DEDEDE;width:101px;" />
          <input type="image" name="sa" src="http://www.unomaha.edu/img/btn/08/go-118.gif" alt="go" style="vertical-align:middle;margin:3px 0 0 0;" />
      </div>
    </div>
  </div>
</div>
</form>
<!-- Google CSE Search Box Ends -->

Remember the your special 'value' from your 'Notepad' or 'Simpletext' file? Copy that value and paste it first into the 'id' in the 'form action' line of your 'search-local.inc' file (be sure to leave the beginning 'searchbox_' part). Next paste that same 'value' in place of the second 'value' in your 'search-local.inc' file. Now change the text inside the <h6> tag to describe what is being searched – try to keep it short and sweet.

Whew! That concludes your work on the include. Save it and put it up to the server. You can discard your 'Notepad' or 'Simpletext' file now too.

Part IV – Create Your Search Results Page

First you'll need to download the 'Search Results Template (wta_02_search_results)' zip file from the buildit site at https://www.unomaha.edu/buildit/now/dnld/wta_02_search_results.zip. Open it up and add the 'wta_02_search_result.dwt' file to the 'Templates' folder in your Dreamweaver site. You may need the Photoshop file to create a custom header graphic for your 'search results' page. It is important to faithfully adhere to the usage guidelines that follow. This is because we want users to be sure that the results page is for your site – and not the whole unomaha.edu domain. We accomplish this by a) having it explicitly stated on your header graphic, and b) by a having the 'hot' box on the results page. Other 'standard' clues will be your page <title>, tabs, and breadcrumbs. Again – please be sure and follow these steps.

Let's start with the header graphic. If you're already using a custom header graphic you can start with that. If not, use the 'header-local-search.psd' file from the download. In either case edit the text layer so that your site name ends with 'Search Results' like these examples:

Enotes Archive Search Results Header

News and Events Search Results Header

Save your 'header-local-search' graphic to your site's images folder.

Let's move on to your 'search results' page. In Dreamweaver, go File > New > Page from Template > wta_02_search_results. Save the resulting file as 'search-results.php' – now let's edit it.

  1. Start with the <title> (UNO | Yoursite | Search Results).
  2. Change the '00 Palette' to match the one your existing pages use.
  3. Edit the '01A Breadcrumbs'.
  4. Edit the '01B Page Title'.
  5. Insert your new '01C Header Image' also.
  6. Change the '02 Tabs' to point to your own tabs file.
  7. Edit the '03A Local Search Include' path to point to the one you created in the steps above (search-local.inc). Your path will depend upon where your site lives, but for users on avalon it would look something like this: <?php include('/web/yoursite/inc/search-local.inc'); ?>
  8. If you want any or all of these, edit them accordingly: '03B Inside Include', '03C Unomaha Include', '03D Also Include'.
  9. Now, in the '05 Hot Box' you'll find the 'Hot Widget' that let's folks see the other search options available – underscoring the 'local search' nature of your 'results page' and providing added utility. Edit the 'Contact Us' link in the 'Hot Widget' – that link must point to your own contact page.
  10. Don't forget to update the '06 Footer'.
  11. And, if you're using it, edit the '07 Analytics' area of the template.
  12. And finally, you need to insert the code that will display the actual search results (did I say finally?!)

Remember the Google CSE 'Control Panel'? — click the 'Code' tab if you're not already there. Look at the second window on that page: 'Search results code' – copy the contents of that window (highlighted) and paste it into '04 Search Results Code' of your 'search-result.php' page.

Google CSE screen 9

That code will look something like this (it'll have your 'special value' though):

<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 your 'search-results.php' page and put it up to the server. Go to your 'search-results.php' page on the web and try a search term or two using the search widget. If it's all working, go back and add the php code to call your 'local search' include to the left-hand column of all your relevant pages. Remember to test those pages out too. That's all there is to it — now relax, you deserve it.

note:

Don't make changes that compromise the designed function or appearance of the widgets. They should look, and behave, the same way no matter where they appear. Changes to font sizes, link colors, and/or other elements cause uncertainty for users, and compromise the visual and functional design that is part of the UNO brand. So please, use the widgets only as they are designed, and only for their intended uses.

Content last modified: June 14, 2011, 2:38pm