WordPress Search as Custom Google Search Without Additional Page or Post

It’s been a while since I wrote an article. That’s because I have been concentrating on developing netsains.com during the month. Thanks for that, I learn many things about customizing WordPress and creating WordPress as CMS. It’s way fun than designing the website itself, I must admit. One of the things that I modify is the default WordPress Search to be seen as Custom Google Search without using any plugins, additional post, or page. It’s simply replacing WordPress Search with Custom Google Search.

The first thing to learn is to create Custom Google Search account of your own. Maki from Doshdosh.com already created the tutorial on embedding Custom Google Search in his website. However, I have my own tricks on my sleeves to this. Let’s start with requirements.

To create Custom Google Search in WordPress, you need:

1. A self hosted WordPress blog (you can’t modify things in shared hosting wordpress.com blog)
2. A Google account (you can setup an account here)
3. Any HTML editor (wordpad or notepad is fine)

First step is to create Custom Google Search:

1. Login to Custom Google Search with your Google account from this link
2. 
   Choose “Create a Custom Search Engine”
3. 
   Fill in your search engine basic information
4. 
   Type your blog domain
5. 
   Test your search engine. If the results aren’t satisfying, you can always revert back to the fist step
6. 
   Choose as mentioned above. We need different page to host our results, that’s why we choose iframe.
7. 
   The first code is your SEARCH FORM code. The second code is your SEARCH RESULTS code. Now your custom search engine is ready

The second step is to install your code in WordPress SEARCH FORM and SEARCH RESULTS:

1. Your WordPress SEARCH FORM and SEARCH RESULTS can be found in your current template. This steps only occurs in your current template. If you want to edit the other template, please do repeat the steps
2. Your WordPress SEARCH FORM is: yourblog/wp-content/themes/yourtemplate/searchform.php
   Your WordPress SEARCH RESULTS is: yourblog/wp-content/themes/yourtemplate/search.php
3. Please do backup those two files before altering. In case that you want to revert back to the old search
4. Go to your SEARCH FORM, paste the code for Custom SEARCH FORM (First code), the result will be like this:
   

   Edited, thanks to Rio
   
<form action="http://yourblog.com/index.php?" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="007584696391574650722:l_61re9sdqy" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
<input type="hidden" name="s" value="Search" />
<input type="hidden" name="submit" value="" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>


   The two bold lines of code are the compulsory codes to trigger Search Results in wordpress. The first line will define the keyword variable ($s) and the second line is the submission button ($submit). Those two lines won’t affect your custom search engine, however, you can’t erase it because WordPress will not open the Search Result page without those two variables.

   This is the example URL that will trigger WordPress Search Result: http://yourblog.com/index.php?s=keyword&submit=
   
   That’s why I can add any Google Custom Search variables as long as those two are unharmed

   If you are having trouble with the form layout, please do consult w3schools.com to learn about HTML and CSS

5. Now go to your WordPress SEARCH RESULTS and replace the code into the following pattern:
   

   
<?php get_header(); ?>

   ---put your google search results here---

   <?php get_footer(); ?>


   The result will be like this:

   
<?php get_header(); ?>
<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>
<?php get_footer(); ?>


6. Your custom search engine is ready to go!

Custom Google Search Engine is very useful to your website. There are two reasons why you should use it:

• Comprehensive Google Search, you know how powerful Google search is, imagine it putted in your website. You might also want to install Google Sitemap generator plugins to widen your search results from Google
• Add money on it, yes, Google Search can be integrated with your Adsense channel. Check Doshdosh.com to learn how

Updated

Credit: Thanks to Rio for pointing out this issue

How to make your Google Search Terms appear in the page’s title

This issue is already explained clearly in Thu Tu’s Blog. The search terms will appear in your search page’s title in any theme you used. In order to make one of your theme to show the search terms, you can follow these steps:

• Open your chosen theme’s header.php file.
• Modify your theme’s title inside the <title> tag like this:
  

  <title>

<?php

  $cse_query = strip_tags(stripslashes($_GET['q']));
if (is_home()) {
echo bloginfo('name'); echo ": "; echo bloginfo('description');
} elseif (is_404()) {
echo 'Page Not Found (Error 404)';
echo ' - ';
echo bloginfo();
} elseif (is_category()) {
echo 'Category : '; wp_title('');
echo ' - ';
echo bloginfo();
} elseif (is_search()) {
echo 'Search for: "';
echo $cse_query;
echo '" - ';
echo bloginfo();
} elseif (is_day() || is_month() || is_year() ) {
echo 'Archive :'; wp_title('');
echo ' - ';
echo bloginfo();
} else {
echo wp_title('');
$subtitle = get_post_meta($post->ID, 'subtitle', $single = true);
if($subtitle !== '') { echo ': ' . $subtitle; }
}

  ?>

  </title>

• The first bold line will call your Google Search Terms (defined by variable $q), while the second bold line will call the variable and show it only in a search page (defined by is_search() wordpress function)
• Remember that any of your installed WordPress plugin that can alter the Page Title (e.g. All in One SEO Pack) will make this method useless

The implementation of this method can be found in my latest site development: NetSains.com

Please have your comment and suggestion!