Thesis Customization — How To Add Google Custom Search Anywhere On Your WordPress Website

Integrating Google Custom Search engine to your WordPress website is one of the most common customizations. As a  developer you may get the requests from your clients and customers to place the search box in the header, footer, sidebar or on the navigation bar itself. With the help of the hooks, Thesis makes it fairly simple to add the search box anywhere on the webpage. For example, adding the following code to your custom_functions.php enables you to feature the search box on the navigation bar (as the last navigation item).


function custom_search(){
?>
<li id="sb_cse">
<div>
<div>
<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'});
google.setOnLoadCallback(function(){
var main_search = new google.search.CustomSearchControl('partner-pub-8585397455718159:m50k2j-iu7f');
main_search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
main_search.setResultSetSize(google.search.Search.SMALL_RESULTSET);
main_search.draw('cse-search-form');
}, true);
</script>
</div>
</div>
</li>
<?php
}
add_action('thesis_hook_last_nav_item','custom_search'); // adds Google custom search box as the last navigation item

You can however customize the above code as you want. You can simply eliminate <li id="sb_cse"> to feature the search box within <div> or you can also hook the Google custom search box to footer or before sidebars. To feature the search box in the footer or before sidebars, replace the last line of the above code with one from the following lines of code.

add_action('thesis_hook_footer','custom_search'); //adds Google custom search box in the footer

add_action('thesis_hook_before_sidebars','custom_search');//adds Google custom search box before sidebars
Posted In:

Support & Maintenance, Code Snippets, Thesis WordPress Theme Framework

2 Comments

  1. Thanks for this tutorial.. Can you please also provide the css for this to match with my nav menu pleasE?

    Reply
  2. Hi. Could you also provide CSS for it?

    Reply

Comment on Thesis Customization — How To Add Google Custom Search Anywhere On Your WordPress Website

Your email address will not be published. Required fields are marked *