How to add Twitter, Facebook, and Google+ to your PressWork theme

Unless you’ve been living under rock, you know how important it is to add share buttons to your blog or site to generate more traffic and help build a community around your brand, product, or point of view.

There are many plugins and widgets for WordPress that will add various share buttons, but adding a plugin or widget is not always the answer. It’s very easy, using PressWork, to add Twitter, Facebook, and Google+ to you theme with a few simple lines of code that take advantage of PressWork’s powerful custom actions.

I highly recommend that you read these docs to understand the first steps you need to take:

Custom CSS and Custom Actions
Creating a Child Theme for PressWork

Using the Toolbox

One of the things that makes PressWork so powerful is it’s front-end editor, the Toolbox. With the Toolbox you can quickly and easily customize your site in minutes without using any code. However, if you’re a developer or have a basic understanding of WordPress theming, the Toolbox offers a bunch or really powerful features like Hooks and Functions.

To help us add our share buttons we’re going to take advantage of the Hooks feature located in the first panel of the Toolbox “Settings”. Under Settings you can turn Hooks on. This will display guides that show you all the different actions you can hook into.

With Hooks turned on let’s take a look at a single post page.

So, if want to add the share buttons to the bottom of each post we need to hook into pw_single_post_bottom.

Adding the code

Add the following code to your child theme’s actions.php file or your custom-actions.php file:

function share_buts(){
	?>
	<!-- twitter -->
	<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="PressWorkWP">Tweet</a>
	<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 
	<!-- Facebook --> 
	<div id="fb-root"></div>
	<script>(function(d){
  	var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  	js = d.createElement('script'); js.id = id; js.async = true;
  	js.src = "//connect.facebook.net/en_US/all.js#appId=247399835302459&xfbml=1";
  	d.getElementsByTagName('head')[0].appendChild(js);
	}(document));</script>
	<div class="fb-like" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
 
	<!-- googleplus -->
	<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
	<g:plusone size="standard" href="<?php the_permalink(); ?>"></g:plusone>
	<?php
}
add_action('pw_single_post_bottom', 'share_buts');