The tutorial below is a quick and easy guide to adding a fancy box containing links to all of your social media profiles.
Step 1 – Open your custom_functions.php file and add the following. Make sure to adjust the links to the correct social media profiles, and don’t forget to change the name!
// Social Media Links Function
function social_media_links(){
?>
<div>
<ul>
<li><a id="twitter" href="http://twitter.com/##YOURUSERNAME##">
<span>adam barber</span>
<span>on twitter</span>
</a>
</li>
<li><a id="facebook" href="http://facebook.com/##YOURUSERNAME##">
<span>adam barber</span>
<span>on facebook</span>
</a>
</li>
<li><a id="linkedin" href="http://linkedin.com/##YOURUSERNAME##">
<span>adam barber</span>
<span>on linkedin</span>
</a>
</li>
<li><a id="rss" href="##YOURRSSFEED##">
<span>adam barber</span>
<span>rss feed</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');Step 2 – Open your custom.css stylesheet and add the following. Look over the comments and make adjustments to fit your style, including regular and hover background colors, and the links to your icon images.
/* 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: -18px 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 5px 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.name{ font-size: 2em; display: block; } div.socialmedia_sidebar span.service{ 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('##PATHTOTWITTERICON##') 5px 5px no-repeat; height: 35px; text-indent: 35px;} #facebook{ background: #FEF9BF url('##PATHTOFACEBOOKICON##') 5px 5px no-repeat; height: 35px; text-indent: 45px;} #linkedin{ background: #FEF9BF url('##PATHTOLINKEDINICON##') 5px 5px no-repeat; height: 35px; text-indent: 40px;} #rss{ background: #FEF9BF url('##PATHTORSSICON##') 5px 5px no-repeat; height: 35px; text-indent: 45px;} /* Hover profile links */ #twitter:hover{ background: #999 url('##PATHTOTWITTERICON##') 5px 5px no-repeat} #facebook:hover{ background: #999 url('##PATHTOFACEBOOKICON##') 5px 5px no-repeat} #linkedin:hover{ background: #999 url('##PATHTOLINKEDINICON##') 5px 5px no-repeat} #rss:hover{ background: #999 url('##PATHTORSSICON##') 5px 5px no-repeat}
Step 3 – This is how it will looks when done.
Thesis Social Media Links
Update
Check out Jhay Rocas’ updated tutorial. He fixed a couple of my original bugs and included a more up-to-date set of CSS styles.
{ 8 comments… read them below or add one }
I don´t get this to work. The Styles from the custom css File don´t work. Is there an error in the code above?
Can you be more specific?
Hi, I followed the instructions and got nothing. Here is what I entered below. Can you tell me what I did wrong?
Tammy
(entered into Thesis Custom Programming section)
// Social Media Links Function
function social_media_links(){
?>
The Fly On The Wall
on twitter
The Fly On The Wall
rss feed
<?php
}
// Add the function to the proper hook
add_action('thesis_hook_after_multimedia_box', 'social_media_links');
(entered into Thesis Custom Styling area)
/* 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: -18px 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 5px 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.name{
font-size: 2em;
display: block;
}
div.socialmedia_sidebar span.service{
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('##PATHTOTWITTERICON##') 5px 5px no-repeat; height: 35px; text-indent: 35px;}
#rss{ background: #FEF9BF url('##PATHTORSSICON##') 5px 5px no-repeat; height: 35px; text-indent: 45px;}
/* Hover profile links */
#twitter:hover{ background: #999 url('##PATHTOTWITTERICON##') 5px 5px no-repeat}
#rss:hover{ background: #999 url('##PATHTORSSICON##') 5px 5px no-repeat}
Did you get my post here last night? If not does that mean I cannot post code here?
I followed instructions and it has done nothing. No errors, no social media stuff
Let me know how to get the code I posted to you to see what I did wrong?
Tam
Nice code. The opening div is missing the class which is why it isn’t working for Kasher. should be replaced with
This is not working well with me. please take a look on my website. it shown badly. The table not shown properly… can you give me help what’s wrong here. Thank u before
Not working for me either. Suggestions anyone?
I got this working on my blog.
Wrote a tutorial with the fixed codes.
{ 1 trackback }