Integrating Google Gadgets Into WordPress Themes

As if you weren’t satisfied with all the WordPress Widgets, you can also incorporate a wide variety of Google Gadgets into your full version WordPress Theme.

Google Gadgets are, well, anything. They are services, searches, feeds, games, toys, information, and anything. Basically, they are tools, utilities, and games you can add to your web pages by copying and pasting the Google Gadget’s javascript into your web page design.

Most people will want to include these in their sidebars, but they can be included in any template file in a full version WordPress Theme blog.

Deciding where you want to put your fun Google Gadgets on your WordPress blog is a little tricker than you may imagine. The average sidebar in a WordPress Theme is about 180 pixels wide. Some are narrower and some are wider. Most Google Gadgets are designed to fit within a 320 pixel width. This will break most WordPress Theme sidebars.

Narrow the Google Gadget and you can get a funky looking squished or half concealed image with scroll bars.

Basically, to add a Google Gadget to your WordPress blog, you have three choices.

1. You can try to find a Google Gadget that will work within the narrow format of your sidebar.
2. Put your Google Gadget somewhere else within your WordPress Theme.
3. Widen the sidebar width.

To widen the sidebar width, you need to edit the style.css file in your WordPress Theme, widening the width of the sidebar to 320 pixels plus maybe a little more, but also narrow the width of your content container column to make up for the extra width of the sidebar. Otherwise, the sidebar container will push the content column down or overlap. If you add to one container, you must subtract from its neighbors. If this is too complicated for you, consider looking for a WordPress Theme with a wide sidebar, or using the Google Gadget elsewhere.

In our example, let’s skip playing with sidebar width and put the Google Gadget in the footer so it appears at the bottom of the content as a visual accessory.

Open the footer.php template file in a text editor. Look though the code in the template file for where you want the Google Gadget to appear. Some footers only include the “Powered by WordPress” with the name and link to the WordPress Theme author. Others may include a template tag to list your categories or pages. Let’s put it before all of these.

The Google Gadget we’re going to add is the Current Moon Phase Google Gadget. This Gadget shows the current stage of the moon.

On the Moon Phase Google Gadget’s page, click the Add to Your Web Page button and you will be taken to the customization page for the Gadget. Here, you can change the title, size, border, and more customization features.

Pay close attention to the customization features. The width and height maybe set, but the actual width is also controlled by the thickness of the border you choose. A wide border won’t make the Google Gadget wider, but it will compress the inside area. Play around with the borders to get the look you want and then play with the width and height to frame it to your specifications.

For our experiment, I changed the width to 220 pixes to narrow it a little and changed the border to the thinnest non-descript border. You can choose whatever look you want. Since I want to showcase the way the moon looks from the Northern Hemisphere, I set those settings as well.

When you have the look you want, click Get Code. A window will appear below with the Javascript for the Google Gadget. Copy the entire code.

To select the code, you can click and drag your mouse across it. Or use the keyboard shortcut of Ctrl+A to select it all and then Ctrl+C to copy it.

Paste the javascript code into the appropriate spot in your footer with Ctrl+V, taking care to put it on it’s own line and not breaking up any PHP code sections. In your footer, you can put it under the <div id="footer> line to put it at the top of the footer before all the links.

I recommend you make some space above and below your Google Gadget, just to give it some room. There are a couple ways of doing this. The simplest is to add some line breaks (<br />) before and after.

The better way is to create a spacer DIV container to help you control the specific size of the space.

In the footer template file, above and below the Google Gadget Javascript, add:

<div class="spacer">&nbsp;</div>

In your stylesheet, add the following style:

.spacer {clear:both; height:10px}

This inserts a 10 pixel blank space above and below.

Let’s say in our example, we’d like the Moon Phase Google Gadget to sit on the right size of the footer with the links moved to the left. To do that, we need to put the javascript code into it’s own HTML container and add a float, an declaration in the stylesheet that instructs that container to align itself to the right of the rest of the content around it.

In the footer, let’s wrap the javascript in a DIV with a class called “gadget”:

<div class="gadget">
<script src="http://gmodules.com/ig/ifr?url=http://...
...&output=js"></script>
</div>

In the stylesheet, add the following:

.gadget {float:right;}

You can also add margin and padding space and even wrap it in a border. From here, you can do a lot more to style the container the Google Gadget sits in. Be creative.

Save and upload the changed stylesheet and footer file to your WordPress Theme’s folder and check out your new Google Gadget on display. Some editing and tweaking maybe required, but that’s the core of it.

Incorporating Google Gadgets Into Your Post Content

If you are using the full version of WordPress, you can include Google Gadgets in your blog post content. In most cases this will work.

Simply paste the Javascript code into your post.

Because the resulting Google Gadget will just sit there, not shifting to the right or left so text will wrap around it or crowd against the top and bottom, you might want to wrap it in a DIV as described above, to shift it from one side to the other or put two side-by-side.

If you have classes in your WordPress Theme for right, left, alignright, or alignleft styles in your style.css, then wrap the Javascript in a DIV with that class to float it to the left or right such as:

<div class="right">
<script src="http://gmodules.com/ig/ifr?url=http://...
...&output=js"></script>
</div>This is text that would wrap
around the Google Gadget to the left of the
image...

For more information on Javascript and WordPress, see Using Javascript in WordPress.

Warning: Fun but Filling
Overwhelming Your Web Pages With Too Many Google Gadgets

A final word of warning. It’s really easy to go nuts with these gimmick gizmos and clutter up your page with all the fun. And there are some fun Google Gadgets. Each one calls out from your website to Google’s website to pull in the information. Every one takes a few seconds to load. The more you have, the longer it may take your web page to load.

You can have a great deal of fun using the power of WordPress’ Conditional Tags and PHP coding to show your Google Gadgets only on the front page or on specific page views like offering the Dictionary.com search or Wikipedia search on your search template file.

For WordPress.com bloggers, stay tuned. If these prove to be as popular as I think they will be, I’m sure they will figure out how to include them in your blogs.

So tell us all how you are adding these fun new gadgets to your blog!

---

*Update*

I just got an email asking me to explain how NOT to break PHP code with these Google Gadgets in your WordPress Theme’s template files.

PHP code used in WordPress begins with <? or <?php and ends with ;?>. The code between instructs your WordPress Theme to do something, such as pull information out of the database or activate a WordPress Plugin.

A PHP and WordPress template tag commonly found on most WordPress Themes is wp_list_cats, used to display links to your blog’s categories. In our example, the template tag’s arguments (instructions) are set to display category links sorted by name, showing the number of posts per category, and excludes category ID numbers 10 and 15 from the category link list:

<ul>
<?php 
wp_list_cats('sort_column=name&optioncount=1&exclude=10, 15'); 
?>
</ul>

When you paste the Google Gadget Javascript, you do not want to do this:

<ul>
<?php 
<div class="gadget">
<script src="http://gmodules.com/ig/ifr?url=http://...
...&output=js"></script>
</div>
wp_list_cats('sort_column=name&optioncount=1&exclude=10, 15'); 
?>
</ul>

That will break the WordPress template tag and PHP code and cause an error. Keep the Javascript outside of PHP statements like this:

<ul>
<?php 
wp_list_cats('sort_column=name&optioncount=1&exclude=10, 15'); 
?>
</ul>
<div class="gadget">
<script src="http://gmodules.com/ig/ifr?url=http://...
...&output=js"></script>
</div>

Adding these Google Gadgets, glorified Widgets, to your WordPress Theme should be simple and easy, if you just think it through and place the Javascript code carefully.

Related Articles

• Playing with WordPress.com New Sidebar Widgets
• My WordPress Theme is Broken
• The Secret of Successful Editing of WordPress Themes
• CSS: Studying Your CSS Styles
• Secrets of WordPress Theming
• Finding Your CSS Styles in WordPress
• Free Text Only Editors for Templates, PHP, HTML, CSS, and More
• Breaking the Limits of Customizable WordPress Themes
• Using Javascript in WordPress
• How to Put Javascript in External Files

---

Site Search Tags: google, google gadgets, wordpress, wordpress theme, wordpress design, template files, putting google gadgets in wordpress, wordpress theme design, wordpress google gadgets, wordpress widgets
Copyright Lorelle VanFossen, member of the 9Rules Network Subscribe