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 :

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.

Tagged as: Social, Thesis