Updated: August 8, 2010 – The code used in this post has been updated to be compatible with Thesis 1.7 and up versions.
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /*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
1 2 | .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!
{ 42 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
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 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.