How to incorporate Google Custom Search engine with Adsense into your WordPress blog.

How to incorporate Google Custom Search engine with Adsense into your WordPress blog.

The tutorial consists of following sections:

To make things little easier I’ve captured screenshots of some of the screens that we will talk about in this tutorial. To view those screenshots click on the thumbnail images in the following sections. For performance issues I did not include the screenshots on this page but provided the links for easy access.

Now let’s get started.

  1. Create Google Custom Search

    1. Go to Google Co-op and click on “Create a Custom Search Engine” button. You will need your Google email account to sign in. If you do not have Google account you can sign up for one from this page.
    2. Log in to your account. You will see ‘Create a Custom Search Engine’ form. (See Fig 1)
    3. Fill out all the basic fields on the page.
    4. For the “What do you want to search?” question select “The entire web, but emphasize sites I select.” option. Then add yourblogdomain.com to “Site to search” textbox. See Fig 1.
    5. Select “Standard Edition”
    6. Read Terms of Service agreement and click the check box.
    7. Click the “Next” button
  2. First step is to create your Google Custom Search engine.
    Congratulations! You now have your very own customized search engine! But we are not done yet. Click “Finish” to go to your “My search engines” page, where you can customize your new search engine.

    Create CSE
    Fig 1
  3. Customize Custom Search Engine

    1. On your Custom Search engine page click on ‘Control Panel’ link.
    2. Click on ‘Look and feel’.
    3. Select the style for your search box.
    4. Click ‘Save Changes’.
    5. Scroll down to customize your search results.
    6. Choose same colors for link,text etc. that you use on your website.
    7. Click ‘Save Changes’.
  4. Now we will customize your search engine.

    CSE Control Panel
    Fig 2
    Look and feel
    Fig 3
    You are doing great. You have created your custom search engine and have customized it to match your website color scheme. The next step is to get the code to make the search engine work on your blog.

  5. Setup search engine for your blog

  6. Now we are ready to setup the search engine for your website.

    1. From your ‘Search engine Control panel page’ click on the ‘Code’ link.
    2. Select ‘Host results on a non-Google site using an: ‘
    3. Select ‘iframe’
    4. The most important field on this page is the URL of your page where you want to display the search results. Let’s say that you want to display the results on http://www.Wordpressyoublogdomain.com/search_result. Don’t worry if you don’t have this page yet, we will create the page in a few minutes. Enter the URL in the textbox.
    5. Choose the position of the ads for your search page. I chose “Display Ads above and below search results”.
    6. Copy the code from ‘Search box’ code block and paste it to notepad or some other text editor.
    7. Copy the code from ‘Search result code’ block and paste it to Notepad or some other text editor. We will use these two code segments in your WordPress pages.
    Setup CSE Code
    Fig 4
  7. Monetize your search engine

  8. You can link your custom search engine with your AdSense account to earn money from the search results on your blog. Follow these steps to link your search engine to your AdSense account.

    1. From your ‘Search engine Control panel page’ click on the ‘Make Money’ link.
    2. If you already have an AdSense account, select ‘I already have an AdSense account’. Otherwise select ‘I am a new AdSense user’.
    3. Fill out all the fields and click ‘Submit’.
    4. Now your custom search engine is linked to your Adsense account. If the visitor clicks on Ad links on your search results page, the revenue will go to your AdSense account. (Hurray!)
    Monetize CSE
    Fig 5

    We are done creating and customizing your custom search engine. The next step is to integrate your custom search engine with your blog.

  9. Create Search Page

    1. Log on to your blog as administrator.
    2. Create a new page. (Click ‘Write’ then ‘Write Page’ links). Click on Fig 6 to see the screenshot.
    3. In then Page title field enter “Search Results:”. (This text will appear on your page so don’t type any thing silly.)
    4. Click on the code tab and paste the code from Google’s Search results code text box that we copied earlier [ see Step 3(vii)].
    5. In the Page_Slug field enter ’search_result’. This should match the page that you entered the in the URL field on Google’s form.
    6. Click ‘Publish’.
    7. From ‘Manage’ tab, go to ‘Pages’ tab and note the id of your result page. (Click Fig 7 for the screenshot)
    Create Search Page
    Fig 6
    Get Page ID
    Fig 7
    We are almost done, now the only thing remaining is to replace your blog search field with Google search field.

  10. Replace blog search field with Google Search

  11. In this last step we will replace your blog’s search field with the new Google custom search field.

    1. For WordPress admin Dashboard click on Presentation tab and then click ‘Theme Editor’.
    2. Find the code for your search field. Most themes have the code for search field in searchform.php file. If you don’t have that file look under header.php or sidebar.php files.
    3. Open the file and replace the code related to search form with the code from Google’s ‘Search box’ code that we copied in Step 3(vi).
    4. Save and close the file.

      Now if you visit your site you will see Google search box.
      This is great, except for one little problem. Your navigation menu may have the link to your new result page. We do not want that. Let’s fix this.

    5. Open your header.php and search for ‘wp_list_pages’.
    6. Add “&exclude=nnn“. (where ‘nnn‘ is the page id we noted in step vii of previous section)
      For example I have this line in my header.php file

      <?php wp_list_pages(’depth=1&sort_column=menu_order&title_li=’ . __(”) . ” ); ?>

      After the modification the line becomes:

      <?php wp_list_pages(’depth=1&exclude=56&sort_column=menu_order&title_li=’ . __(”) . ” ); ?>

    7. Save the file.
    8. If your header.php does not have your navigation links, search for the file that displays these links and add “&exclude” clause as mentioned above.
    9. Now visit your website. The link to your searhc page should no longer be in the navigation menu.
    Exclude page
    Fig 8

We are all done. Try your new Google search box to see how the result page looks like. You can always go back to Google Custom Search page and modify your search engine.
Hope you enjoyed this tutorial. Let me know if this tutorial was helpful or if you encountered any issues while setting up your custom search engine.

Advertisements

2 thoughts on “How to incorporate Google Custom Search engine with Adsense into your WordPress blog.

  1. Thanks for a very interesting article.

    I have used this to implament the Google custom search function to my website.

    Actually i had some troubles completing this article correctly.
    This means i had choosen to open google search results in a new window instead.

    When i tried using the implant of search results on a new page, it did the search but didnt come up with any search results.

  2. Great tutorial! I just used this to add cse to my site. The only thing I needed to change was the default value for googleSearchFrameWidth was too wide for my content, so I just changed it from 600 to 515 and all was right in the world.

    Thanks!
    John

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s