Google Custom Search Box in Wordpress Blog.

Photo by Pfly
AGoogle Custom Search Engine is created to search some sites or to search the whole web but emphasize the sites you list. This is useful when you want to restrict your viewers to search only the sites you own or to search only the sites of your choice. To put such a search box in Wordpress blogs first create the Google Custom Search Engine.

After the search engine has been created go to the Manage Custom Search Engines page. and click on the Control Panel link. On the Control Panel page click on Code link at the top. In ‘Search results hosting options‘ choose ‘Host Results on your website’ and check the ‘iframe’ suboption. In this option the search box will be located on Main Page and the results on another page. Copy the code given under ‘Search results code‘ in the second text box on the page.

Create a Search Results Page in your Blog

The next step is to create a Search Results Page on your site where the results will be shown. Login to your Wordpress blog admin Dashboard. Click the Write tab and then click Page subtab. Type title ‘Search’ and in the post paste the code copied from ‘Search results code’ above.. Scroll down to Page Template option below post editor, click the Drop down arrow and choose ‘Search‘. Publish Page.

Create Search Page Template

Open Notepad or any Text Editor. Copy and paste the following code in it :

<?php
/*
Template Name: Search Page
*/
?>
<?php get_header(); ?>
<!--page.php-->

<div id="content">
       <!--loop-->
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <!--post title-->
      <h1   id="post-<?php the_ID(); ?>">
        <?php the_title(); ?>
      </h1>
      <!--post with more link -->
      <div class="clear">
        <?php the_content('<p class="serif">continue</p>'); ?>
      </div>
      <!--if you paginate pages-->
      <?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
      <!--end of post and end of loop-->
      <?php endwhile; endif; ?>
 </div>
<!--page.php end-->
<!--include sidebar-->

<?php include (TEMPLATEPATH . "/sidebar2.php"); ?>
<!--include footer-->
<?php get_footer(); ?>

Save the page as searchpage.php. Upload above file to your theme directory. To customize the page change the code in the file above by going to Design tab and then clicking on Theme Editor and then on searchpage.php.

Put in the Search Form

Copy the link of the search page you created in the step above and paste it in ‘Specify search results details’ text box on the Code page of your Google Custom Search Engine. Check the box under ‘Specify where you want the advertising to be placed:”. Then copy the code in the first text box ‘Search box code‘ on the Code page of your Google Custom Search Engine. Login to Dashboard of Wordpress blog. Click on Design tab and then on Theme Editor. Click on the file where you want to put the search box (header.php). Paste the code between <div id=”search”> and </div>. Save file.

To put it in the sidebar add a Text widget by going to Design tab and click on Widgets. Then paste code in Text widget and save.

Monetize Search Page

On the Search Results page you can put in Adsense Ads. to earn money. To do this go to the Manage page for your Search Engine and click on the Control Panel link. On the Control Panel Page click the Basic link and scroll down and enable the Advertising status and save. Then click the ‘Make Money‘ link at top to put in the details.

To see how it works put in a search expression in the Google Custom Search Engine at top right of this page and click Search or hit Enter key on keyboard..

Leave a comment

Name (required)

E-mail (required)

URI

Your Message