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

August 27, 2011

Thesis Customization — How To Integrate Google Custom Search To 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

 

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 }

Amandeep Singh October 10, 2011 at 4:31 pm

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

Eugene March 12, 2012 at 8:08 am

Hi. Could you also provide CSS for it?

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

You can add images to your comment by clicking here.

Previous post:

Next post:

X

Wordpress, Thesis, Genesis tutorials from Binary Turf — one tutorial a day. Subscribe & sharpen your web design skills.

Name:

Email:

We respect your email privacy.