{"id":3679,"date":"2010-01-22T20:49:04","date_gmt":"2010-01-22T19:49:04","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?p=3679"},"modified":"2016-12-31T02:15:03","modified_gmt":"2016-12-31T01:15:03","slug":"how-to-google-custom-search-wordpress","status":"publish","type":"post","link":"https:\/\/www.chipwreck.de\/blog\/2010\/01\/22\/how-to-google-custom-search-wordpress\/","title":{"rendered":"How to: Google Custom Search &#038; WordPress"},"content":{"rendered":"<p>Want to use Google Custom Search together with WordPress? Here&#8217;s how to do that.<!--more--><\/p>\n<h3>You need&#8230;<\/h3>\n<ul>\n<li>A Google Account<\/li>\n<li>Knowledge how to create\/modify WordPress themes<\/li>\n<li>A basic understanding of PHP is also very helpful.<\/li>\n<\/ul>\n<h3>General Considerations<\/h3>\n<p>Google Custom Search is similar to a site-specific Google search, much like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/Google-site-search.png\" alt=\"\" title=\"Google site search\" width=\"520\" height=\"68\" class=\"alignnone size-full wp-image-3712\" srcset=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/Google-site-search.png 520w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/Google-site-search-120x15.png 120w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/Google-site-search-300x39.png 300w\" sizes=\"auto, (max-width: 520px) 100vw, 520px\" \/><\/p>\n<p>The advantages of using Google Search:<\/p>\n<ul>\n<li>Similar pages are ignored (&#8220;In order to show you the most relevant results, we have omitted some entries &#8230;&#8221;)<\/li>\n<li>The translation functions from Google can be used<\/li>\n<li>It&#8217;s possible to search several websites at once<\/li>\n<li>You can puts ads there (if you like)<\/li>\n<li>The searches can be very easy analyzed with Google Analytics (if you use that)<\/li>\n<\/ul>\n<p>But there are also some drawbacks:<\/p>\n<ul>\n<li>The layout can be customized but of course only to a certain amount<\/li>\n<li>If you add a new post or page it takes some time until it&#8217;s included in the Google Search whereas in WordPress search it&#8217;s immediately visible<\/li>\n<li>The search needs to load external Javascript code from Google, which is not as fast as using WordPress<\/li>\n<\/ul>\n<h3>How does it work?<\/h3>\n<p>Of couse you need a Google account, if you have got one, visit <a href=\"http:\/\/www.google.com\/cse\/\" class=\"external\">Google Custom Search<\/a> and setup a custom search engine there.<\/p>\n<p>There you set up name, keywords, domain(s) to search, layout customizations etc. for your custom search engine (<q>cse<\/q>).<\/p>\n<p>As the next step you can choose the hosting type of search: &#8220;Search Element&#8221;, &#8220;iframe&#8221; or &#8220;Google hosted page&#8221;. &#8220;Google hosted page&#8221; means another window from google.com opens and the results are shown there. &#8220;iframe&#8221; is what I used: The results are included in a special page on your site. &#8220;Search Element&#8221; is a new features, here a layer pops up below the search field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-hosting-options.png\" alt=\"\" title=\"google cse - hosting options\" width=\"576\" height=\"117\" class=\"alignnone size-full wp-image-3688\" srcset=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-hosting-options.png 576w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-hosting-options-120x24.png 120w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-hosting-options-300x60.png 300w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/p>\n<p>I&#8217;ll now show how to include the iframe-search into WordPress.<\/p>\n<h3>Integration into WordPress<\/h3>\n<p class=\"small\">Note: This assumes you are using your own theme and\/or know how to edit WordPress theme files!<\/p>\n<h5>Step 1: Choose the URL for the results page<\/h5>\n<p>If you use <q>iframe<\/q>, you have to tell Google where the result will be shown, in my case I simply used <kbd>\/blog\/search<\/kbd>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-choose-url.png\" alt=\"\" title=\"google cse - choose url\" width=\"436\" height=\"119\" class=\"alignnone size-full wp-image-3691\" srcset=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-choose-url.png 436w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-choose-url-120x32.png 120w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-choose-url-300x81.png 300w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><\/p>\n<p>Of course the URL should be inside your blog, preferably a WordPress page.<\/p>\n<h5>Step 2: Get the code from Google<\/h5>\n<p>After setting up your cse you receive two code snippets from Google, one for the search box &#8211; another one for the results page:<\/p>\n<p><a href=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-get-the-code.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-get-the-code-117x120.png\" alt=\"\" title=\"google cse - get the code\" width=\"117\" height=\"120\" class=\"alignnone size-thumbnail wp-image-3692\" srcset=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-get-the-code-117x120.png 117w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-get-the-code-294x300.png 294w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-get-the-code.png 660w\" sizes=\"auto, (max-width: 117px) 100vw, 117px\" \/><\/a><\/p>\n<h5>Step 2: Setting up a result page<\/h5>\n<p>To make things easy, use a WordPress page and call it <q>Search<\/q>, the <q>permalink<\/q> has to match the URL you entered in the last step:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/wp-results-page.png\" alt=\"\" title=\"wp results page\" width=\"484\" height=\"133\" class=\"alignnone size-full wp-image-3695\" srcset=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/wp-results-page.png 484w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/wp-results-page-120x32.png 120w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/wp-results-page-300x82.png 300w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><\/p>\n<p>..and put the &#8220;Search results code&#8221; from Google into this page, like this for example:<\/p>\n<pre lang=\"html\">\r\n...\r\n&lt;h2&gt;Google search results&lt;\/h2&gt;\r\n...\r\n&lt;div id=\"cse-search-results\" style=\"\"&gt;&lt;\/div&gt;\r\n\t..more code from google..\r\n\t&lt;script type=\"text\/javascript\" src=\"http:\/\/www.google.com\/afsonline\/show_afs_search.js\"&gt;&lt;\/script&gt;\r\n...\r\n<\/pre>\n<h5>Step 3: Modify the search form<\/h5>\n<p>Edit the WordPress theme file <q>searchform.php<\/q> and insert the &#8220;Search box code&#8221; from Google there. So it might look similar to this snippet:<\/p>\n<pre lang=\"html\">\r\n&lt;h2 class=\"widgettitle\"&gt;Search my blog&lt;\/h2&gt;\r\n...\r\n&lt;form action=\"http:\/\/YOURDOMAIN\/search\" id=\"cse-search-box\" name=\"cse-search-box\"&gt;\r\n\t..more code from google..\r\n&lt;\/form&gt;\r\n&lt;script type=\"text\/javascript\" src=\"http:\/\/www.google.com\/cse\/brand?form=cse-search-box&amp;lang=en\"&gt;&lt;\/script&gt;\r\n...\r\n<\/pre>\n<p>Now the search widget shows the Google Search field and already is linked to the google results page.<\/p>\n<h5>Step 4: Redirecting the WordPress search<\/h5>\n<p>One thing is still to be done &#8211; the default WordPress search is still present, you could access it by calling: <kbd>\/search\/example<\/kbd>.<\/p>\n<p>But to be consistent, we redirect this search also to the Google results page. This is a bit more complicated, so I&#8217;ll explain this a bit more detailed:<\/p>\n<ul>\n<li>First do a search for <q>example<\/q> using the Google CSE and copy the URL from the result page<\/li>\n<li>Take this URL and move the search term parameter (q=..) to the end and remove the term <q>example<\/q>:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/URL-result-modification.png\" alt=\"\" title=\"URL result modification\" width=\"585\" height=\"81\" class=\"alignnone size-full wp-image-3714\" srcset=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/URL-result-modification.png 585w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/URL-result-modification-120x16.png 120w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/URL-result-modification-300x41.png 300w\" sizes=\"auto, (max-width: 585px) 100vw, 585px\" \/><\/p>\n<p class=\"small\">Your result is of course a little bit different&#8230;<\/p>\n<p>Now open your main template file (index.php) and insert this code at the top, replacing the URL (inside the single quotes) by the one you created aboved:<\/li>\n<pre lang=\"php\">\r\n&lt;?php if (is_search()) :\r\n\t$result_url = 'http:\/\/YOURDOMAIN\/search\/?cx=partner-pub-12345..11&ie=UTF-8&sa=&siteurl=YOURDOMAIN%2F&q=';\r\n\theader('Location:'.$result_url.$s);\r\n\texit;\r\nendif; ?&gt;\r\n<\/pre>\n<p><em>Make sure, there are no PHP syntax errors (keep a backup of the previous index.php..)<\/em><\/p>\n<p>What&#8217;s happening here? The <kbd>is_search()<\/kbd>-function is a Template Tag from WordPress, which returns true if the user searched for something. In this case we redirect the Browser to the Google Results page and insert the search parameter from WordPress (<kbd>$s<\/kbd>) into the URL as if the user had used the searchform.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to use Google Custom Search together with Wordpress? A tutorial.<\/p>\n","protected":false},"author":2,"featured_media":3691,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[54,79],"class_list":["post-3679","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdevelopment","tag-track","tag-webdesign"],"jetpack_featured_media_url":"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2010\/01\/google-cse-choose-url.png","jetpack_shortlink":"https:\/\/wp.me\/paPEN-Xl","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/3679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/comments?post=3679"}],"version-history":[{"count":1,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/3679\/revisions"}],"predecessor-version":[{"id":8242,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/3679\/revisions\/8242"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media\/3691"}],"wp:attachment":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media?parent=3679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/categories?post=3679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/tags?post=3679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}