Adding Google’s +1 Button To genesis

by ryan

Genesis Framework — Adding Google’s +1 Button


So, you want to add Google’s new +1 but­ton to your Gen­e­sis Frame­work pow­ered Word­Press site? No prob­lem, it’s an easy process to get it to show on any page you’d like.

Genesis Framework Google +1 Button

The exam­ple below will illus­trate how I’ve added +1 but­tons onto my own per­sonal site, along with instruc­tions for a few other cases where you may want to use the button.

Full tuto­r­ial below the jump.

To start with, you’ll need to get the script from Google, and iden­tify what kind of but­ton you want to add. Head on over to Google’s ded­i­cated +1 but­ton page and have a look at the dif­fer­ent but­ton styles. Do you want a tall one or a small one? Do you want to show the count or just the but­ton? These deci­sions will effect how the but­ton looks on your page, so it’s worth spend­ing a bit of time to think about the best but­ton style to use. Remem­ber, you can always change the but­ton if you don’t like it, or if it’s not per­form­ing well for you.


To start with, you’ll need to add the script below to your site.

This can be added in your site’s head, or just before the clos­ing body tag. If you want to know how to add this script to your site, please read my tuto­r­ial on Gen­e­sis Frame­work — Adding a Con­di­tional Script.

Your ads will be inserted here by

Easy AdSense.


Please go to the plu­gin admin page to
Paste your ad code OR
Sup­press this ad slot OR
Sup­press Place­ment Boxes.

With the script in place, you can now add the but­ton to your site.

I wanted the but­ton to show on my main blog page, along with the indi­vid­ual post page. To do this, I added the fol­low­ing to my functions.php file.

add_action(‘genesis_post_title’, ‘jacques_plus_one’);
function jacques_plus_one()
if ( is_page() )
return; // don’t show +1 on pages


Decon­struct­ing that, what I’m doing is cre­at­ing a new action, called “jacques_plus_one”. This new action is being hooked onto the “genesis_post_title” hook, after the title has already been out­put. The but­ton is then told that if it’s cur­rently on a page, don’t show the but­ton, oth­er­wise show it.

You’ll also notice that I’ve added a cus­tom href attribute to the but­ton, which means that the cor­rect post link is being added to the but­ton. If that was removed, the but­ton would default to being for the cur­rent page it’s being dis­played on. Use­ful if you’re only show­ing it on sin­gle post tem­plates, not so use­ful when you want to show it on an archive or a main blog page.

Finally, you’ll want to apply some styling to the but­ton to get it to dis­play exactly as you want to. I’ve added my but­ton inside a div with a class of “plu­sone”, which allows me to style it in my stylesheet. I’ve used the style below, but you can do what­ever you want with it.

.plusone {
margin:-50px 0;

You can see a screen­shot of the final prod­uct below:


I hope that’s helped. If you’ve got any ques­tions or sug­ges­tions about this par­tic­u­lar tuto­r­ial, please feel free to leave a com­ment below.

Previous post:

Next post: