Replace WordPress Search With Google Search Box

This tutorial will show you how to replace the default search built into WordPress with a Google Search box through Google Adsense. Adding the Google Search box will help you make money from your website by showing advertisements in the search results. You are paid if a users clicks on an advertisement. The downside to Google Search is that when a user clicks an advertisement they will leave your site. If you are just starting out with a blog, I would recommend that you stick with the built in search until you increase the traffic to your blog and your content is indexed by Google. The Built in search will provide more relevant results than Google Search at first, but once Google gets your pages indexed there should be no problem with the search results. Google also allows you to customize the results page to make it look similar to the theme of your site, or you can event have the results displayed on a page in your site.

If you are not a member of the Google Adsense network you will have to
to take advantage of the product. Once you join the AdSense publisher network, you will be able to display Google’s contextual ads, search box, and referrals. Google’s AdSense network is currently the largest online ad network and is the top money maker for most blogs.

Sign Into your AdSense account.
Replace WordPress Search With Google Search Box

Click on the AdSense Setup Tab.
Replace WordPress Search With Google Search Box

Now click on the link for AdSense for Search.
Replace WordPress Search With Google Search Box

Now we will have to setup the options for our search box. First select the Google WebSearch + SiteSearch option.
Replace WordPress Search With Google Search Box

Then fill in the URL of your site in the box below. You can enter up to three sites, but I will only enter one.
Replace WordPress Search With Google Search Box

Now we have to define the style for our search box. First I will select the option button for my site.
Replace WordPress Search With Google Search Box

Next select the style for the Google logo. You can select from: Google Logo Beside the search box, Google Logo above the search box, or have the Google added to the search button. I like the last option so that is what I will choose.
Replace WordPress Search With Google Search Box

Now you can select where you want the search button to be. It can either be beside or below the search field. I will select below because I want to make it fit in my sidebar.
Replace WordPress Search With Google Search Box

Next, select the font color, background color, and number of characters. I will use the default colors and change the number of characters to 27 so that the box will be even with the words teamtutorials.com.
Replace WordPress Search With Google Search Box

So I end up with a search box that looks like this.
Replace WordPress Search With Google Search Box

Next you can add Site flavor if you want to. This will customize the search box. I will skip that option. The only other option I will select is to Open results in a new window.
Replace WordPress Search With Google Search Box

Click the Continue Button at the bottom of the page.

Now we can setup the search results page. First I will add an image to the results. Simply fill in the URL for the image.
Replace WordPress Search With Google Search Box

Next I will add a destination to my image. When the image is clicked, the link will take you to the page that you put in this box.
Replace WordPress Search With Google Search Box

Now you can define the colors for your search page. Google has some preset options, or you can customize your own. Here is what I will use for the example.
Replace WordPress Search With Google Search Box

The only other thing I will do is select a custom channel so that I can keep track of the earnings of the search box. This is optional but will be a benefit if you have multiple search boxes on different sites.
Replace WordPress Search With Google Search Box

Click the continue button. Google will give you the code that you need for the search box. Highlight all of the code and copy it.
Replace WordPress Search With Google Search Box

Now that the search box is created, we will have to paste the code into the WordPress side bar. I will be using the default theme for this example.

Connect to you site using your favorite ftp program (mine is still smartftp). Navigate to your WordPress root directory.
Replace WordPress Search With Google Search Box

Now we need to browse to the themes folder. Go to wp-content > themes > and select your current theme. My theme is the default.
Replace WordPress Search With Google Search Box

If you theme has a searchform.php you will need to edit it. If you are using a custom theme and it doesn鈥檛 have searchform.php you will need to locate the file that has the search code in it. Sometimes the code is located in the sidebar.php file.
Replace WordPress Search With Google Search Box

Edit the file. If you are using Smartftp you can right click the file and then select edit.
Replace WordPress Search With Google Search Box

Replace the search code with the new google code.
Replace WordPress Search With Google Search Box

Save the file and upload it to your server. Your site search should now be replaced with the Google search.
Replace WordPress Search With Google Search Box

As you can see the search box didn鈥檛 fit quite right. We will have to fix that by shrinking the margin of the side bar. This will move everything in the side bar to the left. Edit the style.css file and find this line:
#sidebar { padding: 20px 0 10px 0; margin-left: 545px;

And change it to

#sidebar { padding: 20px 0 10px 0; margin-left: 528px;

Save the file and upload it to your server. Your search box should now fit the default Kubrick theme.
Replace WordPress Search With Google Search Box

There are probably a couple of different ways that you can change the CSS to get the search to fit in the sidebar. Each theme is different so you will have to experiment and see what works with your theme.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join the TeamTutorials mailing list and get the latest tips, tricks, and special discounts for members only.

Thanks! Please click the link in the email we just sent you to confirm.

  • dcr

    Excellent work. I don’t use Google AdSense on my blog, but never thought about using Google Search on it. Thanks for the tip!

  • very good tutorial, I really wanted to put the google search in my word press word 馃檪

  • my word press blog* lol

  • Your information is very detailed and good. But in your sidebar the google search letters are in bold font and everything is center aligned. How did you tweak the code? Normally the google search box is left aligned.

  • The google search box has inherited the styles from our CSS.

  • Pingback: Google Custome Search()

  • Pingback: 讗转专讬诐 讜转讜住驻讬诐 诇讜讜专讚驻专住 « 诪讬讜讝讬拽 - 讟讻谞讜诇讜讙’讬拽()

  • Great idea to boost profits a little!
    Adsense for search pays a lot more than adsense for content on my sites.

  • very nice tutorial, i will add this tips into my little knowledge.

  • i don’t know how to make it 馃檨

  • very nice tips, i will follow this instruction to fill google search box to my blog

  • may

    great tutorials, it is very easy to follow and implement, i can make money with this, thanks

  • what so owesome tutorial, gonna to use it on my blog. thanks

  • it is good tutorial but i want to know how to replace the word press search bar with google search for the people who do not have an adsense account.it would be nice if you also write about it because every body don’t have adsense accounts.

  • money making is really needed if you want to have some financial security for your own life “”;

  • Hello everyone and moderator,
    I did the exact steps shown above but the google search bar overlapping my navigator bar.
    Can anyone help me with this? I’am thank you very much in advance.
    Here is my header,php

    Hello everyone and moderator,
    I did the exact steps shown above but the google search bar overlapping my navigator bar.
    Can anyone help me with this? I’am thank you very much in advance
    Hello everyone and moderator,
    I did the exact steps shown above but the google search bar overlapping my navigator bar.
    Can anyone help me with this? I’am thank you very much in advance…can i email the header.php file to you? TexasMesotheliomaAttorney dot net
    Best Regards,
    Andy

  • This is a nice tutorial I’ve been searching for this method to have the chance to use adsense to my blog.

  • Informative Tutorial. Thanks for the tip!

  • Just wanna comment on few general things, The website style is perfect, the content is really superb : D.

  • I’m really impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you customize it yourself? Anyway keep up the excellent high quality writing, it is rare to see a nice weblog like this one nowadays.

  • sri

    Wonderful thanks.

  • I i just want to leave a simple comment to talk about that your blog was good. I came across it on google search right after dealing with many other information which had been not really related. I believed I’d discover this much before considering how very good the information is.

  • Thanks for this. I am looking to replace the WordPress Search by Google Search in the Twenty Eleven Theme, and this looks reasonably straightforward.

    I like your “idiot level” approach if I can call it that. It’s always good to see a tutorial that shows how to do something step by step at the lowest level. All too often they assume you know far more, and not all of us do!

  • I tried my best but I couldnt get it to run on my Movie website 馃檨 people have to seach my TV shows and Movies via categories now 馃檨 Too bad.

  • I simply couldn’t depart your website before suggesting that I actually enjoyed the standard information a person supply for your guests? Is gonna be back continuously in order to inspect new posts

  • I want ti change the default search bar. Today i got to know how to change it. Very helpful.

  • It’s genuinely very complex in this busy life to listen news on Television, so I only use
    the web for that purpose, and obtain the latest news.

  • inspireyourway

    hi, how did Hongkiat . com managed to use the theme’s default search bar but with google search functions…???? Worried :

    • spyderman4g63

      Set up google custom search and change the form action to be the google url. Then make sure the input box’s name is that same as the query param in the google url.

      • inspireyourway

        Hey Spydy!,

        Thanks for your reply. I tried too do the same but you know I am noober than a noob when it comes to coding,

        I am sharing with you my searchform.php contents here

        <form method="get" id="searchform" class="search-form" action="” _lpchecked=”1″>

        <input id="search-image" class="sbutton" type="image" src="/images/search.png” style=”border:0; vertical-align: top;”>

        ___________________________________
        and my google adsense search code
        ___________________________________

        (function() {

        var cx = ‘partner-pub-4***********9’;

        var gcse = document.createElement(‘script’);

        gcse.type = ‘text/javascript’;

        gcse.async = true;

        gcse.src = (document.location.protocol == ‘https:’ ? ‘https:’ : ‘http:’) +

        ‘//www.google.com/cse/cse.js?cx=’ + cx;

        var s = document.getElementsByTagName(‘script’)[0];

        s.parentNode.insertBefore(gcse, s);

        })();

        Can you please help me!!!

        fingers crossed