Add a Header Widget to Thesis

January 12, 2010 · 42 comments

in Thesis Tutorials

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 }

1 Oscar January 14, 2010 at 9:23 pm

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.

Reply

2 Chris January 14, 2010 at 10:14 pm

Oscar – Thanks for the feedback. Give it a go and let me know if you need any help along the way!

Reply

3 DJ January 15, 2010 at 5:08 pm

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??

Reply

4 Chris January 16, 2010 at 2:12 am

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.

Reply

5 Dennis January 21, 2010 at 11:47 pm

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.

Reply

6 Chris January 22, 2010 at 2:25 am

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!

Reply

7 Jaxrolo January 27, 2010 at 3:43 pm

Thanks for the Tutorial. I had been looking for a way to do this.

Reply

8 Bob January 30, 2010 at 1:07 pm

Chris,
Thanks for that! It worked perfectly!
Bob

Reply

9 Alan February 1, 2010 at 10:02 am

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?

Reply

10 Jacob Margolis February 16, 2010 at 3:16 am

Thanks for the tutorial! I’m enjoying working with thesis and your website has helped a bunch.

Reply

11 Jeff February 25, 2010 at 3:21 pm

*Confused*
if i want to place 728×90 which part i must change?

Reply

12 Chris February 25, 2010 at 5:20 pm

Just the css attributes for the header widgets, specifically these:
top: 0px; left: 477px; width: 468px;

Reply

13 Shubham March 1, 2010 at 8:26 am

thanks for the widgetized header…!

Reply

14 B?t ??ng s?n 360 March 16, 2010 at 12:06 pm

Thanks! Very Useful

Reply

15 DeeJay Hart April 1, 2010 at 5:53 am

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!

Reply

16 Sandra April 22, 2010 at 7:26 pm

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

Reply

17 Sandra April 23, 2010 at 10:45 am

Just realized that I missed copying the first line of css code….everything works great now!

Thanks so much,
Sandra

Reply

18 Chris April 23, 2010 at 11:06 am

Glad you figured it out!

Reply

19 Justyna May 1, 2010 at 6:58 pm

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

Reply

20 Patsy May 18, 2010 at 6:42 pm

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.

Reply

21 Patsy May 18, 2010 at 7:11 pm

Oh! Wait! I just realized that I’m working with a full-page layout? Is *that* the problem?

Reply

22 JD May 26, 2010 at 6:05 pm

Thanks this was a great help to me ;)

Reply

23 Barbara June 4, 2010 at 9:19 pm

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

Reply

24 Barbara June 4, 2010 at 10:10 pm

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/

Reply

25 tangologix June 9, 2010 at 6:53 pm

nice written . well informative article. i saw it operation on theappsplanet site too . nice written info man. thanks for posting.

Reply

26 Musings of a Housewife June 10, 2010 at 1:01 am

This is fabulous. Thank you!

Reply

27 Give Me Neither June 16, 2010 at 5:59 am

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!

Reply

28 Saravana Kumar June 18, 2010 at 11:45 pm

Very much help full lot of thanks :)

Reply

29 TTF July 8, 2010 at 6:36 pm

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.

Reply

30 Robyn Lynn July 17, 2010 at 4:47 am

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

Reply

31 Serena July 24, 2010 at 1:57 am

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.

Reply

32 Bargain Bathroom Centre July 26, 2010 at 3:09 pm

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

Reply

33 Jeremy July 27, 2010 at 9:35 pm

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

Reply

34 Chris August 8, 2010 at 1:11 pm

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.

Reply

35 Jeremy July 27, 2010 at 9:36 pm

also for some reason the widget wipes out the logo??

Reply

36 James Issac August 10, 2010 at 6:35 am

hey bro i cant work it out @ http://jamez.techilog.com/test/
can you help in that …
thanx

Reply

37 Chris August 10, 2010 at 11:17 am

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.

Reply

38 TB August 12, 2010 at 10:14 am

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

Reply

39 Career Outlook August 17, 2010 at 9:28 am

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 :)

Reply

40 Christine August 31, 2010 at 7:46 pm

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!

Reply

41 Brock September 2, 2010 at 3:33 am

Thank you very much

Reply

42 John Burnside September 5, 2010 at 3:07 pm

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.

Reply

Leave a Comment