Adding a Google Custom Search Engine

This is the second and concluding part of this tutorial. Please read the first part  , if you haven’t already. Alright, now that we have created, and customized our Google Custom Search Engine, we are now ready to add it to our page. This is how it’s going to work. We need to create a page, within our blog, where the search results will be displayed. Then we are going to customize WordPress’ built-in search engine and change it to the one we just created in Google. Let’s get to work.
First we are going to learn how to add a page to our blog. This page will display the search results from Google. Adding pages offers the flexibility of customization (which we will discuss in a later topic). Open your favorite text editor, or web page software. I use Dreamweaver. Make sure that the file is empty. Delete any header, if there are any. Dreamweaver usually appends a header and a body tag – delete it. Then type the following code:

Then we need to add your search form code snippet that Google provided you with. To get it, go to Google Custom Search’s control panel and click on code.

Scroll down to get the code. The SECOND set of code is your search results code. Copy it and paste it inside your file. Mine looks like this:

Then finally, we need to add the code that displays your sidebar and footer. Add this code snippet:

The final code snippet should look like this:

By the way, you can also change the width of the search result to suit your theme by changing the value of googleSearchFrameWidth. I set mine at 545. Save the file and name it whatever you like, make sure it’ a .php file. I named mine ‘google.php’. Next we need to upload this file. Open up your FireFTP, or your favorite FTP software. And upload the file to your themes directory. In my case since I use the colourise theme, I uploaded my google.php file to: http://cajentutorials.com/wp-content/themes/colourise/. Perfect. Now that we have uploaded our file, we need to create a page in wordpress. This page will use the file that we just uploaded. Login to your wordpress control panel. If you can’t remember how to log in to your wordpress, you might want to reread this post  . Once you’re logged in, click on Write then Page.

Type in the title of your page. I named mine Google Search Results. After typing, you have to wait. This is important. Wait for WordPress to generate the permalink for the page; it will appear just below the title.

Take note of the permalink for that page as we are going to use it later. After the permalink has been generated, scroll down and look for Page template. You should see ‘google search,’ choose it and publish the page.

You have to scroll up to see the publish button. Alright, we’re halfway there. Now that we have taken care of the search results page, we need to create the search box. Like what I’ve mentioned we are going to use wordpress’ built-in search engine. Login to wordpress. Click on Design, then Widgets.

If you look at your available widgets, you should see ‘Search’, right beside it is Add (if you haven’t added it yet), just click on Add. The widget will appear on the right side. Before leaving, don’t forget to click ‘Save Changes’. We have successfully added a search form in our blog. Next step, we need to edit the search form to and change it to Google Custom Search Engine. We need to create a new file. Again, create an empty file. On this file, we need to paste the search form code that Google provided us with. To get it, go to Google Custom Search’s control panel and click on code. Scroll down a bit, and copy the FIRST code snippet – the search box code. And paste it inside your file. It should look something like this:

Notice on the first line that the form action is empty. This value is going to be the permalink to the Google page that we created earlier. In my example, the permalink is http://cajentutorials.com/google-search-results/. So my file now looks like this:

Save the file and name it ‘searchform.php’. It’s important that you name it searchform.php and not any other name, since this file is meant to replace the default search box of WordPress. Upload the file to your themes directory, again mine is: http://cajentutorials.com/wp-content/themes/colourise/. You will be prompted to overwrite the file with the same name, just click Yes to overwrite.

After uploading, go visit your site. And on your sidebar you should see the search box. Try searching and see how it’s displayed. This is going to be the final tweaking of settings and is entirely dependent on your theme. And this involves adjusting the widths of both the search result are as well as the search box. You can also try searching for your subscribed link and see if it gets displayed.
At this point, you can give yourself a pat in the back for a job well done. You have successfully created a custom search engine for your blog.

If you are having any problems, or would like to suggest improvements, don’t hesitate to comment.Again thanks for reading. Till then!

End.