Setting up google search on wordpress

Advertisements

When setting up this blog I hit a brick wall when trying to implement site search.

It quickly became apparent that the out of the box solution was not good enough – didn’t work for a start! – and that implementing search using Google’s custom search facility would be the best and easiest to implement solution.

You can create a Google custom search facility for any website. It gives you the code for the search form and results page which you can just plug into your website code. But for WordPress content management systems I found you have to go through a few hoops – particularly if you are a novice, like I was.

Firstly create a Google Custom Search account – as with all Google sites this is different to a normal Google account. Goto: http://www.google.co.uk/cse/ and hit the ‘Create a Custom Search Engine’ button and then hit ‘create an account now’ if you do not have one already.

Once logged in select create new search engine and fill out the form (just standard, you don’t want to pay for the Business edition unless you don’t want ads – you can monetize ads to your adsense account later on):

Google Custom Search Engine Creation

Once setup goto Look and Feel on the left and select Iframe for the hosting option:

Google Custom Search Engine Setup Look and Feel

Then hit the Get Code button and fill in the URL path and where you want the ads to appear. The URL path is the Permalink for the search results page that you will define later in WordPress, as you type it will automatically be inserted into the code. In our case we use Numeric Permalinks (changed from default Page ID method under Settings, Permalinks in WordPress admin). Putting ads on the Top and Bottom gives you a minimum width of 500px – you can change the default width of 600 after you have copied the code, having ads on the right limits you to 735px which is too wide for our site:

Google Custom Search Engine Setup Get Code

You can now copy the code for the search form to the default WordPress search form – in WordPress admin goto Appearance, Editor and choose Searchform.php. (If no Searchform.php exists in your theme you can copy it from the default – just copy it to your wp-contentthemesyour-theme folder). Overwrite the default code:

Wordpress Search Setup Search.php

To get the form to appear on your pages you need to edit the Appearance, Widgets – drag and drop the search option to the right hand side. This will then appear on your sidebar:

Wordpress Search Setup Search Widget

Now at this point you would think all I have to do is copy the Google Search Results code to the Search.php file in the same way but apparently this doesn’t work – search.php seems to be reserved for the default search process. You need to create a new page – in your wp-contentthemesyour-theme folder copy page.php (again if you don’t have one copy from default) to a new file – we chose Googlesearch.php

Once created this file will be listed in Appearance, Editor.

 

  • Insert the following code at the top (this will identify it as a template file):

 

 

<?php
/*
Template Name: Google Search Page
*/

    • Copy the Google Results Page code after the PHP Content command.

 

You should now have something like this:

Wordpress Search Setup GoogleSearch.php

Next create a new page under Pages, we named it Search. This should match the Permalink URL path you entered in the Google code setup. Select the Google Search template you created above from the template option on the right:

Wordpress Search Setup Search Page and Permalink

Note the Permalink at the top – same URL as you entered in the Google Search code setup page.

That’s it! You should now have a Search Form on your sidebar which loads a search results page (/index.php/search in our case).

To monetize the search result ads select Make Money from the Google Custom Search Engine control panel and follow the instructions to associate your search engine with your Adsense account.

Author: James

IT Manager - Network, Web coding, MS SQL and Online Mapping expert

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s