AdSense is by far the most popular and easy to use advertisement program for new bloggers. With AdSense you earn money when users click on the ads on your website. But the ads are not the only source of revenue for your blog. You can use AdSense for Search to to increase your revenue. But a better alternative to AdSense search is the Google Custom Search Engine. You can customize Google Search Engine to blend with your blog’s theme. You can also specify whether to search entire web or just your own website. It is more customizable than AdSense search and like AdSense for search you can earn money through Custom Search Engine.

In this tutorial I’ll show you how to setup Google Custom search engine and then incorporate it with AdSense into your WordPress blog.

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

    2. First step is to create your Google Custom Search engine.

    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


    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.

    cseImg1Sm How to incorporate Google Custom Search engine with Adsense into your Wordpress blog.
    Fig 1
     

  2. Customize Custom Search Engine

    3. Now we will customize your 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’.


    cseImg2Sm How to incorporate Google Custom Search engine with Adsense into your Wordpress blog.
    Fig 2
    lookFeelSM How to incorporate Google Custom Search engine with Adsense into your Wordpress blog.
    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.

  3. Setup search engine for your blog

    4. 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.

    cseCodeSM How to incorporate Google Custom Search engine with Adsense into your Wordpress blog.
    Fig 4
     

  4. Monetize your search engine

    5. 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!)


    monetizeCSEsm How to incorporate Google Custom Search engine with Adsense into your Wordpress blog.
    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.

  5. 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)

    createPageSm How to incorporate Google Custom Search engine with Adsense into your Wordpress blog.
    Fig 6
    pageIdSm How to incorporate Google Custom Search engine with Adsense into your Wordpress blog.
    Fig 7


    We are almost done, now the only thing remaining is to replace your blog search field with Google search field.

  6. Replace blog search field with Google Search

    7. 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 search page should no longer be in the navigation menu.


    excludePageSm How to incorporate Google Custom Search engine with Adsense into your Wordpress blog.
    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.

If you enjoyed this post, make sure you subscribe to my RSS feed!
article clipper vert How to incorporate Google Custom Search engine with Adsense into your Wordpress blog.
 

Related posts: