add google translate to thesis

It’s likely still in my sidebar in the upper right — the google translate element. For fun I wanted to add it to this site, and make it appear like any other widget in my sidebar. Like a lot of customization with thesis, it was really easy. I added the following to my custom_functions.php:

<?php
add_action('thesis_hook_before_sidebar_1','insert_google_translate_element');
function insert_google_translate_element() {
?>
	<li class="widget">
		<!-- Google Translate Element -->
		<div id="google_translate_element" style="display:block"></div><script>
		function googleTranslateElementInit() {
		  new google.translate.TranslateElement({pageLanguage: "en"}, "google_translate_element");
		};</script>
		<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
	</li>
<?php
}
?>

I used the ‘thesis_hook_before_sidebar_1′ hook to place it above all of my other widgets in the sidebar. This hook is *inside* the sidebar’s <ul> element, so I wrapped the translate div in an <li> with the same css class that the other entries in the sidebar have, “widget”. This keeps the spacing consistent, and links the style with that of the other widgets. If I want to change the look of all the widget <li>’s later, this additional one will stay consistent.

i’ve got a followup on how to preserve code blocks. it’s specific to the wp-syntax plugin, but the idea might be useful: http://www.mattvsworld.com/blog/2010/01/prevent-google-from-translating-code-blocks/

cheers!

Tagged as: css, google, thesis, translate, web, widgets, wordpress