Google Custom Search and WordPress

For a more technical turn on this blog, I thought I’d give you a few pointers as to how I managed to get GCS to work on my current project.

First, have you created your search engine yet? Make sure to think thoroughly on which sites you want to add to which search engine, and have a look at the formatting tips for the URLs.

Then, and this is as it is on 01/11/11, go to “Look and Feel” and choose “Results only”:

<div id="cse" style="width: 100%;">Loading</div>

<script src="//www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript">

function parseQueryFromUrl () {

var queryParamName = "q";

var search = window.location.search.substr(1);

var parts = search.split('&');

for (var i = 0; i < parts.length; i++) {

var keyvaluepair = parts[i].split('=');

if (decodeURIComponent(keyvaluepair[0]) == queryParamName) {

return decodeURIComponent(keyvaluepair[1].replace(/+/g, ' '));

}

}

return '';

}

var _gaq = _gaq || [];

_gaq.push(["_setAccount", "YOUR_ANALYTICS_ACCOUNT_NUMBER_STARING_WITH_UA"]);

function _trackQuery(control, searcher, query) {

var loc = document.location;

var url = [

loc.pathname,

loc.search,

loc.search ? '&' : '?',

encodeURIComponent('q'),

'=',

encodeURIComponent(query)

];

_gaq.push(["_trackPageview", url.join('')]);

}

google.load('search', '1', {language : 'fr'});

google.setOnLoadCallback(function() {

var customSearchControl = new google.search.CustomSearchControl('YOUR_CODE_FROM_CSE');

customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

customSearchControl.setSearchStartingCallback(null, _trackQuery);

var options = new google.search.DrawOptions();

options.setAutoComplete(true);

options.enableSearchResultsOnly();

customSearchControl.draw('cse', options);

var queryFromUrl = parseQueryFromUrl();

if (queryFromUrl) {

customSearchControl.execute(queryFromUrl);

}

}, true);

</script>

<link rel="stylesheet" href="//www.google.com/cse/style/look/default.css" type="text/css" />

Then copy this text to a WordPress-Page of your choosing (don’t forget to change the Analytics-number!!), and what matters is the Permalink you give it. yoursite.com/search/ would be nice, but it could also be /google/ or anything else for that matter, just make sure you remember :).

You can at this stage actually already try to see if the Search works by going to your page, in my example it would be yoursite.com/search/ and add a ?q=searchterm to it, giving you yoursite.com/search/?q=searchterm

The idea now would be to create a template specifically for the search results. I will not go into details for this, but if you search for page template wordpress on google, you should find hundreds of tutorials. Remove anything that isn’t useful, and then go back to editing your WordPress-Page and make sure you use the new Template.

And then, a neat feature is to create a file called searchform.php into which you only paste the following code:

<form method="get" id="searchform" action="/search/">
<label for="q" class="assistive-text">Recherche</label>
<input type="text" class="field" name="q" id="q"/>
<input type="submit" class="submit" id="searchsubmit"/ value="Recherche">
</form>

and upload it to your wordpress-template’s main directory. This will be your new Search Widget then, and replace the one that comes with WordPress, and you can put it pretty much anywhere you want on your site where you have widget-areas defined. Play with classes to make it look the way you want, and make sure to change the form’s action to your wordpress-permalink. Not the whole link though, only the bit – as in this example – that comes after yoursite.com.

I hope this works for you guys, it cost me quite a bit of time to figure it all out, whilst actually, it was very simple from the beginning…