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
Join 37,807 others and get free tutorials & tips on design & development using Wordpress on, Thesis & Genesis!
Need help with Wordpress, Thesis or Genesis?
Are you a designer or a developer looking for a hand with Wordpress, Thesis or Genesis? Or perhaps want to save time with a project? Get in touch and let's get the ball rolling! Check out our Thesis development, PSD to Thesis & other services.

{ 2 comments on Thesis Customization — How To Add Google Custom Search Anywhere On Your WordPress Website… read them below or add one }
Thanks for this tutorial.. Can you please also provide the css for this to match with my nav menu pleasE?
Hi. Could you also provide CSS for it?