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 http://www.google.com/cse/ and click Create a Custom Search Engine button, there are several easy steps to be followed;

   

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

   

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;

   

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.

   

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;

   

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.

   

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.