Learning While Aging

How to add Google plus button to your WordPress blog

In this post, I will show you how to add Google +1 button to your WordPress blog, but my tutorial involves modifying some theme files, so it depends on the theme you use. If you use a different theme, this tutorial still should give you some ideas which theme function to modify.

My current theme is Admired Theme, so I will show you how to add Google +1 button to this theme after the blog name and after each blog post title. I will also show you how to change the WordPress default Twenty Twelve theme later.

Admired Theme

1. Log into your blog, then go to Admire Options under Appearance, then turn on Show Social Icons under Social tab, but don’t fill in anything else on the form.

AdmiredOptionSocialIcon

2. Go to Google Developer’s web site and customize your Google +1 button code snippet. https://developers.google.com/+/plugins/+1button/

3. Click Editor tab under Appearance menu, then open header-social.php file and paste the code snippet from the step 2 above after this line of code:

   1: <div class="admired-social" style="color:#ffffff;">

WordPressEditor


4. Save the file and reload your blog web site, you will see the Google +1 button in the header.

5. Now open loop-single.php file, and just add Google +1 button itself. No need to add the <script> section, because the <script> section is already added in the header-social.php file.

WordPressEditor01

6. Save the file and reload the blog web site, then click on a single post, you will see a Google +1 button underneath the blog title.

Twenty Twelve

Now let’s see how to modify Twenty Twelve theme to add Google +1 button.

1. Open the header.php file in the Twenty Twelve theme, and paste the Google +1 button code snippet in it as shown as below:

WordPressEditorHeader2012

2. Save the file and reload your blog site to see the Google +1 button after your blog site name in the header.

3. Open the single.php file and only add Google +1 button itself as shown below:

WordPressSingle2012

4. Save the file and reload your blog site. Then click a post, then you will see the Google +1 button above the blog title.

Hope this helps.