This is tutorial 7 in the Thesis tutorials in the blog. We looked at adding the Facebook “Like Button” in the previous tutorial, and in this tutorial we look at adding the “sharethis” button in the posts. Since we are following the previous styling, it will be useful if you look through the previous tutorial in order to understand what kind of styling was done there.

Sections -

1. Installing the plug-in inside wordpress

2. Creating a function to display the button or series of buttons

3. Styling the button

Lets  jump right in!

 

1. Installing the plug-in inside wordpress

a. Open your wordpress dashboard and click on plugins

b. The button on top right says “Install Plugins” -> Click it

c. Search option is selected by default, type in “ShareThis”

d. Install the plugin and activate it.

e. The setting for “ShareThis” is now available under the “SETTINGS” menu in the dashboard. Click it!

f. Now you can choose the look of the button

2. Creating a function to display the button or series of buttons


function show_sharethis() {
echo "

";
echo "

";
}


add_filter('thesis_hook_after_post', 'show_sharethis');


 

Explanation: A div called “series-of-social-buttons” is created which actually stores the “ShareThis” button inside of it.  “sharethis_button()” is a function which displays the button.

 

Note: A div with style “clear:both” is created – which implies that this div will clear the floats. We are talking about 2 different floats here. In the previous tutorial we learnt how to add the Facebook “Like Button” and this button has a left float, while the ShareThis button has a right float. We are clearing the floats because we have 2 floats inside the post and this break the bottom portion of the post, i.e. the complete height of the post is not shown.

 

You can try to remove this code and check out what happens to understand what I mean.

 

3. Styling the button

#series-of-social-buttons {
float: right;
margin-top: 50px;
margin-right: -45px;
}


Explanation : We define the div “series-of-social-buttons as having a right float. We also give it top margin and a negative right margin to make it appear closer to the edge of the post.

 

 

Hope you enjoyed this tutorial!! If you have any questions at all – feel free to post it in the comments and I’ll get back to you!

 

Check out the other Thesis tutorials in this website -

Thesis tutorial part 1 : installation of the Thesis theme

Thesis tutorial part 2 : learning about customizing

Thesis tutorial part 3 : HOOKS + custom function (Footer Text)

Thesis tutorials part 4 : custom footer + CSS styling

Thesis tutorial Part 5: adding different ribbons in blog post

Thesis : how to change the excerpt size for teasers