How to Add Social Bookmarking Icons in widgetized Header of Thesis Theme

In this video tutorial deals about how to add social bookmarking icons in header section. Also tells about how to create widget in header. Once you created the header widget. It will available at the right sidebar of the wordpress admin dashboard. By using this header widget we can place banner ads, social book marking icons, search box, google translator and you can add what ever you want.

This header widget is similar to sidebar widgets. Normally thesis theme header contains logo and title tagging line. Now I am going to create header widget in right side of the header area. If you want to place banner ad you can use width as 468px. By using the particular hook we can place exact location where you need header widget.


How to create widget in header section

In this post I am going to explain how to create header widget and how to place social book marking icons in side the header widget. To create header widget for bookmarking icons just copy and paste the following code in custom_functions.php.

/*** HEADER AD WIDGET***/
register_sidebars(1,
array(
'name' => 'HeaderAd',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
function header_widget() { ?>
<div id="header_widget_1">
<ul class="sidebar_list">
<?php thesis_default_widget(3); ?>
</ul>
</div>
<?php }

add_action('thesis_hook_header', 'header_widget', '1');
/***  HEADER WIDGET END***/

To place the code in this file use ftp software.

The path is public_html/fourblogger.com/wp-content/themes/thesis_16/custom/custom_function.php.

Once you pasted the above code, Copy and paste the following code in custom.css file.

/***HEADER AD WIDGET***/
.custom #header_area .page {background: none;}
.custom #header_widget_1 {float:right; padding:3em;}
.custom #header_widget_1 ul.sidebar_list li.widget {position:absolute; display: block;  left:459px; width:468px; }

/***HEADER END***/

The above code you can change width, position of the icons.

To paste the aboe code. Login your wordpress admin. Select custom file editor under thesis options. then place the code in custom.css file and save it.

Ok. now you have created your header widget. To see this goto wordpress admin. Select ‘widgets’ under appearance tab.

Right sidebar we are having three widgets sidebar1, sidebar2, and  header_ad.

Add social book marking icons in header widget.

Once you added the above codes you need to upload your bookmark icon images in side the …themes/thesis_16/custom/images folder by using ftp.

Now we are having header_ad widget. Drag and drop text box inside the header_ad.

Inside the text box if you wand you can give title otherwise leave it. Inside the discribtion area you have to place the following book marking icon link code.

<a rel="nofollow" href="http://www.youtube.com/user/fourblogger">
<img src="http://fourblogger.com/wp-content/uploads/2009/12/Youtube-icon.png"
border="0" alt="" /></a>&nbsp; <a rel="nofollow" href="http://twitter.com/fourblogger">
<img src="http://fourblogger.com/wp-content/uploads/2009/12/Twitter.png" border="0"
alt="" /></a>&nbsp; <a rel="nofollow"
href="http://www.facebook.com/people/Pascal-Sundhar/100000574445431">
<img src="http://fourblogger.com/wp-content/uploads/2009/12/FaceBook.png"
border="0" alt="" /></a>&nbsp; <a href="http://feeds.feedburner.com/fourblogger">
<img src="http://fourblogger.com/wp-content/uploads/2009/12/Feed.png"
border="0" alt="" /></a>

The above code you should replace your image uploaded path and your social media link.

Then save it now check your site with header widget having bookmatking icons. Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 45 comments… add one }

Leave a Comment

  • aaslin January 9, 2010, 1:54 AM

    thanks suresh.K,I WAS THE ONE WHO REQUESTED FOR THIS POST…..IM VERY HAPPY TO SEE THAT YOU HAVE RESPONDED QUICKLY

    Reply
    • Pascal January 9, 2010, 9:25 AM

      Thanks Aaslin. Your questions encourage us to produce more thesis content.

      Reply
  • aaslin January 9, 2010, 1:56 AM

    I Have another doubt!! in my blog sensehow.com….there is no reply option as you have here on fourblogger for individual comments,how to add this?

    Reply
    • Pascal January 9, 2010, 9:29 AM

      Just go to discussion under settings tab in Wordpress dashboard. Check the box for”Enable threaded (nested) comments levels deep” option under “other Comment settings”. By this you can show reply link (button) in all comments.

      Reply
      • aaslin January 9, 2010, 10:21 PM

        thanks for your reply

        Reply
  • Destiny Islands January 9, 2010, 11:06 PM

    Wow I am seeing Thesis everywhere these days! I have to say I am a huge fan of the theme, although I don’t currently use it I may have to adapt in a month or two when I launch my new blog.

    Reply
    • Pascal January 9, 2010, 11:23 PM

      Fine. When you buy thesis, i am ready to do free basic thesis customization for you, if you can buy it through our link.:)

      Reply
  • PVC stolarija Elatio January 10, 2010, 2:24 AM

    Nice tutorial :-)

    Reply
    • Pascal January 10, 2010, 9:35 AM

      Thanks Elatio.

      Reply
  • Lynch January 17, 2010, 12:31 PM

    Hi Pascal, thanks for the great article. I’m a total beginner with thesis and this is just what I need…

    one question …. there’s a small white dot outside the box…. what’s that? and how do I get rid of it?

    Reply
  • Tony M February 15, 2010, 5:52 PM

    Awesome tutorial again. I have been looking for a simplified way to do this and some of the instructions over on DIY forums were a bit confusing. At this point I’m not sure if I want to add these icons, but for future reference this will be useful.

    Reply
  • Gelatinous March 6, 2010, 3:56 PM

    Thanks for the tutorial. Would it be possible to use the above to add the search box within the widgitized area?

    I’ve tried without much luck so any help would be great!

    Reply
    • Suresh March 8, 2010, 7:06 PM

      hai,

      yes.. it is possible to add search box inside the header widget.. procedure is similar as adding search box in sidebar..you can also place google custom search box in side the header widget..

      Reply
  • Yiannis April 29, 2010, 6:00 PM

    hi mate

    i wanted to ask you which part of the code should i change to move the icons to the right of the banner instead of the left.

    thank you

    Reply
    • Suresh April 29, 2010, 7:27 PM

      hai yinnis,

      In your custom_functions.php file check the code for header widget add the code ul class="sidebar_list" instead of ul check the above post. This change is to remove the dot at the beginning of icons.

      second change is..
      remove all the custom.css code mentioned in the above post and add the below code in custom.css file
      .custom #header_widget_1 {float:right; }
      .custom #header_widget_1 .sidebar_list{padding:0em; }
      .custom #header_widget_1 a{padding:0 0.3em;}

      Reply
  • Yiannis April 30, 2010, 8:03 PM

    that didnt work for me mate. it moved the icons to the right but they became unclickable and also messed up the navigation menu

    Reply
    • Suresh April 30, 2010, 9:57 PM

      hai,

      One closing div missed in your header widget check it .. That why your logo comes into widget you site look like this..

      add close div in your header widget
      place the css code i gave in the previous comment do the same process i mentioned in previous comment..
      also increase the logo font size to 6em or nearby 5 em..

      If you have much space between icons remove padding 0.3em to 0 em i gave in previous comment.

      all icon links will work fine..

      Reply
  • Yiannis May 1, 2010, 7:17 PM

    ok because it didnt work or i am probably doing something wrong please see my code below

    CUSTOM CSS
    ——————-

    .custom #header_widget_1 {float:right; }
    .custom #header_widget_1 .sidebar_list{padding:0em; }
    .custom #header_widget_1 a{padding:0 0.3em;}

    That is all i have in custom css regarding the header widget

    Again this is all i have for custom functions

    i really dont know what to do

    thank you

    Reply
    • Suresh May 2, 2010, 9:51 AM

      hai,

      use http://pastebin.com to send the code. paste your code here get url and place it in comment..
      because php code not displayed in our comment section..

      also you are not added the codes what i am telling in the first comment..(class=”sidebar_list”)
      check closing div for header and header_widget_1. if any one missed it will happen like your problem..
      custom.css file ok… check only in custom functions.php

      Reply
  • Yiannis May 2, 2010, 3:14 PM

    I am sorry Suresh

    check this out
    http://pastebin.com/m9PuM2R5

    this is my custom functions

    Reply
    • Suresh May 2, 2010, 3:53 PM

      hai,

      I think you have added both header logo code and social book mark icons code inside the single header widget..
      If so just remove the logo code from that widget.. only use social book marking code..

      i corrected the the code you send via paste bin now the dot will removed http://pastebin.com/E6FAvZSp
      for adding header logo use custom.css file..

      Reply
  • Yiannis May 2, 2010, 11:17 PM

    ok thank you for your help

    when you say that i have to remove the logo code do you mean from custom css?

    if so which part of it. i am sorry i ask so many questions but i am really new to this and your blog offers amazing help

    Reply
    • Suresh May 2, 2010, 11:40 PM

      hai Yiannis,

      Not from custom.css remove logo code from header widget..

      path wordpress admin –> appearence–> wigets–> header widget

      Reply
  • Yiannis May 8, 2010, 3:17 AM

    sorry this is my header ad widget

    http://pastebin.com/SCYbnR45

    Reply
    • Suresh May 8, 2010, 2:50 PM

      hai Yiannis,

      I think you are not seen my previous two comment.. i send the code via pastebin in my previous comment..
      you are not even changed ul class=”sidebar_list” i.

      check this
      i corrected the the code you send via paste bin now the dot will removed http://pastebin.com/E6FAvZSp

      also i told you to remove custom.css code into below code
      .custom #header_widget_1 {float:right; }
      .custom #header_widget_1 .sidebar_list{padding:0em; }
      .custom #header_widget_1 a{padding:0 0.3em;}
      you are not even done.. then how can i help you?

      one more thing where you pasted the code for header image or logo? just remove the code..
      use the below tutorial to add the logo..
      http://fourblogger.com/how-to-upload-header-image-or-logo-in-thesis-theme/

      Reply
  • Yiannis May 8, 2010, 3:36 PM

    Dear Suresh

    i made all the changes you told me before but i changed it back because it was not working. Now i did it all again but the as you can see from my blog that the header image does not appear. I used the link of my image but i also tested with your link. If i remove the social bookmark icons then it appears

    Reply
  • Yiannis May 8, 2010, 3:38 PM

    Sorry i found the problem

    thesis open hook plugin was disabling the default header

    Reply
    • Suresh May 8, 2010, 4:32 PM

      hai yinnis,

      I think now your problem solved..

      Reply
  • himanshu June 8, 2010, 6:35 PM

    boss this custom function code shows error. please help

    Reply
    • Suresh June 8, 2010, 7:07 PM

      hai himanshu,

      I also asking the same… what error you are facing in your custom functions code?..
      without showing the error how can i help you?..
      I checked this code it is working fine..also i checked banner ads in header both working fine..
      tell me when you get custom function error?.. and where? social bookmark icons or banner ads in header code..

      Reply
  • Nismion July 25, 2010, 6:11 AM

    Thx for this easy to handle tutorial. Nice more you have here, I`ll take a look around and sure will find a lots of more. 😉

    Reply
  • Eugene Herbert September 14, 2010, 9:27 PM

    Hi,

    I’ve done everything according to your lesson but I the social links are not showing up in my header as expected. Is there something I am missing? Thanks for the help

    Reply
  • Player Profiles October 30, 2010, 6:09 PM

    You you could make changes to the post name How to Add Social Bookmarking Icons in widgetized Header of Thesis Theme to more better for your content you create. I loved the blog post all the same.

    Reply
  • Will December 15, 2010, 3:00 AM

    When I applied the codes for the header widget and my social networks icons, everything worked except that the Body of my website turned into a black background (it was originally white). I am also using thesis Open Hooks. Could that be a problem? And if so how can I alter your code to work alongside Open Hooks

    Reply
  • Mike Lieberman May 4, 2011, 10:59 AM

    When I cut and pasted the code into custom_functions.php

    I got an error message saying:

    Parse error: syntax error, unexpected ‘}’ in

    It was referring to the <?php } line

    Please advise.

    Thanks!

    Reply
  • Rahul May 18, 2011, 11:52 AM

    Thanks You So Much For This Wonderful Gift As Your Site ,I Love Each And Every Post Of This Blog ,And You Make The Tutorials So Easy To Understand And With Full Detail I Am A Fan Of Your Site Now :)

    Reply
  • Carson September 5, 2011, 9:46 PM

    This is terrific! One question: how can I move the social icon up a little bit higher than the default?

    Reply
  • Sean November 1, 2011, 7:23 AM

    Thanks for the help on this. Works great.

    Reply
  • casandra November 13, 2011, 4:30 AM

    I just want to say THANK YOU! I had the header ready for the icons, but I didn’t know how to place them… until I found your post. :)

    Reply
    • FourBlogger November 13, 2011, 6:34 PM

      Thanks for using our tutorials. . Glad i saved your time..

      Reply
  • Amina Saqlain December 9, 2011, 1:47 PM

    that’s great and easy way thnx

    Reply
  • Andrea January 24, 2012, 1:01 AM

    Hi — I tried implementing your solution, and was able to see the header_ad widget. However, when I add my content in the widget (in my case an email sign up form), nothing appears….I’m not sure what I’m doing wrong!

    Thanks

    Reply
  • abdoorahman February 11, 2012, 11:45 PM

    It works, thanks a lot Suresh, so glad find this tutorial

    Reply
  • Hari July 20, 2012, 12:17 PM

    Thanks for this awesome tutorial Suresh, your step by step tutorial is the best, i found exactly what i was looking for

    Reply