how to add google custom search to the existing search box?

  • desai_amogh

    #4246

    Hi,

    Kindly advise how can i integrate the google CSE in my searchform.

    Please see the code in my searchform.php below:

    <form id="searchform" class="searchform" method="get" action="<?php echo get_home_url(); ?>">
    <p class="clearfix default_searchform">
    <input type="text" name="s" onblur="if (this.value == '') {this.value = '<?php _e('Search','graphene'); ?>';}" onfocus="if (this.value == '<?php _e('Search','graphene'); ?>') {this.value = '';}" value="<?php _e('Search','graphene'); ?>" />
    <button type="submit"><span><?php _e('Search', 'graphene'); ?></span></button>
    </p>
    <?php do_action('graphene_search_form'); ?>
    </form>

    And this is the new google CSE code

    <div id="cse-search-form" style="width: 100%;">Loading</div>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
    google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});
    google.setOnLoadCallback(function() {
    var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl(
    'xxxxxxxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxx', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    customSearchControl.draw('cse', options);
    }, true);
    </script>

    <style type="text/css">

    ***Style info snipped by moderator***

    }
    </style>

    Regards

    Amogh

    Mod

    Kenneth John Odle

    #27671

    You can’t add Google custom search to the existing search box. You have to replace it.

    In the “Header Display Options”, turn off the search feature. Then, use a Graphene action hook widget area and a text widget to insert the above code into your site. Use the graphene_top_search or graphene_top_bar widget area. (You may have to try different ones.)

    How to use action hook widget areas:

    http://blog.kjodle.net/2011/11/04/graphene-action-hook-widgets-an-easy-way-to-modify-your-blog/

    As for all the styling information you included (I snipped it; we don’t really need to know it here), you will want to drop that into either Graphene’s built in Custom CSS feature or into your child theme’s style sheet. Given the amount of code this includes, I highly recommend using a child theme and adding it to your child theme’s style sheet so as not to drag down your site’s performance.

    Cheers,

    Ken

    desai_amogh

    #27672

    Hey Kenneth,

    Thanks alot for your reply. This solution did work, that too without the css, with just the code you gave me above. There is a problem though.

    check it here:

    http://amoghdesai.com/

    the search box apears and has all the styling, but the search button doesnt work.

    Mod

    Kenneth John Odle

    #27673

    There is probably something wrong with that code, then. Check with Google to make sure you have the right one.

    Prasanna SP

    #27674

    Add the search code Google gives you to a Plain Text/HTML widget and add the block to your sidebar. Then create a blank page and select HTML editor, then paste the search page code which Google gives.

    I’ve tried Google search for my site. But, the built-in WordPress search functionality is better than Google search. The only excuse to use Google Custom Search is “Ads”!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!