zParacha.com

Effective programming and blogging tips by Zaheer Paracha

Subscribe:

-->
Posted by Zaheer 41 COMMENTS

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.

    Create CSE
    Fig 1
     
  3. Customize Custom Search Engine

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


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

Bookmark and Share

Popularity: 11% [?]

If you enjoyed this post, make sure you subscribe to my RSS feed!

Related posts:

categories: Blogging

41 Responses

  1. Frank H M says:

    This is a great tutorial. Thanks a lot.

  2. Dee says:

    Very handy. I was wondering how to do this.

  3. ilango says:

    Sir

    Its a great tutorial.

    I am using Greentech as a theme. Is this the code (which is under the header.php file) to be replaced with Google search code results?

    <form id=”searchform_header” method=”get” action=”">

    Which part do I exactly replace?

    Ilango

  4. ilango says:

    I am using Greentech and would like to know which is the code I should replace. I found it in the header.php file. Is this the code to be replaced with Goolgle search results code?

    <form id=”searchform_header” method=”get” action=”">

  5. ilango says:

    I have followed every step but when I click on the search box I get “page not found”. Could you please help me please?

  6. zparacha says:

    @ilango, in your header.php file replace following code

    <form id=”searchform_header” method=”get” action=”<?php echo $_SERVER['PHP_SELF']; ?>”><input type=”text” name=”s” id=”s” value=”Search this site…” onfocus=”if (this.value == ‘Search this site…’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Search this site…’;}” /></form>

    with your Google Search code.

  7. zparacha says:

    @ilango, if you can send me you google search engine settings I may be able to help you setup your search page. You can email me your settings through Contact us form.

  8. Jenny says:

    Great! Thanks for this tip.

  9. priya says:

    I have created upto 4 steps,I don’t know how to log onto my blog as administrator.Kindly help me sir

  10. Thanks! This was great. Made a difficult task a lot easier!

    Chad Bordeaux’s last blog post..Dining Out: Salsa’s Mexican Restaurant

  11. Alexwebmaster says:

    Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru

  12. thank you so much i have been struggling with this for soooo long

  13. Rigg says:

    What a useful blog?wow !!!!

  14. GadgetMETER says:

    Thank you! This is the only article I read that got our search engine to work! Thank you so much! I read the other ones and they were so confusing.

    Cheers!

  15. Magdalene Cossett says:

    Wow! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?

  16. Gilbert says:

    Hello! can’t find your contact, so I thought I will use this, anyway, we got a private webmaster forum ready to roll in a weeks time, pm me if you’re interested.

  17. Dorian says:

    After reading this blog makes me want to start my own :)

  18. sandrar says:

    Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  19. I love your site. :) Love design!!! I just came across your blog and wanted to say that I?ve really enjoyed browsing your blog posts. Sign: ndsam

  20. megan fox says:

    Sign: umsun Hello!!! rcuwwymhyw and 8333ssgfhphzye and 7036I love your blog. :) I just came across your blog.

  21. Search file says:

    thats perfect info!

  22. @Search file I am glad you found this article useful.

  23. Hello everyone. If someone is interested I recommend a SEO links ForOzik.com. System is safe and works well.

  24. Great blog. Do you know of any relevant post like Top Secrets For Google Adsense Alternatives Have a great day!

  25. Piseth says:

    This is awesome! I found it now. thanks

  26. This was a Excellent blog post, I will save this post in my Furl account. Have a good day.

Leave a Reply

Search

Sponsors

Get Adobe Flash playerPlugin by wpburn.com wordpress themes