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:
- A self hosted Wordpress blog (you can’t modify things in shared hosting wordpress.com blog)
- A Google account (you can setup an account here)
- Any HTML editor (wordpad or notepad is fine)
First step is to create Custom Google Search:
- Login to Custom Google Search with your Google account from this link
Choose “Create a Custom Search Engine”
Fill in your search engine basic information
Type your blog domain
Test your search engine. If the results aren’t satisfying, you can always revert back to the fist step
Choose as mentioned above. We need different page to host our results, that’s why we choose iframe.
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:
- 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
- Your Wordpress SEARCH FORM is: yourblog/wp-content/themes/yourtemplate/searchform.php
Your Wordpress SEARCH RESULTS is: yourblog/wp-content/themes/yourtemplate/search.php - Please do backup those two files before altering. In case that you want to revert back to the old search
- 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
- 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(); ?>
- 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!
Tags: custom, google, page, post, search, without, wordpress
[...] Muita gente sabe que é possível adicionar uma página de busca do Google personalizada em seu site, não sabe? Pois bem! Encontrei uma maneira de adicioná-la no Wordpress sem que seja necessário adicionar um arquivo em seu tema: Wordpress Search as a custom Google Search without addition page or post. [...]
Thanks a ton. I always failed to integrate Custom search engine since google always reverted to full 795 width automatically in my 3 column theme. Your method worked just fine!
@Navjot Singh:
hi,
i tried this on my blog but when i replace the search.php, it messed my blog. i guess this trick is really theme dependent.
what i did but is not really pleasant to see is to make another page instead and uploaded in the root directory and it worked. But the search box is looking like shezneck.
[...] ?????? ?? ??? ?????? ??? ?? ( ????? ?? ????? ????? ) ?? ???? ? ????? ?????? [...]
@Get it From Boy!
hello, I’d like to know if it’s possible to make the show also the query terms, something like Search for “custom google” | Firewalker?
@rio:
sorry firewalker,
what I’d like to add is the query term which a user wanted to search.
Like here in your search box, if i query [astalavista], the title of the search result shall be [Search for astalavista | firewalker]. I think it’s quite necessary if one need to track back his search history in the browser.
thanks again,
[...] - Wordpress Search as Custom Google Search Without Additional Page or Post Hmmmm. Could be handy. (tags: tutorial hack search google custom [...]
Besides, the following two lines can’t pass w3c validation.
Those are the two lines u added in google search box, ate by WP, sorry
@Rio:
Those two hidden lines have double Type attributes, it should be only one, which is “hidden”. Thanks for your sharing
solution found: http://takethu.com/blog/2007/06/17/google-cse-in-wordpress-template/
@Rio:
First - I love your template! You do beautiful work!
My theme doesn’t have a search or results page. I’ve created other “missing” pages in this theme in the past, based on the page template, so I’ll try doing the same this time. Do you know if I’ll need to modify any other files to tell the template it has those, now?
Thanks!
@Cynthia:
[...] Search. How to integrate this with your WordPress template in a nice manner, you can read in an article by Firewalker. It is a nice feature that Google offers and you can change the look and feel to your needs. [...]
Love the theme, I am going to give it a try on a site of mine.
This is a nice bit of code, it helps that you give a setp-by-step to explain (I need to explain this to someone that will not understand).
My above mentioned site is html built site and i am not able to show keyword based result of my website using google custom search i.e.when i am typing any keyword of my website in google custom search it is not showing any results from my website,but showing results from web.
Please guide me for this problem.
I am not able to show the pages in my website according to the keyword given in the search engine.
@Vijay Kumar
I took a look at your website. Its really gave me some information about search engine. Thanks for your information.
————————–
hennry