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

Related Blog Posts:

Comments

11 Responses to “Setup A Google Custom Search On Your Blog”
  1. Hay Mark

    Great article, it’s very interesting to see which search box to use in order from people typing a keyword in brings them the most relevant results…

    I have seen this happen on a wide range of sites, and it was interesting know about which one people like…

    Is there a way that you can test which one performs better than the other.

    All the best Danny

    • I don’t know of anything that allows you to test which one performs better, sadly, but it would be a nice idea if you think about it! – What I do know is that the results are more accurate! :D

      Sorry I can’t be much more help Daniel, but thanks for commenting, and I’ll see if I can find anything out!

      Thanks
      Mark

  2. Steve Wisley says:

    Mark,

    Interesting idea. I appreciate the fact you explained in such detail how to set up the search feature. You have a informative site I will return.

    • Hi Steve, Glad you enjoyed the article along with my blog! It’s very much appreciated, and as with everything I write, I always do my best to explain things as clear as I can! :D

      Thanks
      Mark

  3. Garry Parkes says:

    Hi Mark,

    Another good article. I’ll have to have a look at putting that on my site as like you say it seems very easy to do.

    Just a question about your Wordpress Theme that has caught my eye. It is exactly the sort of theme I want when I do a facelift. It is 3-columns all on the right-hand side plus it looks as though for certain parts instead you can have just one wide column (like for your optin box or recent post section). Exactly the sort of flexibility I am looking for.

    Is this a free or pay theme?

    Thanks,
    Garry.

    • Thanks for your question Garry, I’ll send you an email about the WordPress Theme tomorrow. But what I can say right now is that it was a Premium (Paid) Theme!

      I was surprised by how simple it actually was to add the custom search, and get it up and running. Let me know when you’ve got it running, and I’ll come try and break it for ya! LOL ;)

      …Speaking of which, I can’t see a way of breaking it!

      Thanks
      Mark

  4. John Szram says:

    Thanks Mark.

    This is a great step-by-step guide for installing a custom search box. So easy, even I could do it! :)

    You’ll notice I implemented this on my blog straight away!

    Thanks again,

    John Szram

    • Hi John, Glad you enjoyed the post! :mrgreen:

      Just a quick look at your blog, I can already see the slick work done on the custom search! And yes, I made sure that everyone could do it, thats the main reason the post turned out so long! (Takes me ages to explain things sometimes!)

      How are you keeping anyway, long time no see! We’ll need to hook up sometime if you like, you know where I am though! ;)

      Thanks
      Mark

    • John Szram says:

      I’m good Mark, thanks for asking.

      We should definitely hook up sometime – I’ll “let” you thrash me at pool! ;)

      Thanks

      John Szram

    • Before you ask John, yes your comment has slightly moved a little! To cut a long story short, I was trying something out in phpMyAdmin, and picked on your comment! :P

      I see you’ve been following my little conversation with Dave Nicholson over on Twitter about our little pool challenge! – No need to let me win though, I can take on anyone!

      Glad to know you’re doing good though! :D

      Thanks
      Mark

  5. Yeah it really is easy, and you know what I love Google’s Custom search engine, and I’ve already got it setup on my own blog, it’s awesome!!! :) Don’t you just love Google?

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!