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

    by  • September 13, 2011 • Documentation • 8 Comments

    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>
      	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";
    	<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>
    add_action('pw_single_post_bottom', 'share_buts');

    That’s it! You will want to add some CSS to make it pretty and align it to your themes design.


    Founder of PressWork and Senior Designer/Evangelist


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

    1. Pingback: How to add Twitter, Facebook, and Google+ to your PressWork … | Twitter

    2. tiziao
      September 18, 2011 at 11:47 am

      Hy digibomb,

      the code get this message:

      Parse error: syntax error, unexpected ‘}’ in /home/mrttgne1/public_html/blog/wp-content/themes/presswork-child/actions.php on line 21


    3. November 25, 2011 at 7:49 pm

      It works like a charm in one of my other WordPress sites. But somehow on one of my client sites, this toolbox appears but Presswork isn’t working…

    4. December 1, 2011 at 7:14 pm

      I am going to try this, along with all the other plugins designed to work with Press Work. I will need to refresh my memory about creating a child theme but at least I know where to come back to when I need to do so.

    5. February 23, 2012 at 9:05 am

      Hi Digibomb,

      First and foremost a very big “Thank you” for the fantastic framework. I had it up and running in a day with my own child theme (I didn’t even know what a child theme was before I started fiddling with PressWork”). So, thank you once more.

      Now to the point of this post: did you notice that the Facebook share button is not displayed here? The same happens with me and I’m a bit at a loss how to solve this. Any ideas?

    6. agus_sintang
      May 26, 2012 at 8:53 am

      i’ve finished input your code to my wp, hehe, but my result “not straight”, http://maarif-sintang.org/ebook-belajar-linux/ . please i need your help…

      • June 2, 2012 at 3:49 pm

        sorry i’ve changed my web theme, he2, because not my personal website. But till now, your theme is nice, hehe,

    7. July 11, 2012 at 11:39 pm

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

    Leave a Reply

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