Several of my Thesis Skins have included an area in the header for adding banner ads, social media icons, and other content. Here’s a quick video tutorial on how you can add a header widget to your Thesis Themed site that will allow you to add content to your header directly from the widgets panel.
The code used in the video can be found below the video and can be copied and pasted into your custom_functions.php and custom.css files.
Code for your custom_functions.php file
/*Build Header Widget*/
register_sidebars(1,
array(
'name' => 'Header Widget',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
function header_widget() { ?>
<div id="header_widget_1" class="sidebar">
<ul class="sidebar_list">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget') ){ ?>
<li class="widget"><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');
This code builds a 3rd widget titled HeaderAd to your widgets panel and ‘hooks’ it into the header. You’ll need to add the code below to your custom.css file to position the new widget properly.
Code for your custom.css file
.custom .sidebar ul.sidebar_list {position: relative;}
.custom #header_widget_1 ul.sidebar_list li.widget {position: absolute; display: block; top:0px; left:477px; width:468px; }
You’ll most likely need to adjust the left and top attributes to appropriately position the banner based on your column and width settings. In the tutorial, I used the page framework and the two column layout with a main column with of 600px and a sidebar column width of 300px.
I also used a 468×60 banner in the tutorial so if your using banners of different sizes or multiple social media icons, the width attribute may also need to be adjusted.
Hope you enjoy the tutorial and please feel free to leave a comment with any questions or feedback you may have!
Free Updates - If you enjoyed this post, sign up for email updates and you'll receive valuable Thesis tips & tutorials plus updates when new Thesis Skins are released!
{ 109 comments… read them below or add one }
Very cool tutorial, I’ve been looking for a way to do this. I have to try it and see if it works, I’d like to be able to add some widgets to the header section on some of my sites.
Oscar – Thanks for the feedback. Give it a go and let me know if you need any help along the way!
Would it be possible to make this RSS sign up form go in a header widget like th one you have: http://www.agentpress.com/demo/ . Also, do you do any freelance work…I’m trying to make a kick ass site using Real Estate site using Thesis
?
Email me if you are interested??
Yeah, you’d just need to copy the RSS code into a text widget. Some additional CSS styling might be needed to get the right look, but the header widget can be used to put all types of content up in the header area.
I do some freelance work on occasion but I’m currently tied up with several other projects so I’m not taking on any design work for the time being. Thanks for asking though
You might want to check out the classified ads over at the Thesis forums to get hooked up with a designer specializing in Thesis.
Hi… just started with your cool skin… terracotta. A couple of quick questions… the frame on my photos show up white and not with the cool border on your demo. How do I fix this And is the drop cap feature something I have to code in each post?
Thank you.
Hey Dennis – Adding frames to your photos in Thesis requires you to add just a bit of html to your image code. Check out the How to Style Images in Blog Posts page from the Thesis User’s Guide for more info.
As far as I know, you do have to manually code in each post. The Publish Like a Pro with These Styling Tips page from the User’s Guide provides some more details.
Thanks for giving my skin a try! Terracotta looks nice on your site!
Thanks for the Tutorial. I had been looking for a way to do this.
Chris,
Thanks for that! It worked perfectly!
Bob
I have added the custom functions and css. I have now the side bar box in the header. Went to the widgets area and added a text box to the headerad and I can get it to appear. I am running a two column. Should it be on 3?
Thanks for the tutorial! I’m enjoying working with thesis and your website has helped a bunch.
*Confused*
if i want to place 728×90 which part i must change?
Just the css attributes for the header widgets, specifically these:
top: 0px; left: 477px; width: 468px;thanks for the widgetized header…!
Thanks! Very Useful
Thanks for this tutorial. It’s just what I needed to begin the re-vital of a much neglected blog. It worked absolutely flawlessly!
Peace and Love to You!
Thanks for the tutorial…it was very easy to follow (and I’m a newbie). Quick question….I added a text widget in the header and added code to make the text clickable, but it doesn’t allow you to click on it. The link works if I put it in a page or post but not in the header….any thoughts?
Sandra
Just realized that I missed copying the first line of css code….everything works great now!
Thanks so much,
Sandra
Glad you figured it out!
Hi Chris,
the sharp skin is awesome and your tutorials easy to follow!
Thanks a lot for your great work and sharing it with us.
I’m starting a new blog and I chose your sharp skin. I would like to ask you, how you made the | line in the nav. menu and also how to make the header logo not bolded? I’ve been looking for it in custom.css and layout file as well, making some changes but no result.
Thanks a lot for your time
Justyna
Hi, Chris.
Is it possible that, because I’ve already inserted a custom header, something in *this* code conflicts with that, and that’s the reason I can’t see my widgetized header? Or is there an iframe issue? I’ve placed my banner code into the widget, but nothing’s showing up.
Oh! Wait! I just realized that I’m working with a full-page layout? Is *that* the problem?
Thanks this was a great help to me
I’m trying to use this widget (thank you VERY much) to place two items in the top banner. A clickable image with a search box under it horizontally. Is that possible? Right now they are both aligning on top of each other in the same space!
Thanks in advance.
http://www.erickortzmd.com
I’m have the same problem. I want to place two widgets with absolute positioning.
When adding more than one widget to the header they overlap rather than add below each other. How do we fix this?
Chris,
I’m using your widget…but it seems you can only really apply one item to this area? I need a clickable logo and a search box and one is overlaying the other. Any ideas?
http://www.erickortzmd.com/
nice written . well informative article. i saw it operation on theappsplanet site too . nice written info man. thanks for posting.
This is fabulous. Thank you!
Does this work with Thesis 1.7? I add the code as specified and nothing shows up in my widgets or on my homepage.
Thanks!
Very much help full lot of thanks
Can you please suggest a way to place a widget just *below* the header? I want to use it for announcements etc. I already have my navbar below the banner so it will mean having a widget just below navbar and stretched across entire length for announcements. My site: http://blog.thetradersforum.net/
Any help will be much appreciated.
I am getting a parse error: “Parse error: syntax error, unexpected ‘}’ in … : eval()’d code on line 24″
I am using in openhook plugin and with full-width. I also have been playing today, so I have a custom header background code in place and/or logo image code in place.
Could this all be causing an issue when trying to play together?
Thanks, am hoping to get this going to play around with it a bit.
Robyn
This code is for the custom_functions file. If you’re using OpenHook it would need to be modified slightly.
This was a really helpful tutorial. Is it possible to add a second widget in the header? I’m using the 3 column layout in Thesis 1.7.
I found this tutorial very useful, previously I have only ever thought o make modules for my wordpress websites but I think maybe widgets might be the answer for the next few things i have in mind. many thanks
Hi there
I have followed your tutorial and can see the widget but whatever I change in custom such as top and left nothing happens. Can you help me with what to do next?
Thanks
Jeremy – The original code was for version of Thesis prior to 1.7 and on some instances does not work on sites running Thesis 1.7 and up. I’ve just updated the code so that it is compatible with the latest versions of Thesis so try grabbing the new code and see if that doesn’t fix the problem.
also for some reason the widget wipes out the logo??
hey bro i cant work it out @ http://jamez.techilog.com/test/
can you help in that …
thanx
James – I see the header widget up in your header. Looking at your custom.css file though, I don’t see the CSS from this tutorial for styling the widget. I also see you’ve got the code in for a header image but the location of the logo image is blank.
Hi Chris –
Great article. I was wondering if you could help me with the adjustments for a header banner ad that I created. I am not sure how to shorten the banner to fit inside of my borders (of course I have an issue on the easiest part of the process, ugh! )
Any help would be GREATLY appreciated.
Thanks,
TB
Great post, I have recently bought the thesis after hearing so many good reviews about it but after installing it, I found that it is very difficult to customise it. Thanks for this tutorial, it will going to be very helpful
Hi Chris – Thank you. Works great for me. If I want to add another another widget to the header, how could I make that possible? Thanks!
Thank you very much
Thanks for the the tutorial. I’ve been looking for a way to put a banner ad in my header all day! Thesis is awesome, only got it yesterday.
Thank you very much
Thesis is amazing…thanks for this tutorial.
You’re very welcome!
This is pretty handy.
One question though – I used it to put a search bar in the header.
Is it possible to change the color of the search bar?
Now it’s gray the same color as my header.
I used this to put a search bar in my header, the only problem is that it’s the exact same color as my header and I would like it to be white.
How might I go about changing the color?
Is there a way to keep my Title text from overlapping the widget?
I experimented with your tutorial to try to put a widget into my featured area of my homepage, instead of in the header. I changed the hook in the custom_functions.php file to “thesis_hook_after_header”. It worked! However, it is now on every single page of my site, when I just want it on my header.
Any idea how to restrict our new widget to displaying only on the home page?
Sorry… I said “I just want it in my header”, when I meant to say “I just want it on my homepage” (not throughout the whole site)
Thanks a lot Brent, it works 100%, I applied it in my blog
Thank you for the tutorial – it has worked great for me.
But now I am creating a custom page on which I don’t want the banner to appear.
What code should I use to remove this from my custom page only?
Any help would me very, very, much appreciated!
Thanks!
Thank you so much! For now I just have some basic text in my header – but you made this really easy for me to figure out – I look forward to doing something more creative in the future – I was HATING all the white space I had in my header! Signed up for your newsletter as well – looking forward to it!
Thanks for the great code. One problem though is that it can’t be populated with more than one widget. To have search and a logo in one. All it does it align on top of each other. Is that the case that it can only take one element?
Thanks.
Thank you so much for the tutorial. Im afraid this conflicts with a custom footer that I did so that now all the items that were in the custom footer are now in a widget called Header, and both appear on the site. The footer is still intact, but all the items in it are also showing up in the header.
Awesome, thanks! Been looking for a tutorial to put a text widget in the header for a long time!
Welcome
Hi, I successfully inserted the code of yours and the ads are already putted on my blog. One question though.
If you see the banner, then you ll see that it is a little bit upper than the logo (dailyfix.gr)
Can I move it down a little? thanks!
Yes just adjust the top attribute to a higher number of pixels.
Chris–thanks for this great code, and for the great video, too. We are going to use the code for our blog, and I’ll hopefully use it on other sites, too!
Cool! Glad to hear that
Great tutorial – except after I’ve added the code to the custom_functions.php, I don’t see a header widget show up. I see a larger gap above the header image, but nothing else. Help?
Thanks so much for the great tutorial.
I’m having a small problem, wondering if you can help.
I followed your directions and everything looks great in Firefox.
In explorer, however, all of my posts, teasers, sidebars are now
centered.
Can you help?
Site: http://www.ConfessionsOfaSolopreneur.com/hq
Thank you!
Jason Gracia
Thank you soooooo much!!
You made my life so easier.
Google should ONLY display this post on the SERPs
Welcome!
Thank you soooooo much!!
You made my life so easier.
Google should ONLY display this post on the SERPs
Also, if you’d like to use social icons, I highly recommend
http://wordpress.org/extend/plugins/social-media-widget/ which is really easy to use
In the article At, we look for our original custom_functions.php template with highly functional, but I could not finish it, if it can be in help for me sir?
I beg helped, because by adding to the ad on the header with an image, I did not succeed. Because with my custom_functions.php not appear Widget
Your code is flawlessly inserted the widget in the theme. Thanks for this great tutorial. Whenever my customized theme will be ready to rock. i will let you know and try to published in as a free skin.
Cool! Yeah let me know when you have your skin ready!
Is there any way to place two such widgets in the header? Ie, putting in the PHP code and changing ‘Head Widget’ to ‘Header Widget2′?
Thanks
Yes you could do that. You would need to adjust the positioning for each widget though.
Hi, Thanks for the tutorial, I have been surfing the net the whole day just searching on how to add search bar in my thesis theme header. I think now I can fix my problem.
Thanks.
Thanks for sharing and its really a nice theme to use…
Thanks for such nice post. its really usefull.
I want to increase the width and height of the banner i.e 728×90
How can I do this?
Thanks for helping!
Just change the width from 468px to 728px in the following code. You might also need to adjust the top attribute.
.custom .sidebar ul.sidebar_list {position: relative;} .custom #header_widget_1 ul.sidebar_list li.widget {position: absolute; display: block; top:0px; left:477px; width:468px; }Neat tutorial. I assume that by using hooks and modifying the code slightly, there’s nothing to stop you adding more widgetised areas elsewhere, for example before_content etc to make it easier to run advertising slots?
That is correct. You could add widget to any area of the theme using hooks!
Thanks! It works perfectly. I am wondering if there is a way to configure it so that it doesn’t add extra space above the header? It’s not a big deal to me at all. For me, I had a 25 px margin above the header and when I added the widget, it got bigger.
Tia – just looked at your site and it looks like you already figured this out?
Hi Chris
This is absolutely just great, but as a PHP and Thesis newb, I would like to know if this can be used to place two widgets or at least to have the content side by side and stop it overlapping…
Many Thanks
was searching for this only…
just 2 widget bars are not sufficient for me
will be implementing this for sure
Thank you!!!!!!!! This tutorial was a god send. Been figuring out on how to get the header widget working with a banner ad!
Glad to hear that! Thanks for commenting!
Thanks for the great info! However, mine seems to overlap my header and/or first post.
I have a header image installed, is that the issue?
Changing the padding does move it, but not between the header image and post.
http://66.147.244.60/~morebett/
Rick
Hi,
For some reason the banner I placed in the header is to low. But I cannot lift it up with adjusting the custom.css file. What do I do?
Any help would be very much appreciated.
Thx,
Jan
Try adjusting the top attribute in the following code. A negative number should do the trick!
.custom #header_widget_1 ul.sidebar_list li.widget {position: absolute; display: block; top:0px; left:477px; width:468px; }Thanks for the great tips..Nice
This is a great value addition to the awesome Thesis Theme, Thanks.
Have no idea who you are, but I love you for this tutorial. Thank you very much. I tried another tutorial that was supposed to add a widget to the header, but the widget would slide around depending on the size of the browser window. Your code works perfectly.
Glad this tutorial worked better for you! I introduce myself on the Hire Me page by the way
great information and simple to setup
Still not working with Thesis 1.7.
The code works with Thesis 1.7 and newer. What kind of problems are you having?
I added this on my site at http://www.bunkbeddeals.com but for some reason when I add the widget it also is adding it to one of my widgets in the footer?
Adam – Did you already have some other code in your custom functions file for adding a widgetized footer?
Hi Chris,
I can get the widget to appear in my header section but when I try to move it to the right spot it doesn’t move. Doesn’t seem to matter what I do with the CSS
Would moving my nav bar into the head have affected this? Thank this is a great solution for what i need. I have been fighting with DIY method to add social media onto the site for over 6 hours and couldn’t get it to work or move around either.
Sam – I looked at your site but didn’t see the header widget? The nav bar in the header might have something to do with it. I’d have to take a look with the header widget in there to know for sure.
This is exactly what I was looking for. Mucho thank you for posting this tip. You were the first link to come up on google when I did a search for this. I just bookmarked your site and will definitely be back again. Cheers…
~AL
Great post! Thanks for sharing this idea and the step-by-step needed to implement it!
Tom
Hi! Thank you so much for a great tutorial. I can drop my header widget into the header, but I can’t seem to manage it from there. At all.
Here’s what I’m trying to do: Add the thesis menu into the header and stack it vertically, not horizontally to the right. And still have it be, actually flush left in its own space.
I also tried doing this by hand (making a new hand-built menu and dropping it in as you advised), but I still can’t seem to move it once it’s there. It wants to align left (to the far left inside the header), which is where my logo is.
Any help would be greatly appreciated! I have no problem letting you into the site in question if that’s what you need.
Best wishes,
Susan
Thanks Chris, this tutorial was perfect for a hook illiterate like me. I have added my widget and fumbled my way to figure out the spacing issue … the only thing I can not figure out is how to get my header image above the header widget. Any help you have would be greatly appreciated. Thanks
Thank you so much for this as I have been looking at ways to place an advert in my header.
Just made the changes and it looks great.
Thanks again.
THANK YOU. I’ve been looking for this for days!
thank you so much for the tutorial i done this on my blog easily
{ 1 trackback }