Setup A Google Custom Search On Your Blog

And it’s nowhere near as hard as you may think!

Now as much as I love WordPress, there is one element that needs worked on. And that’s the built in search feature, which is why I decided to change the way a visitor could search my blog.

1 – What we do first is create a new page, giving it a title something like ‘Search’ but it’s completely up to yourself. I decided just to go along with that as I liked the clean look of /search/ as the directory! Yes I know it’s just as easy to change the permalink structure, but I still like it better.

Moving on!… Deactivate the comments along with pings, and publish. I know we’ve not added anything to it just yet, so don’t worry about that! Grab the URL for the new page, and save it somewhere for later.

2 – Visit Google’s Custom Search Engine and click on the ‘Create a Custom Search Engine’ button to get the configuration started. Like everything else with Google, you’re required to login to your Google Account, and if you’ve not got one then just signup. It won’t cost you a penny, as it’s free! :D

Once you’re in, just fill in the required details needed for your Search Engine.

  • Give the Search Engine a Name
  • Along with a Description
  • Insert some Keywords for your Search Engine
  • Choose which Language you’d like
  • Select ‘Only Sites I Select’ option
  • Insert your website URL
  • Select ‘Standard Edition’
  • Check the ‘Terms Of Service’ (If  you agree!)
  • Click Next

A new page will open and you can try out your new custom search engine.

So give it a bash, then click Finish when you are ready!

The following page will then appear!…

Google Custom Search Control Panel

Click on ‘Control Panel’.

3 – We’re going to style the Search Box that appears on our blog by visiting the ‘Look And Feel’ tab up the top. For the search results that are displayed, you can pick the colour scheme for that too. Choose the colour wisely though, and try to pick the same colours as you have on your site.

4 – If you feel like earning a little from your custom search, then everything you’ll need can be found under the ‘Make Money’ menu tab.

I don’t have an AdSense Account myself, and while my search page still shows the odd ad, I don’t get a thing or mind either. This option is still better than the built in WordPress search function!

5 – We now need to put it all together, by inserting the Search Box and the Search Results code. In the menu at the top of your screen, there should be a ‘Code’ link, so head over to that page. Select the iFrame option when the page loads, and you’ll see a couple of extra things appear!

Insert the URL of the page you’d like the search results to appear, you know that one I told you to save at the beginning of this post? Just copy it from wherever it was noted, and paste it into the text field.

Decide on the place you’d like the AdSense ads to appear and select the option you prefer. Personally I went for Top and Bottom, but again, it’s your decision!

If you scroll down, you’ll find the relevant codes you need to place on your blog. Talking of which, they can also be placed on your site too, you’re not just limited to the custom searches for a blog!

Copy the first code, and paste it were you’d like the search box to appear. Most of the time it’s the sidebar, you can see mine to the right of this post! – Under your Theme Editor, just add the code to the sidebar.php file, remembering to save the changes.

The second piece of code Google has provided you with needs to be added to the page we published earlier, so go into your admin area and find the particular page created. Click on the ‘Edit’ button, and switch over to the HTML View before you do anything else. (Top-Right of the page editor!)

Paste the code in and hit the ‘Update Post’ button to save the changes!

With that it all done, you can take it for a test-run. If you did everything correctly, then there shouldn’t be any problems, and everything works just fine!

I hope you enjoyed this tutorial and found it interesting. Don’t forget to comment! :D