Installing Google Plus Button on WordPress

If you’ve been anywhere on the internet in the past few months, you’ve seen the +1 button from Google right next to Facebook, Twitter, StumbleUpon and other social media sharing buttons.  It’s pretty clear that Google intends the “plus one” to be THE most important form of approval on the ‘net, integrating all those “plusses” into search results as well as showing them within the Google+ Plus network.

Here’s how to integrate the Google Plus button on the WordPress Twenty Eleven theme.

Installing the Google Plus JavaScript code snippet

The first step to adding the Google Plus button to this theme is to add the JavaScript code snippet that “talks” to Google.  This code can be placed anywhere in the theme, but lets install it in our footer.php file, right before the the closing </body> tag:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

</body>

Adding Google Plus button on front page

To add the Google Plus button to each post displayed on the first page, we need to modify the content.php file.  Like all of the other modifications we’ve made to create a child theme like creating a custom header and custom footer, copy the content.php file into your child theme folder. To display the Google Plus button underneath the title, we need to place the following code, after the <div class="entry-content"> and before the <?php the_content> tag:

1
2
3
4
<div class="entry-content">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone href="<?php the_permalink(); ?>"></g:plusone>
<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>

In the Google button code, the piece of code that references the_permalink is a WordPress function that passes the link of blog post to the Google Plus button.  Without this addition to the button, Google will use the URL of the page you are on…in my case, the 3 buttons on the front page would all reference www.randyzwitch.com, which means a visitor wouldn’t be able to recommend an individual post.

Adding a Google Plus button to an individual blog post

To add the Google Plus button on an individual article or blog post using the “Standard” format in Twenty Eleven, we can do the same basic process as above, except we’ll modify the content-single.php file (again, copy this file into your child theme folder!).  We’ll add the code after the <h1> tag and before the “If” statement that starts building the content:

1
2
3
4
5
<h1 class="entry-title"><?php the_title(); ?></h1>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone href="<?php the_permalink(); ?>"></g:plusone>

<?php if ( 'post' == get_post_type() ) : ?>

Technically, you don’t need to specify the the_permalink reference, since there will only be a single button on an individual blog post, and the Google Plus button will use the URL of the page.  But, it doesn’t hurt, so for documentation sake I’ve left it in.

Once you’ve added the button code on the individual page, you’re done! Visitors to your blog can now recommend your content on Google search and on the Google+ network.

Optional steps

For this tutorial, I only provided the code for modifying the “Standard” page format for a single blog post.  If you are using multiple formats across your blog, you’ll need to modify each template you are using.  They all begin with content-<format>.php, and the button code goes after the <h1> tag and before any other code.

It’s also possible to modify how large the Google Plus button is and what is displayed.  I’m using the default bubble annotation, but if you’d like to have a larger or smaller button, or just different options, you can use the code builder from Google to see the button options.


Prevent Google Analytics From Tracking Logged-in Users

In a previous post, I discussed how it’s useful to have both WordPress Stats and Google Analytics installed on a WordPress blog; the former can be used as a quick dashboard to check in on the day’s traffic, and the latter can be used for more advanced analysis. But in order to keep our datasets comparable, we need to track users in a similar manner.

How do WordPress Stats and Google Analytics differ?

WordPress Stats doesn’t track visits from logged in users, but Google Analytics doesn’t provide this functionality out-of-the-box. It is possible to filter out traffic by IP address in Google Analytics using a Custom Filter, but this only works if you have a static IP address (many/most home users don’t).

However, with some simple PHP code using the WordPress conditional tag is_user_logged_in() we can mimic this behavior with Google Analytics, and no matter what browser you choose or what location you work from, as long as you are logged in to WordPress, Google Analytics won’t track your visits.

Modifying the header.php file

In order to add the conditional tag to our Google Analytics code, we need to modify the header.php file where we originally installed the Google tracking code.  What we’re going to do is add the following code around our Google Analytics code, and WordPress will handle the “logged in logic” for us:

1
2
3
4
5
<?php
if ( is_user_logged_in() ) {
} else {
}
?>

The first clause of this code (the IF line) checks WordPress to see if you are logged in; if so, the code that is between the {} brackets will execute.  The second clause (the ELSE statement) is what happens if the user is NOT logged in.  Since we only want Google Analytics to track our visits when we’re not logged in, we’ll place our tracking code within the ELSE clause. When you have done this correctly, the code in your header.php file should look similar to the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
if ( is_user_logged_in() ) {
} else {
<script type="text/javascript">
var _gaq =_gaq || [];
 _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
 _gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
(function() {
 var ga = document.createElement('script');
 ga.type = 'text/javascript';
 ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga,s);
})();
</script>
}
?>

If you have an external JavaScript file holding your tracking code, the code would look like the following:

1
2
3
4
5
6
<?php
if ( is_user_logged_in() ) {
} else {
 echo "<script type='text/javascript' src='http://yourdomain.com/your_ga_code_filename.js'></script>";
}
?>

Are there any downsides to this method of implementing Google Analytics this way?

By implementing Google Analytics in this manner, you improve your data consistency between WordPress Stats and Google Analytics. You also avoid inflating your page views and visits, especially when doing blog development and re-designs or while previewing drafts of blog posts.

The one downside I’ve encountered so far is that if you are testing any tracking code changes themselves (such as adding onclick events to links/buttons to track additional data), you have to log in and log out every time you want to test whether your JavaScript code is firing your Google Analytics code properly.

Yes, that’s a bit tedious, but I think it’s small price to pay for better data consistency.

Note:  If you are running a multi-user blog, you might consider using the is_admin() conditional tag instead of is_logged_in(), especially if you want to understand how the non-Admin authors are interacting with your blog.  The possibilities are endless!


Removing "Powered by WordPress" in Twenty Eleven

So far in the child theme tutorials for the WordPress Twenty Eleven theme, we’ve created a custom CSS file and custom header.  Now, let’s add a custom footer and remove “Powered by WordPress”.

The first step to having a custom footer for your Twenty Eleven child theme is to copy the footer.php file from the parent Twenty Eleven theme into your directory.  You will find this file on your server here:

/wp-content/themes/twentyeleven

Once you have copied this file over to your Twenty Eleven child theme folder (for me the location on my server is /wp-content/themes/twentyeleven-child), you are done!  You have a custom footer file…but on your blog, everything will look the same.  That’s because while you technically have created a new footer for your blog, no code has actually changed. We’ll fix that in the next section.

Powered by WordPress!  Woo-hoo!

I can’t fault WordPress for wanting to drive traffic to their website, especially given they provide the Twenty Eleven theme for free.  But that doesn’t mean that “Powered by WordPress” in the footer doesn’t look goofy.  Luckily, it’s not too difficult to change.

Open up the header.php footer.php file from your child theme using your favorite text editor.  In this file, you’ll find the following code:

1
2
<?php do_action( 'twentyeleven_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>

All we need to do to remove “Powered by WordPress” is to comment out this code using HTML comment tag, like the following:

1
2
<!-- <?php do_action( 'twentyeleven_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a> -->

Once you hit save, you’re all set.  No more “Powered by WordPress”, no more text at all. Just a blank footer.

Of course, just because you don’t want “Powered by WordPress” in the footer doesn’t mean you don’t want any links in the footer.  If you want to add your own text/links, re-open your footer.php file and place your text in the same location as the code we just commented out.

For example, if I wanted to put “© Randy Zwitch - 2011” in the footer, I would place this text between the opening and closing div tags for “site generator”:

1
2
3
4
5
6
<div id="site-generator">
<!-- <?php do_action( 'twentyeleven_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a> -->

© Randy Zwitch - 2011
</div>

It’s as easy as that to have a custom footer message!  You can get even more tricky by widgets and ads and tag clouds…but there’s something to be said for a clean, sleek design.  So I’ll stop there 🙂


  • RSiteCatalyst Version 1.4.12 (and 1.4.11) Release Notes
  • Self-Service Adobe Analytics Data Feeds!
  • RSiteCatalyst Version 1.4.10 Release Notes
  • WordPress to Jekyll: A 30x Speedup
  • Bulk Downloading Adobe Analytics Data
  • Adobe Analytics Clickstream Data Feed: Calculations and Outlier Analysis
  • Adobe: Give Credit. You DID NOT Write RSiteCatalyst.
  • RSiteCatalyst Version 1.4.8 Release Notes
  • Adobe Analytics Clickstream Data Feed: Loading To Relational Database
  • Calling RSiteCatalyst From Python
  • RSiteCatalyst Version 1.4.7 (and 1.4.6.) Release Notes
  • RSiteCatalyst Version 1.4.5 Release Notes
  • Getting Started: Adobe Analytics Clickstream Data Feed
  • RSiteCatalyst Version 1.4.4 Release Notes
  • RSiteCatalyst Version 1.4.3 Release Notes
  • RSiteCatalyst Version 1.4.2 Release Notes
  • Destroy Your Data Using Excel With This One Weird Trick!
  • RSiteCatalyst Version 1.4.1 Release Notes
  • Visualizing Website Pathing With Sankey Charts
  • Visualizing Website Structure With Network Graphs
  • RSiteCatalyst Version 1.4 Release Notes
  • Maybe I Don't Really Know R After All
  • Building JSON in R: Three Methods
  • Real-time Reporting with the Adobe Analytics API
  • RSiteCatalyst Version 1.3 Release Notes
  • Adobe Analytics Implementation Documentation in 60 Seconds
  • RSiteCatalyst Version 1.2 Release Notes
  • Clustering Search Keywords Using K-Means Clustering
  • RSiteCatalyst Version 1.1 Release Notes
  • Anomaly Detection Using The Adobe Analytics API
  • (not provided): Using R and the Google Analytics API
  • My Top 20 Least Useful Omniture Reports
  • For Maximum User Understanding, Customize the SiteCatalyst Menu
  • Effect Of Modified Bounce Rate In Google Analytics
  • Adobe Discover 3: First Impressions
  • Using Omniture SiteCatalyst Target Report To Calculate YOY growth
  • Google Analytics Individual Qualification (IQ) - Passed!
  • Google Analytics SEO reports: Not Ready For Primetime?
  • An Afternoon With Edward Tufte
  • Google Analytics Custom Variables: A Page-Level Example
  • Xchange 2011: Think Tank and Harbor Cruise
  • Google Analytics for WordPress: Two Methods
  • WordPress Stats or Google Analytics? Yes!
  • Building a Data Science Workstation (2017)
  • JuliaCon 2015: Everyday Analytics and Visualization (video)
  • Vega.jl, Rebooted
  • Sessionizing Log Data Using data.table [Follow-up #2]
  • Sessionizing Log Data Using dplyr [Follow-up]
  • Sessionizing Log Data Using SQL
  • Review: Data Science at the Command Line
  • Introducing Twitter.jl
  • Code Refactoring Using Metaprogramming
  • Evaluating BreakoutDetection
  • Creating A Stacked Bar Chart in Seaborn
  • Visualizing Analytics Languages With VennEuler.jl
  • String Interpolation for Fun and Profit
  • Using Julia As A "Glue" Language
  • Five Hard-Won Lessons Using Hive
  • Using SQL Workbench with Apache Hive
  • Getting Started With Hadoop, Final: Analysis Using Hive & Pig
  • Quickly Create Dummy Variables in a Data Frame
  • Using Amazon EC2 with IPython Notebook
  • Adding Line Numbers in IPython/Jupyter Notebooks
  • Fun With Just-In-Time Compiling: Julia, Python, R and pqR
  • Getting Started Using Hadoop, Part 4: Creating Tables With Hive
  • Tabular Data I/O in Julia
  • Hadoop Streaming with Amazon Elastic MapReduce, Python and mrjob
  • A Beginner's Look at Julia
  • Getting Started Using Hadoop, Part 3: Loading Data
  • Innovation Will Never Be At The Push Of A Button
  • Getting Started Using Hadoop, Part 2: Building a Cluster
  • Getting Started Using Hadoop, Part 1: Intro
  • Instructions for Installing & Using R on Amazon EC2
  • Video: SQL Queries in R using sqldf
  • Video: Overlay Histogram in R (Normal, Density, Another Series)
  • Video: R, RStudio, Rcmdr & rattle
  • Getting Started Using R, Part 2: Rcmdr
  • Getting Started Using R, Part 1: RStudio
  • Learning R Has Really Made Me Appreciate SAS