Adding the Google +1 to Garland Theme in WordPress

Today, I came across a suggestion on Google AdSense to add the Google +1 Widget to my posts on my website.  Here’s what the notification looked like:

If you want a short description on what the +1 button does, you can watch this short video from the +1 Website:

So, here’s how I made it work in my theme (I am using Garland Revisited). First, I added the javascript link at the bottom of my header.php file.  Here’s the code I added:

<!-- begin Google +1 button -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<!-- end Google +1 button -->

So, here’s what the bottom of my header.php looks like (wp-content/themes/garland-revisited/header.php):

</ul>
</div> <!-- /header -->
<?php get_sidebar(); ?>
<div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">
<!-- begin Google Adsense -->
....(Adsense code removed)
<!-- end Google Adsense -->
<!-- begin Google +1 button -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<!-- end Google +1 button -->
<!-- begin content -->
<div class="node">

Next, I added the button to the home page. This is the line of code that i added to index.php:

<div style='float:right'><g:plusone href="<?php echo get_permalink() ?>"></g:plusone></div>

Update: I added the href=”<?php echo get_permalink() ?>” code for the index.php.  Without that, the user would be indicating a plus one for the home page rather than the article that the button is next to.

So, here’s what the top of my index.php looks like (wp-content/themes/garland-revisited/index.php):

<?php get_header(); ?>
<?php is_tag(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?>>
<div style='float:right'><g:plusone></g:plusone></div>
<h2><a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<span class="submitted"><?php the_time(get_option('date_format')) ?> &#8212; <?php the_author() ?> <?php edit_post_link(__('Edit'), ' | ', ''); ?></span>
<div class="content">
<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
	the_post_thumbnail(array( 75,75 ), array( 'class' => 'alignleft' ));
}
?>

Now, that only affects the home page. If you go into one of the posts, you won’t see the button. To fix that, we need to add it to single.php. And, here’s what the top of my single.php looks like (wp-content/themes/garland-revisited/single.php):

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?>>
<div style='float:right'><g:plusone></g:plusone></div>
<h2><?php the_title(); ?></h2>
<span class="submitted"><?php the_time(get_option('date_format')) ?> &#8212; <?php the_author() ?> <?php edit_post_link(__('Edit'), ' | ', ''); ?></span>
<div class="content">

Resources

• Google: +1 Your Website
• Thesis Theme User’s Guide: How to Add Google +1 (plus one) Share Button to WordPress and Thesis