Add Social Media Links to your Thesis Sidebar

When I got my copy of the Thesis WordPress Theme, one of the design elements I wanted was to have a proper box in the sidebar where readers can easily subscribe to this blog’s feeds and connect with me via social networking sites.

Upon knowing that Thesis is backed up by wonderful support from DIYThemes and the community of Thesis users, I was confident the ‘social media links‘ box would up and running within a day or two of switching to Thesis. Turns out that this is not 100% true as some of the tutorials listed in the support forums are either outdated or have been taken down by their creators who have probably moved on to other projects or themes.

As many of you have noticed, that social media links box has made its appearance just today. The delay was caused by my entry-level CSS and PHP coding skills but ultimately a tutorial listed as a must-see resource for customizing Thesis, but has been left with a broken code which has rendered it unusable for ordinary Thesis users like yours truly.

That tutorial is “Adding Social Media Links to Thesis” by Adam Barber. It’s over a year old and the blog itself which hosts the tutorial has been left idle for a long time now. Which was frustrating because his tutorial was exactly what I needed.

My obsession for getting a social media links box for my blog and my penchant for messing around with PHP and CSS has pushed me to troubleshoot the code and make it work. After spending some three hours on it, I now share a ‘fixed’ code from the tutorial which I then customized according to my own preferences.

Note: The following steps and code were heavily based on Adam Barber’s original tutorial, so all credits are directed at him.

Step 1.

The code below goes into your custom_functions.php file. Added were the missing opening div class selector. Don’t forget to put in the correct links to your RSS feeds or social media profiles.

[php]
// Social Media Links Function

function social_media_links(){
?>
<div class="socialmedia_sidebar">
<ul>
<li><a id="rss" href=http://feeds.feedburner.com/TheFour-eyedJournal">
<span>Recieve updates</span>
<span>via rss feed</span>
</a>
</li>

<li><a id="email" href="http://feedburner.google.com/fb/a/mailverify?uri=TheFour-eyedJournal&loc=en_US">
<span>Subscribe</span>
<span>via Email</span>
</a>
</li>

<li><a id="twitter" href="http://twitter.com/jhayrocas">
<span>@jhayrocas</span>
<span>on twitter</span>
</a>
</li>

<li><a id="facebook" href="http://facebook.com/JuliusRocas">
<span>Julius Rocas</span>
<span>on facebook</span>
</a>
</li>
</ul>

<div></div>

</div>
<?php
}

// Add the function to the proper hook
add_action(‘thesis_hook_after_multimedia_box’, ‘social_media_links’);[/php]

Step 2.

The code below goes into your custom.css stylesheet. I’ve made adjustments suited for this blog and have removed the hover effects. Also, the span selector had been fixed to match the code above for styling the links.

[css autolinks=”false”]
/* Define the clear div to offset the link floats */
div.clear{ clear: both; height: 1px; width: 1px; }

/* This is the style for the container */
div.socialmedia_sidebar { background: #eee; margin: -20px 0 5px 0;
/* If you are using this below the media box,
use a negative top margin to raise it up. If not, adjust accordingly */
padding: 5px 0 118px 10px; border-top: 1px dashed black; border-bottom: 1px dashed black; }

div.socialmedia_sidebar ul li{ float: left; list-style: none; text-align: center; }

div.socialmedia_sidebar span{ font-size: 1.7em; display: block; }

div.socialmedia_sidebar span{ font-style: italic; }

div.socialmedia_sidebar ul li a{ width: 200px; padding: 5px; display: block; border: 1px solid #fff; }

/* Non-hover profile links */
#twitter{ background: #FEF9BF url(‘images/twitter-48.png’) 5px 5px no-repeat; height: 44px; text-indent: 35px;}
#facebook{ background: #FEF9BF url(‘images/facebook-48.png’) 5px 5px no-repeat; height: 44px; text-indent: 45px;}
#email{ background: #FEF9BF url(‘images/email-48.png’) 5px 5px no-repeat; height: 44px; text-indent: 40px;}
#rss{ background: #FEF9BF url(‘images/rss-48.png’) 5px 5px no-repeat; height: 44px; text-indent: 45px;}
[/css]

The end result is what can now be seen on the sidebar of this blog underneath the multimedia box. Icons used came from the social media icon pack by Kadom, which is available as a free download. Except for the Email icon which I had to create myself using a PSD template that is included in the same icon pack.

Tools used were gedit, because I’m using Ubuntu, and Firebug extension for Firefox. Hope this will be of good use to my fellow Thesis users and if you’re not using Thesis yet, I suggest you do. This neat customization and many others will soon be available to make your blog top-notch.

Have anything to add?

Loading Facebook Comments ...
Loading Disqus Comments ...

6 thoughts on “Add Social Media Links to your Thesis Sidebar

    • Hi Leslie. You can add the icons or buttons via the CSS code included in the post. A sample line would be:

      You just have to replace ‘twitter-48.png’ with the file name of the icon you’re going to use. Hope this helps.

    • I’m glad to be of help. Still, it’s you whom I should really be thanking, if it were not for your tutorial this wouldn’t have been possible. All the best!

Have anything to add?

Read previous post:
Adopting the 30-30 Minute Work Cycle

In my quest to become more productive, I have decided to adopt the 30/30 minute work cycle. It is a...

Close