How to add extra share buttons

A few users were asking how to add a Google Plus button to the share buttons that appear at the bottom of posts and pages in our recent themes. Well, actually our framework lets you add any buttons you like, if you have the code. So this is how to do it.

A Google + Button as an example

Google plus buttonThis is in response to Kam’s question who asked if this code could be used to add a Google plus button to the Pure theme. (It will also work in Xi and any future framework themes).

The key to this is that with our framework themes you can use the livingos_share_btns action hook to add aditional HTML below the existing buttons.

Use the livingos_share_btns Action Hook

To add our Google+ button we first add a function and action hook to the functions.php file of our child theme.

function livingos_google_plusone() {
		echo '<div class="plusone"><g:plusone size="tall" href="'.get_permalink().'"></g:plusone></div>';


This simply adds the HTML placeholder for the button and adds the function to the action hook. You could add any other buttons here the same way. Even just a simple image based button could go here if you wanted.

Add External Javascript libraries in the usual way

The Google+ button requires some javasrcipt too, which can be loaded into the theme using the standard WordPress wp_enqueue_script method. This code should also be placed in your functions.php file.

function livingos_google_plusone_script() {
	wp_enqueue_script('google-plusone', '', array(), null);

add_action ('wp_enqueue_scripts','livingos_google_plusone_script');

That’s it you should now have something that looks like this sitting at the bottom of each post.

What if you wanted to replace all existing buttons?

To replace the buttons entirely you could also just redefine the function livingos_share_btns() in your child theme instead.

So for example if you wanted to dump twitter and facebook and just add the Google+ button you could just add this instead of the action hook above.

function livingos_share_btns(){
	echo '<div class="share-btns">';
	echo '<div class="plusone"><g:plusone size="tall" href="'.get_permalink().'"></g:plusone></div>';
	echo '<div>';

This simply overrides the existing code for display buttons and replaces it with our Google+ button. Like so..

Google plus button


Of course having done all this it is highly likely that we will just add this to the core code anyway, since Google+ buttons are all the rage. But at least you know now how to add any future buttons that may be needed.

And since you are looking at child of the Pure theme, you can now plusone this post below!!

One thought on “How to add extra share buttons

Leave a Reply

Your email address will not be published. Required fields are marked *