Like Quertime on Facebook!

How to Create a Google Custom Search Engine

Updated on by in Search Engines

Undoubtedly Google Search is the most-used search engine on the web. With the introduction of Google Custom Search Engine (Google CSE), you can add the powerful Google search box to your website or blog helping people find what they need such as blog posts, pages and images on your site.

set-up-wordpress-google-custom-search

With Google Custom Search you can:

  • Host the search box and search result page on your own website.
  • Search through one or more websites, or specific web pages.
  • Customize the format of the search results to match your website.

Below are step-by-step instructions where you can follow to create your own Google Custom Search:

1. Go to Google Custom Search page and log in to the service by using your Google account’s credentials.

2. Enter the following information:

  • Sites to search: e.g. www.mysite.com/*
  • Language: e.g. English
  • Name of the search engine: e.g. Mobile Apps Search Engine

google-custom-search-settings

Sites to Search’s URL Formatting

  • Individual pages: e.g. specifying www.mysite.com/mypage.html will only include mypage.html page from www.mysite.com.
  • Entire site: e.g. specifying www.mysite.com/* will include all the pages from www.mysite.com.
  • Parts of sites: e.g. specifying www.mysite.com/docs/* will only include files from ‘docs’ base.
  • Entire domain: e.g. specify *.mysite.com will include the entire domain.

3. Click on the ‘Create’ button to set up your custom search engine.

4. Now your search engine has been created, you may click on ‘Control Panel’ to modify or customize it.

google-custom-search-created

5. In the Settings page, you may enter the description and keywords for your custom search engine.

6. You may also give your search engine some additional features such as enabling ‘Image Search’ and ‘Speech Input’.

7. On the left sidebar select the ‘Look and feel’ then set the layout of your search engine. There are other customization settings like ‘Themes’, ‘Customize’ and ‘Thumbnails’ where you can tweak to match the style of your website.

google-custom-search-layout

8. Once you’re satisfied with the result display, save it and get the code.

9. Now copy the custom search element code and paste it in the page where you’d like the custom search element to appear.

Integrating Google Custom Search into WordPress Theme

If you are running a WordPress powered website and would like to add Google Custom Search into it, here are the steps we’ve taken for adding the search box on Quertime.com. You may use it as reference for creating yours.

1. We paste below code in our WordPress theme’s header.php for displaying the search box.

<form action="https://www.quertime.com/search-results/" id="cse-search-box">
  <div id="searchform">
    <input type="hidden" name="cx" value="007197546127051102533:ntzgmbf9hdm" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="26" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

Note: To change the width of the search result’s frame, set the value of FORID as 11.

<input name="cof" type="hidden" value="FORID:11" />

2. Create a ‘search-results’ php file (filename: search-results.php) then locate it into the WordPress theme’s folder. Next, copy and paste the following code into the file.

<?php
/*
Template Name: Search Results
 */
?>

<?php get_header(); ?>

<div id="content">
<h2>Search Results</h2>
<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 640;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Note: The value for var googleSearchFrameWidth can be changed to adjust the width of the search result’s frame.

3. Next login to WordPress Admin. On the left sidebar, go to ‘Pages’ then select ‘Add New’.

4. Enter the title as ‘Search Results’. On the right sidebar, under ‘Page Attributes’ select ‘Search Results’ as the template.

assign-custom-page-template

5. Publish the page. This custom page template (permalink: https://www.quertime.com/search-results/) is used for displaying Google search results.

6. Done. Now visitors can search for blog posts, images and other content within and only limited to Quertime.com. The results displayed will of course be real Google search results.

Author:

This post is published by Quertime.com writer / editor. Connect us on Facebook and follow us on X Twitter.

Tags: , , ,

Comments are closed.