Menu

Integrate Custom Google Search Engine to Your WordPress Site

Google Custom Search is a great way to save on some bandwidth and see how your pages look on Google. Those who don’t want to use WordPress default search can integrate Google Custom Search to their website, also, Google custom search has the option to monetize their website’s with Google Adsense. Thus, best of both Worlds – Google’s search engine plus monetization.

In short, Google Custom Search is an offering by Google, that provides you your own version of Google search engine, that can be configured and integrated into your website. There are many configuration options offered, to completely customize the looks, search results and many more options.

Why Use Google Search instead of Native WordPress Search Feature

  • WordPress default search results quality is often questionable, its not perfect and sometimes user can’t find what they are looking for.
  • Google search results are of better quality
  • Monetization of search results page (with Adsense for Search)
  • Good and familiar user interface of Google search
  • Everyone feels comfortable to search with Google
  • Customize the look and feel of the results to match your site with Google
  • Enable autocompletions for your Google search engine

Now that we know why should we use Google search and what are its advantages, let’s integrate Google Custom Search to your WordPress site.

Integrating Google Custom Search in WordPress

Step1: Creating a Search Engine:
Head over to www.google.com/cse and sign in with your Google account. If you don’t have one, then you can also create one. After signing in, click on the big “Create a Custom Search Engine” button.
create

A three step process will begin. The first step is to set up your search engine. Fill out name, description, language, sites to search (enter your site URL here, in most cases this would be the URL of only one site), select the standard edition, accept terms of service and finally click on “Next”. (click on the below image to enlarge)
Google search

Now comes the part where we have to customize the looks. There are some pre-defined themes ready for you to get started. Select any of these theme and click on “Customize”.
Custom search

Customize the search bar and search results page as per your wish and click on “Next”. Note the various color options, you can choose color that suits your WordPress theme.
customize search

In the third step, you will get the code. Don’t copy this code yet. From the bottom of the page, click on “look and feel”.
get code

From “Choose a Layout” section, select “Two page”. This means that we can display the search box on any page and get the results on another page, in the same window.

Click on “Save & Get Code”, you’ll get the code in the next page. Let this page remain open for now.

Step2: Adding Custom Search to WordPress 
Now that the search engine is ready and all settings done, we’ll need to integrate the code to WordPress. The first thing we’ll be doing for this is to create a page template. To do this, copy and paste the below code and save it as a PHP file.

<?php
Template Name: Google Search
?>
<?php get_header(); ?>
<div id=”content” class=”widecolumn”>
<!– Google Search Result Code Begins –>
Google Search Results Code Here
<!– Google Search Result Code Ends –>
</div>
<?php get_footer(); ?>

Observe this code carefully, instead of “Google Search Results Code Here”, you need to enter the “search results” code, that’s because we want the results to appear in this page. Save that PHP file, name it something like googlesearch.php and upload it to your active theme’s directory. For e.g. if you are using twentyeleven theme, then the path would be: “wp-content/themes/twentyeleven”. To upload this file, use a FTP client or File Manager from cPanel. With this step done, page template is created and uploaded.

In this get code page, there is a field for “Specify the url in your site where you want the search results to appear”. In this field, enter the page permalink which we created in above step. For e.g. it can be www.yoursite.com/search (where search is the name of the page).
coding

Create a new page and name it something like “Search”. Search results will be displayed in this page. From the “Page Template” drop down menu, select “Google search” as your page template and hit the “Publish” button.

page template

Now, decide where would you like to place that “Search box”. You can place it in sidebar, footer, below posts or any other place. If in the sidebar, then just drag and drop the “Text” widget to the sidebar widget area and paste that “search box” code. If you want to edit this search box in some other area, then you’ll need to edit the respective theme file. But adding the code in the text widget is by far the simplest method to do this. This completes the integration of Google Custom Search to WordPress site.

Google Custom search is constantly evolving and they keep on adding more and more features. The most recent addition was the “autocompletions”. You can also check out documentation on Google custom search if you’re stuck somewhere.

Facebook Comments

No comments

Trả lời