How to perfectly Integrate Google Custom Search in your Wordpress blog

Posted by Saad Ibrahim 1 September, 2008

I wanted to replace the default Wordpress search with Google Custom Search because replacing the WordPress’s default search feature with Google Search allows you to use the years of search experience and power of Google. Besides, it also lets you earn from the sponsored results.

I found this guide on Dosh Dosh but it is quite basic and doesn’t have all the details that are required to integrate Google Custom Search to your Wordpress blog properly, I will tell you the proper way to integrate Google Custom Search with your Wordpress Blog like I did mine (you can try it from top right search box)

First you need to create a WordPress page where your search results will show, to do that go to your Wordpress dashboard and then go to write–>Page

Type “Search” in title tab and save it (don’t publish it yet) and now copy the permalink/URL of this page as you will need this later ,in my case the permalink is “http://www.geekishblog.com/search/“, scroll down a bit and uncheck “Allow Comments and “Allow Pings” check boxes, leave the contents of the page for now we will add this later

Now you need to create a Google custom search engine

Assuming you have a Google Adsense Account, Goto Google Adsense, Sign In using Your Adsense Account (which is same as your Google Account), Once you sign in You will be see your Adsense reports

Click on the Adsense Setup tab on the top

Now click on Adsense For Search

Now Fill in the required Info As Shown in the above screen shots

Here’s What you need to fill in those fields

Search Type: here you will select “Only sites I select” radio button because we want to search only our wordpress blog

Selected sites: here you will put the URL of your wordpress blog

Optional Keywords: here you will put some keyword about your blog like what your blog is about

Site language: Select your blog’s language

Your site encoding: you wont need to change this

Country or territory for Google domain: you wont need to change this too

Custom channel: here you will need to add a channel so that you can easily track your custom search earnings, to do that click on “add new channel” and then put something approriate like “Search Ads in the text box that shows

SafeSearch: uncheck Use SafeSearch check box here otherwise it will show a annoying safe search ON message on the top when anyone performs a search on your blog

Now when you are done with filling all the feilds click on continue button at the bottom

now it will give you a page where you will setup the search form for your blog, select the second option in the “look and feel” field like in the above screen shot and leave other things alone and click continue

Now it will present you with a page where you will configure the Ads on the result page

Here In the “Opening of search results page” field select “Open results within my own site” and put the url of the page we created in the first step in the text box

now select the “Top and Bottom” in the ad location field (you need to this before specifying the page width otherwise it will give you an error)

now enter the width of the content area of your your theme in “Enter width of results area:” field in my theme it is around 550 pixels so i put 550 in that field so check what’s the width of the content area of your wordpress theme and put the value according to that otherwise the results wont show up properly or just experiment with this value until you get your optimum result

You can also customize the ads that show up in your search results here so that they blend with your blog theme

Once you are done click continue

Now it will tell you to name your search engine, put something like Yourblogname Search and tick the checkbox next to the terms of usage and click on submit and get code button

Now you will get a page with two codes copy the second that is for search result page to the wordpress page we created in first step to do that goto wordpress dashboard–>manage–>pages–>click on the page name (Search), now switch to the HTML tab and paste the code here

now publish this page , don’t only save as the dosh dosh’s tutorial says otherwise no one except you the editor would be able to access it and they will get a 404 page, now the problem is that when you publish it ,it will start showing up in the navigation bar of your blog which you don’t want to because when someone clicks it he will get an empty page, so to hide that first you need the page id of that page for that goto your wordpress dashboard–>manage pages and now click on the the page you created for search results and now when the edit page opens up see the address in the address bar in your browser it would be something like this:

http://www.yourblogname.com/wp-admin/page.php?action=edit&post=523

in the above link the page id of this page is 523, so now figure out the post id for that page and move to the next step

now that you have the page ID you need to edit the header.php file in your wordpress template to exclude this search ID from showing up in the navigation bar

now that you have the page id you need to add this line in your header.php file to the “wp_list_pages();” function:

(exclude=PageID here) (e.g in my case: (exclude=523))

so the final output is something like this:

<?php wp_list_pages('exclude=17,38' ); ?>

though wp_list_pages function code may vary from theme to theme

like in my theme the wp_list_pages code was this:

<?php wp_list_pages(’depth=1&sort_column=menu_order&title_li=’ . (”) . ” ); ?>

so I changed it to this:

<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&exclude= 523); ?>

In the above code,

exclude is used to hide Pages with IDs of 561, 587, 590, 491 and 650 from the list. Please note that excluding a Page will also exclude all of its sub-pages from the list.

sort_column=menu_order is used to list the Pages in the order defined by the Page Order settings

depth=1 is used to show only the top level Pages and

title_li= is used to prevent displaying the default heading text above the list

Thanks To JohnTP

Update: if you don’t want to go through all that hassle you can use this plugin for wordpress

Now we are done with it, we now need to add the search form code to our existing search box

this is how to do that

go to your wordpress dashboard–>design–>theme editor and now click the search form file (usually searchform.php) of your theme on the right

Now copy the the first code from that Adsense page and paste it here replacing the default code (remember: backup the code somewhere else)

That’s it! I wanted my new Google CSE search box to look just like my theme’s default search box so I had to experiment with it a bit and the outcome was perfect, this is what i did

from Adsense search form code i removed these lines from the top of the code

<style type="text/css"> @import url(http://www.google.com/cse/api/branding.css); </style> <div class="cse-branding-right" style="background-color:#FFFFFF;color:#000000"> <div class="cse-branding-form">

and these line from the bottom

</div> <div class="cse-branding-logo"> <img src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" alt="Google" /> </div> <div class="cse-branding-text"> Custom Search </div> </div>

so I was left with this:

<form action="http://www.geekishblog.com/search/" id="cse-search-box"> <div> <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx:wbmpkx-sc3q" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </div> </form>

then I replaced this line which is for the submit button:

<input type="submit" name="sa" value="Search" />

with your themes submit button’s code if its there or otherwise leave this alone, for me it was there so i replaced it with this:

<input type="image" class="sgo" src="<?php bloginfo('template_url'); ?>/images/b_go.png" alt="Submit button" />

my theme also had a css class for the search box so i replaced the size=”31″ with class=”s” because the css class s has the size for the search box

my theme also shows “search here…” in the search box and when you click the it clears the box, so i had to add the onfocus element of my default search box to the new code to the sixth line

that’s it now my code looks like this:

<form action="http://www.geekishblog.com/search/" id="cse-search-box"> <div> <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxx:wbmpkx-sc3q" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" value="Search here..." onfocus="if (this.value == 'Search here...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search here...';}" name="q" class="s"/> <input type="image" class="sgo" src="<?php bloginfo('template_url'); ?>/images/b_go.png" alt="Submit button" /> </div> </form>

here’s the default code of my theme if you want to see it for reference:

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>"> <input type="text" value="Search here..." name="s" class="s" onfocus="if (this.value == 'Search here...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search here...';}"/> <input type="image" class="sgo" src="<?php bloginfo('template_url'); ?>/images/b_go.png" alt="Submit button" /> </form>

this wont be same for you so you have to experiment with it a bit if you don’t know php or css like me

That’s It Congrats you have integrated Google custom search with your Wordpress blog, now try it out

To customize your newly created Google Custom search like changing the colors of the search result text goto Google CSE Homepage, now click on “manage your existing search engines“, then log in using your google account that you use for Adsense, now click on control panel link next to your newly created Google CSE.

If you encounter any problems or need any help just leave a comment below!

powered by shantz-wp-prefix-suffix

If you enjoyed this post, make sure you subscribe to my RSS Feed

Share and Enjoy: