Add Social Icons in Header in Thesis

Posted by Mayank on July 4, 2011 in How To

Post image for Add Social Icons in Header in Thesis

In the post made a few days back, we discussed how to add social icons in Thesis sidebar. Social media icons are known to improve your website’s popularity and make it more interactive. I’m also experimenting with social media icons and this time, I’m trying to see the usefulness of having the social media icons placed in the right hand side of the header.  Have a look at the image below of this website :

social icons in header in thesis

Adding the social icons in header in Thesis takes a little more effort than adding it to the sidebar. None the less, it is quite easy and straight forward.

1. Go to the Resources Section to get FREE Social Icons.

2. Select, unzip and upload the social media icons you’d like to have. You can upload them using FileZilla or any other FTP utility or you can upload them via Dashboard -> Media -> Add New.

3. Take a note of the path where the file is saved. Also, the download pack contains images in different sizes and you may need to scale them appropriately as per your need.

4. Copy and paste the below code into custom_functions.php file to create your new header widget area

/* -------------Start Code to Add Social Icon in Thesis Header---------------------------- */
register_sidebars(1,
    array(
        'name' => 'Header Widget',
        'before_widget' => '<li id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    )
);
function header_widget() { ?>
	<div id="header_widget_1">
		<ul>
			<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget') ){	?>
				<li><h3><?php _e('Header Widget', 'thesis'); ?></h3>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</li><?php } ?>
		</ul>
	</div>
<?php }
add_action('thesis_hook_header', 'header_widget', '1');
/* -------------End Code to Add Social Icon in Thesis Header---------------------------- */

5. Add the below code in custom.css file

/* -------------Start Code to Add Social Icon in Thesis Header---------------------------- */
.custom .sidebar ul.sidebar_list {position: relative;}
.custom #header_widget_1 ul.sidebar_list li.widget {
	position: absolute;
	display: block;
	top:10px;
	left:470px;
	width:468px;
	}
.custom #social-icons a img { float:right; }

/* -------------End Code to Add Social Icon in Thesis Header---------------------------- */

6. If you head over to the Widgets section, you will notice a new header widget. Add a text box in it with the following code, leaving the “Title” blank.

<div id="social-icons">

<a href="YOUR-FEED-URL"><img src="FEED-IMAGE-URL" width="32" height="32" alt="RSS" /></a>

<a href="YOUR-FACEBOOK-PAGE-URL"><img src="FACEBOOK-IMAGE-URL" width="32" height="32" alt="Facebook" /></a>

<a href="YOUR-TWITTER-URL"><img src="TWITTER-IMAGE-URL" width="32" height="32" alt="Twitter" /></a>

</div>

You can modify the code as per the social icon you wish to have in your website.
Let me know if you have any doubts.

Related Posts Plugin for WordPress, Blogger...

{ 2 comments }

1 Marla August 25, 2011 at 8:46 am

Thanks for this! I’ve tried to do this with other tutorials, but this is first one that’s worked for me.

I just want to add that I had to add the following CSS rule to remove Thesis’ standard bullet:

.custom #header ul li {list-style-type:none;}

Thanks again!

2 Apurva August 25, 2011 at 10:11 am

Nice to hear that it helped 🙂

Comments on this entry are closed.