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> <a rel="nofollow" href="http://twitter.com/fourblogger"> <img src="http://fourblogger.com/wp-content/uploads/2009/12/Twitter.png" border="0" alt="" /></a> <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> <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..
Related Tutorials:
- How to Add Floating Feedback Social Bookmarking Icons in Thesis Theme
- How to add Social Bookmark Icons at Right Side of the Post in Thesis Theme
- Widgetized Thesis Theme-Header, Content box and Footer
- How to Add Banner Ads in Header of Thesis Theme
- How to add Follow us Google Buzz button in thesis theme Header, Sidebar and Footer?
{ 44 comments… read them below or add one }
thanks suresh.K,I WAS THE ONE WHO REQUESTED FOR THIS POST…..IM VERY HAPPY TO SEE THAT YOU HAVE RESPONDED QUICKLY
Thanks Aaslin. Your questions encourage us to produce more thesis content.
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?
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.
thanks for your reply
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.
Fine. When you buy thesis, i am ready to do free basic thesis customization for you, if you can buy it through our link.:)
Nice tutorial
Thanks Elatio.
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?
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.
Social bookmarking icons are really helpful to share your post. You can get more traffic from bookmarking sites.
If you feel this tedious then this below tutorial will helpful.
http://fourblogger.com/add-your-social-bookmark-icon-into-thesis-theme/
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!
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..
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
hai yinnis,
In your custom_functions.php file check the code for header widget add the code
ul class="sidebar_list"instead ofulcheck 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;}
that didnt work for me mate. it moved the icons to the right but they became unclickable and also messed up the navigation menu
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..
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
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
divfor 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
I am sorry Suresh
check this out
http://pastebin.com/m9PuM2R5
this is my custom functions
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..
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
hai Yiannis,
Not from custom.css remove logo code from header widget..
path wordpress admin –> appearence–> wigets–> header widget
sorry this is my header ad widget
http://pastebin.com/SCYbnR45
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/
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
Sorry i found the problem
thesis open hook plugin was disabling the default header
hai yinnis,
I think now your problem solved..
boss this custom function code shows error. please help
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..
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.
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
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.
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
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!
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
This is terrific! One question: how can I move the social icon up a little bit higher than the default?
Thanks for the help on this. Works great.
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.
Thanks for using our tutorials. . Glad i saved your time..
that’s great and easy way thnx
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
It works, thanks a lot Suresh, so glad find this tutorial