{"id":707,"date":"2007-08-08T07:00:20","date_gmt":"2007-08-08T12:00:20","guid":{"rendered":"http:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box"},"modified":"2008-04-14T08:47:15","modified_gmt":"2008-04-14T13:47:15","slug":"replace-wordpress-search-with-google-search-box","status":"publish","type":"post","link":"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box","title":{"rendered":"Replace WordPress Search With Google Search Box"},"content":{"rendered":"<p>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.  <\/p>\n<p>If you are not a member of the Google Adsense network you will have to <script type=\"text\/javascript\"><!--\ngoogle_ad_client = \"pub-3085000047893613\";\ngoogle_ad_output = \"textlink\";\ngoogle_ad_format = \"ref_text\";\ngoogle_cpa_choice = \"CAAQnfzw4AIaCJwZC9ix5DwoKN2uuIEBMAA\";\n\/\/-->\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\n<\/script>to take advantage of the product. Once you join the AdSense publisher network, you will be able to display Google&#8217;s contextual ads, search box, and referrals. Google&#8217;s AdSense network is currently the largest online ad network and is the top money maker for most blogs.<\/p>\n<p>Sign Into your AdSense account.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-01.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>Click on the AdSense Setup Tab.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-02.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>Now click on the link for AdSense for Search.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-03.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>Now we will have to setup the options for our search box. First select the Google WebSearch + SiteSearch option.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-04.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>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.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-05.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>Now we have to define the style for our search box. First I will select the option button for my site.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-06.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>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.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-07.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>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.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-08.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>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.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-09.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>So I end up with a search box that looks like this.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-10.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>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.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-11.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>Click the Continue Button at the bottom of the page.<\/p>\n<p>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.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-12.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>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.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-13.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>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.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-14.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>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.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-15.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>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.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-16.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>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.<\/p>\n<p>Connect to you site using your favorite ftp program (<a href=\"http:\/\/www.smartftp.com\">mine is still smartftp<\/a>). Navigate to your WordPress root directory.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-17.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>Now we need to browse to the themes folder. Go to wp-content > themes > and select your current theme. My theme is the default.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-18.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>If you theme has a searchform.php you will need to edit it. If you are using a custom theme and it doesn\u2019t 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.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-19.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>Edit the file. If you are using Smartftp you can right click the file and then select edit.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-20.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>Replace the search code with the new google code.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-21.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>Save the file and upload it to your server. Your site search should now be replaced with the Google search.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-22.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>As you can see the search box didn\u2019t 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:<br \/>\n#sidebar { padding: 20px 0 10px 0; margin-left: 545px;<\/p>\n<p>And change it to <\/p>\n<p>#sidebar { padding: 20px 0 10px 0; margin-left: 528px;<\/p>\n<p>Save the file and upload it to your server. Your search box should now fit the default Kubrick theme.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-23.jpg' alt='Replace WordPress Search With Google Search Box' \/><\/p>\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,17,23],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Replace Wordpress Search With Google Search Box<\/title>\n<meta name=\"description\" content=\"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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johnathan Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teamtutorials.com\/#website\",\"url\":\"https:\/\/teamtutorials.com\/\",\"name\":\"Team Tutorials\",\"description\":\"Learn something new today\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teamtutorials.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-01.jpg\",\"contentUrl\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-01.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box#webpage\",\"url\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box\",\"name\":\"Replace Wordpress Search With Google Search Box\",\"isPartOf\":{\"@id\":\"https:\/\/teamtutorials.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box#primaryimage\"},\"datePublished\":\"2007-08-08T12:00:20+00:00\",\"dateModified\":\"2008-04-14T13:47:15+00:00\",\"author\":{\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\"},\"description\":\"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.\",\"breadcrumb\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/teamtutorials.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Replace WordPress Search With Google Search Box\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\",\"name\":\"Johnathan Ward\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"caption\":\"Johnathan Ward\"},\"description\":\"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.\",\"sameAs\":[\"http:\/\/johnathanward.com\",\"https:\/\/twitter.com\/spyderman4g63\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Replace Wordpress Search With Google Search Box","description":"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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box","twitter_misc":{"Written by":"Johnathan Ward","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/teamtutorials.com\/#website","url":"https:\/\/teamtutorials.com\/","name":"Team Tutorials","description":"Learn something new today","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teamtutorials.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box#primaryimage","inLanguage":"en-US","url":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-01.jpg","contentUrl":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/08\/make-money-with-google-search-on-wordpress-01.jpg"},{"@type":"WebPage","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box#webpage","url":"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box","name":"Replace Wordpress Search With Google Search Box","isPartOf":{"@id":"https:\/\/teamtutorials.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box#primaryimage"},"datePublished":"2007-08-08T12:00:20+00:00","dateModified":"2008-04-14T13:47:15+00:00","author":{"@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9"},"description":"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.","breadcrumb":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/replace-wordpress-search-with-google-search-box#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/teamtutorials.com\/"},{"@type":"ListItem","position":2,"name":"Replace WordPress Search With Google Search Box"}]},{"@type":"Person","@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9","name":"Johnathan Ward","image":{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","caption":"Johnathan Ward"},"description":"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.","sameAs":["http:\/\/johnathanward.com","https:\/\/twitter.com\/spyderman4g63"]}]}},"_links":{"self":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/707"}],"collection":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/comments?post=707"}],"version-history":[{"count":0,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/707\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/media?parent=707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/categories?post=707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/tags?post=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}