Adding Google Custom Search Engine into WordPress without Plugin

In this article I’d like to share what I’ve done to embed Google Custom Search Engine (CSE) into my site which is basically using WordPress. So, the goal is to add CSE without changing my native search box. Why? Because I solely like it πŸ˜› Try to search some keywords on my search box to see the result of this tutorial πŸ˜‰

Okay, let’s start the tutorial

[contentblock id=1 img=adsense.png]

  1. First think first is you need a Google Account, if you don’t have, then I suggest you to sign up now πŸ˜€ okay, go toΒΒ and click Create a Custom Search Engine button, there are several easy steps to be followed;

    Google Custom Search Engine
    Google Custom Search Engine Official Page
  2. Step 1, fill some description about your search engine (description, definition and edition) then check the term of serviceagreement on;

    Step 1, Set up your search engine
    Step 1, Set up your search engine
  3. Step 2, customize your search engine style on try it outpanel. At the moment there are six styles that is provided by google (default, bubble gum, green sky, espresso, shiny and minimalist), just choose what is appropriate for your site. However, if there isn’t style matched for your mood you can customize it by clicking the customize button on each styles πŸ™‚ If it’s ok then try to enter a keyword to try the search engine. nice, then click next;

    Step 2, Try on it
    Step 2, Try it out
  4. Step 3, get the code and paste into your search page, native file is usually search.php. However in my case, my goal was only to display results of search using the native search box. Hence instead of copy and paste the code, I went to the look and feel page by clicking the look and feel link and customized further options.

    Step 3, Get your code
    Step 3, Get your code
  5. so step 4, on look and feel panel, let’s choose result only layout and try to search a keyword. If you have satisfied with the results then let’s hit save and get the codebutton;

    Step 4, Look and Feel control panel
    Step 4, Look and Feel control panel
  6. Step 5, specify the query parameter that you use for the search. If I understand correctly, the query parameter for twenty eleven theme is “s”, so I put “s” into it. You can also try to figure out the parameter by looking into the address bar when you search a keyword. Ok, then copy the code and replace the native search result codes.

    Step 5, Get the code
    Step 5, Specify the query parameter and get the code
  7. IΒ use Twenty Eleven child theme that I called Minds, it’s based on darylkoop’s Twenty Eleven child theme, called “Hum”. So I just duplicated a search.php file from Twenty Eleven into my Minds’ directory and simply replace some codes where is lied between #content div, save and voila… the CSE has been added, that’s all folk πŸ™‚

Last but not the least, I think it’s the simplest way I did to add Google Custom Search Engine into my site. Furthermore, you can also monetize your search engine with your Google AdSense account. Just try to figure out it on Make money panelaccount.

Well, that’s all what I’d like to share. Let me now if you have some inquires and feedbacks, simply put your thought into comment box. Thanks πŸ™‚

Leave a Reply