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.
Create Google Custom Search
- 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.
- Log in to your account. You will see ‘Create a Custom Search Engine’ form. (See Fig 1)
- Fill out all the basic fields on the page.
- 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.
- Select “Standard Edition”
- Read Terms of Service agreement and click the check box.
- Click the “Next” button
Customize Custom Search Engine
- On your Custom Search engine page click on ‘Control Panel’ link.
- Click on ‘Look and feel’.
- Select the style for your search box.
- Click ‘Save Changes’.
- Scroll down to customize your search results.
- Choose same colors for link,text etc. that you use on your website.
- Click ‘Save Changes’.
Setup search engine for your blog
- From your ‘Search engine Control panel page’ click on the ‘Code’ link.
- Select ‘Host results on a non-Google site using an: ‘
- Select ‘iframe’
- 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.
- Choose the position of the ads for your search page. I chose “Display Ads above and below search results”.
- Copy the code from ‘Search box’ code block and paste it to notepad or some other text editor.
- 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.
Monetize your search engine
- From your ‘Search engine Control panel page’ click on the ‘Make Money’ link.
- If you already have an AdSense account, select ‘I already have an AdSense account’. Otherwise select ‘I am a new AdSense user’.
- Fill out all the fields and click ‘Submit’.
- 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!)
Create Search Page
- Log on to your blog as administrator.
- Create a new page. (Click ‘Write’ then ‘Write Page’ links). Click on Fig 6 to see the screenshot.
- In then Page title field enter “Search Results:”. (This text will appear on your page so don’t type any thing silly.)
- 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)].
- 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.
- Click ‘Publish’.
- From ‘Manage’ tab, go to ‘Pages’ tab and note the id of your result page. (Click Fig 7 for the screenshot)
Replace blog search field with Google Search
- For WordPress admin Dashboard click on Presentation tab and then click ‘Theme Editor’.
- 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.
- 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).
- 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.
- Open your header.php and search for ‘wp_list_pages’.
- 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=’ . __(”) . ” ); ?>
- Save the file.
- 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.
- Now visit your website. The link to your searhc page should no longer be in the navigation menu.
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.
Now we will customize your search engine.
Now we are ready to setup the search engine for your website.
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.
We are done creating and customizing your custom search engine. The next step is to integrate your custom search engine with your blog.
In this last step we will replace your blog’s search field with the new Google custom search field.
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.