How to Add Social Media Icons in Thesis Theme

Simple guide that helps to add Social Media Icons to Thesis Theme sidebar without using any plugin. Here is the code that helps to display social media profiles in sidebar of thesis theme. Simply add this code to text widget and icons will be live on your blog.

At WPSquare you can find some great tutorials on customizing thesis theme and here is another cool tut, that helps to display simple and elegant social media icons in the sidebar. This widget will be included in our upcoming free thesis skin and meanwhile follow these steps to add it to your blog.

Check Add Social Media Icons to Sidebar of your Blog

Add Social Media Icons in Thesis Theme Sidebar

This code include simple HTML to display social profile links. Proper care has been taken to protect your blog interms of SEO, hence “nofollow” tag is added to all the links. By default, when someone clicks on them, they will be opened in new tab.

• Go to Thesis Theme Menu > Custom File Editor.
• Open custom_functions.php file and add below code it.
• Click on save button and links will be live on your blog.
• Style them by adding some CSS, by following steps below.

function social_links(){?>
<div id="social-links">
<h3>Social Profiles</h3>
<ul>
<li class="facebook"><a href="#" title="Facebook FanPage" target="_blank" rel="nofollow">Facebook</a></li>
<li class="twitter"><a href="#" title="Twitter Profile" target="_blank" rel="nofollow">Twitter</a></li>
<li class="googleplus"><a href="#" title="GOoglePlus" target="_blank" rel="nofollow">GooglePlus</a></li>
<li class="rss"><a href="#" title="RSS" target="_blank" rel="nofollow">Rss</a></li>
<li class="youtube"><a href="#" title="Youtube Channel" target="_blank" rel="nofollow">Youtube</a></li>
</ul>
</div>
<?php }
add_action('thesis_hook_before_sidebar_1', 'social_profiles');

You need to replace default ‘#” tag with your profile links, before saving the file. Also, you can add other social media profiles in the similar manner.

You will like Add Floating Lazy Load Social Share Buttons in WordPress

Add Social Media Icons Using Widget Section

This is more easy to follow method, simple add below code to a text widget in “Sidebar Widget Section” of your thesis theme. You can find “Widgets” section under “Appearance” menu in your WordPress Dashboard.

<div id="social-links">
<h3>Social Profiles</h3>
<ul>
<li class="facebook"><a href="#" title="Facebook FanPage" target="_blank" rel="nofollow">Facebook</a></li>
<li class="twitter"><a href="#" title="Twitter Profile" target="_blank" rel="nofollow">Twitter</a></li>
<li class="googleplus"><a href="#" title="GOoglePlus" target="_blank" rel="nofollow">GooglePlus</a></li>
<li class="rss"><a href="#" title="RSS" target="_blank" rel="nofollow">Rss</a></li>
<li class="youtube"><a href="#" title="Youtube Channel" target="_blank" rel="nofollow">Youtube</a></li>
</ul>
</div>

The only difference between above and this code is, the function and action hooks are removed. You can display these sleek social icons in footer also.

Read Display Facebook, Twitter and RSS Counts in Plain Text

 CSS for Social Media Icons in Thesis Theme

The most important part is to style the links using some CSS and icons. Clean and perfect hover effect has been added to make these icons more attractive.

Download Social Media Icons

Here are some pretty cool Square Social Icons which you can use on your blog. Save and upload them onto your theme directory /images/ folder.

If you need further large icons, you can find them free and the only thing you need to do is, just tweak the CSS properties height, width, margin and padding to properly accommodate them.

Open custom.css file using Custom File Editor and below code to it.

/** Start of CSS for Social Links */
#social-links {
float: left;
}
#social-links ul{
list-style:none;
float: left;
margin: 0 5px 20px;
}
#social-links ul li {
float: left;
}
#social-links ul li a{
display: block;
float: left;
height: 32px;
margin: 0 12px 0;
text-indent: -999em;
width: 32px;
}
#social-links a.facebook{
background :url("images/facebook.png") no-repeat scroll 0 0 transparent;
}
#social-links a.facebook:hover {
background :url("images/facebook_hover.png") no-repeat scroll 0 0 transparent;
}
#social-links a.twitter{
background :url("images/twitter.png") no-repeat scroll 0 0 transparent;
}
#social-links a.twitter:hover {
background :url("images/twitter_hover.png") no-repeat scroll 0 0 transparent;
}
#social-links a.googleplus{
background :url("images/googleplus.png") no-repeat scroll 0 0 transparent;
}
#social-links a.googleplus:hover {
background :url("images/googleplus_hover.png") no-repeat scroll 0 0 transparent;
}
#social-links a.rss{
background :url("images/rss.png") no-repeat scroll 0 0 transparent;
}
#social-links a.rss:hover {
background :url("images/rss_hover.png") no-repeat scroll 0 0 transparent;
}
#social-links a.youtube{
background :url("images/youtube.png") no-repeat scroll 0 0 transparent;
}
#social-links a.youtube:hover {
background :url("images/youtube_hover.png") no-repeat scroll 0 0 transparent;
}
/** End of CSS for Social Links */

You can modify any part of this CSS code to make those icons look perfect.

Finally, these cool Social Media Icons will be live on your blog and hope you like them. If you need any further help in adding them to your blog, drop a comment here.