Add a Header Widget to Thesis

in Thesis Tutorials

If you need help with any Thesis related design or optimization, I’ve available for hire. Check out my list of services and drop me a line using the contact form on that page and we can talk about how to make your Thesis site even better!

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*/
        '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 } ?>
<?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!


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.

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!

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

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.

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.

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!

7 Jaxrolo January 27, 2010 at 3:43 pm

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

8 Bob January 30, 2010 at 1:07 pm

Thanks for that! It worked perfectly!

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?

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.

11 Jeff February 25, 2010 at 3:21 pm

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

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;

13 Shubham March 1, 2010 at 8:26 am

thanks for the widgetized header…!

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

Thanks! Very Useful

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!

16 converse basket March 27, 2012 at 9:03 am

Thanks for the interesting information. I really enjoyed reading your blog and I look forward to read your next post. It is always fun to find great blogs.
I will recommend this blog to my friends!

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


18 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,

19 Chris April 23, 2010 at 11:06 am

Glad you figured it out!

20 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

21 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.

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

23 JD May 26, 2010 at 6:05 pm

Thanks this was a great help to me 😉

24 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.

25 Nathan Lively March 22, 2011 at 10:26 pm

I’m have the same problem. I want to place two widgets with absolute positioning.

26 Randy Martinsen April 29, 2011 at 9:29 pm

When adding more than one widget to the header they overlap rather than add below each other. How do we fix this?

27 Barbara June 4, 2010 at 10:10 pm


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?

28 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.

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

This is fabulous. Thank you!

30 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.

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

Very much help full lot of thanks 🙂

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

Any help will be much appreciated.

33 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.

34 Chris August 23, 2011 at 10:07 pm

This code is for the custom_functions file. If you’re using OpenHook it would need to be modified slightly.

35 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.

36 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

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


38 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.

39 Jeremy July 27, 2010 at 9:36 pm

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

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

hey bro i cant work it out @
can you help in that …

41 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.

42 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.



43 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 🙂

44 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!

45 Brock September 2, 2010 at 3:33 am

Thank you very much

46 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.

47 Swamykant September 16, 2010 at 9:09 pm

Thank you very much 🙂

48 Steve September 22, 2010 at 4:02 pm

Thesis is amazing…thanks for this tutorial.

49 Chris December 9, 2010 at 2:26 am

You’re very welcome!

50 John September 24, 2010 at 3:17 pm

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.

51 John September 28, 2010 at 11:27 am

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?

52 Ted October 12, 2010 at 3:48 am

Is there a way to keep my Title text from overlapping the widget?

53 Brent October 12, 2010 at 10:36 pm

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?

54 Brent October 12, 2010 at 10:44 pm

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)

55 Jamey October 20, 2010 at 4:43 am

Thanks a lot Brent, it works 100%, I applied it in my blog

56 neena November 11, 2010 at 5:16 pm

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!


57 colleen joyce pontes November 11, 2010 at 7:23 pm

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!

58 Wo King December 11, 2010 at 6:04 pm

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?


59 Jeff December 11, 2010 at 8:36 pm

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.

60 Andra December 12, 2010 at 4:43 pm

Awesome, thanks! Been looking for a tutorial to put a text widget in the header for a long time!

61 Chris August 23, 2011 at 9:55 pm

Welcome 🙂

62 Marinos December 17, 2010 at 7:19 pm

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 (

Can I move it down a little? thanks!

63 Chris August 23, 2011 at 10:05 pm

Yes just adjust the top attribute to a higher number of pixels.

64 Brady February 23, 2011 at 8:50 pm

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!

65 Chris August 23, 2011 at 9:55 pm

Cool! Glad to hear that 🙂

66 Emma February 24, 2011 at 8:37 am

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?

67 Jason Gracia February 26, 2011 at 6:39 pm

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

Can you help?


Thank you!

Jason Gracia

68 Ling-en Hsia March 12, 2011 at 4:27 am

Thank you soooooo much!!
You made my life so easier.
Google should ONLY display this post on the SERPs

69 Chris August 23, 2011 at 9:56 pm


70 Ling-en Hsia March 12, 2011 at 4:32 am

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 which is really easy to use

71 MAXISOFT CENTER March 12, 2011 at 9:13 pm

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?

72 Original Software March 12, 2011 at 9:16 pm

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

73 rakesh kumar March 15, 2011 at 1:02 pm

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.

74 Chris August 23, 2011 at 9:57 pm

Cool! Yeah let me know when you have your skin ready!

75 Chicago Divorce Lawyer Referral March 22, 2011 at 6:23 am

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


76 Chris August 23, 2011 at 10:04 pm

Yes you could do that. You would need to adjust the positioning for each widget though.

77 Edille March 24, 2011 at 7:05 am

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.


78 Dilbag Koundal April 7, 2011 at 4:51 am

Thanks for sharing and its really a nice theme to use… 🙂

79 dilbag koundal April 12, 2011 at 11:08 am

Thanks for such nice post. its really usefull. 🙂

80 Sanjai April 30, 2011 at 2:22 am

I want to increase the width and height of the banner i.e 728×90

How can I do this?

Thanks for helping!

81 Chris August 23, 2011 at 9:58 pm

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; }

82 Neill Watson May 5, 2011 at 6:50 am

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?

83 Chris August 23, 2011 at 9:58 pm

That is correct. You could add widget to any area of the theme using hooks!

84 Tia Peterson May 7, 2011 at 9:59 pm

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.

85 Chris August 23, 2011 at 10:03 pm

Tia – just looked at your site and it looks like you already figured this out?

86 David June 2, 2011 at 9:51 pm

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

87 keshav December 7, 2011 at 7:39 am

was searching for this only…

just 2 widget bars are not sufficient for me 🙂

will be implementing this for sure

88 Webscopia June 3, 2011 at 3:11 pm

Thank you!!!!!!!! This tutorial was a god send. Been figuring out on how to get the header widget working with a banner ad!

89 Chris August 23, 2011 at 9:59 pm

Glad to hear that! Thanks for commenting!

90 Rick June 30, 2011 at 10:23 pm

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.


91 Jan July 5, 2011 at 7:03 pm


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.


92 Chris August 23, 2011 at 10:00 pm

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; }

93 Amit July 11, 2011 at 9:23 pm

Thanks for the great tips..Nice

94 Gouri July 12, 2011 at 7:44 pm

This is a great value addition to the awesome Thesis Theme, Thanks.

95 Jeremy Blake July 28, 2011 at 12:02 am

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.

96 Chris August 23, 2011 at 10:01 pm

Glad this tutorial worked better for you! I introduce myself on the Hire Me page by the way 🙂

97 James August 3, 2011 at 2:18 pm

great information and simple to setup

98 Aldrin August 5, 2011 at 1:19 pm

Still not working with Thesis 1.7. 🙁

99 Chris August 23, 2011 at 10:02 pm

The code works with Thesis 1.7 and newer. What kind of problems are you having?

100 Adam August 23, 2011 at 5:03 pm

I added this on my site at but for some reason when I add the widget it also is adding it to one of my widgets in the footer?

101 Chris August 23, 2011 at 9:53 pm

Adam – Did you already have some other code in your custom functions file for adding a widgetized footer?

102 Sam August 29, 2011 at 7:15 pm

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.

103 Chris August 31, 2011 at 12:55 am

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.

104 Al Spaulding September 18, 2011 at 1:56 am

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…

105 Tom Catalini October 28, 2011 at 7:57 pm

Great post! Thanks for sharing this idea and the step-by-step needed to implement it!


106 Susan Branch Smith November 14, 2011 at 9:43 pm

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,


107 stacy November 28, 2011 at 1:42 pm

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

108 Ross Corbett January 2, 2012 at 12:43 pm

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.

109 Laura January 3, 2012 at 7:18 am

THANK YOU. I’ve been looking for this for days!

110 Avinash January 6, 2012 at 8:32 pm

thank you so much for the tutorial i done this on my blog easily 🙂

111 Rajib Kumar February 4, 2012 at 4:05 pm

Nice tutorial. I add a header widget by using your tutorial. Thanks for share.

112 Amanda Frances February 23, 2012 at 7:49 pm

I was following your directions and the header space for widgets showed up on the widget section of page… but the banner I was trying to add still wasn’t trying to show up. So I tried to insert it in a different part of my page.

Now… I can’t get to any part of my page. I can’t even log in.

Please please help me.
Fatal error: Cannot redeclare header_widget() (previously declared in /home/content/78/8059178/html/wp-content/themes/matala/functions.php:484) in /home/content/78/8059178/html/wp-content/themes/matala/inc/theme-options.php on line 208

113 Cesar Subieta February 28, 2012 at 8:42 pm

Thank you, so much

114 Peter Crowell February 29, 2012 at 5:51 pm

Will this work for a non-Thesis theme? I’m using the Inkblot theme with a Webcomic plugin. I want to add a widget area to my header.

Thanks for your work!

115 SonDan the Old School Music Lover March 8, 2012 at 2:46 am

Awesome tutorial. I have been looking, LITERALLY, FOR YEARS on how to put an alert or note box in my header and putting this text widget there will do the trick. Thank you so
much for sharing your expertise.

Now just one more question please. Will the background of the widget be white? And if so how does this newbie add a line of code to make the color of the widget match her blog.

Thanks for reading.

116 SonDan the Old School Music Lover March 8, 2012 at 3:07 am

Update – I played around and was able to get the widget up and operation without trouble. The color of the widget is the color of my b log so all is well.

Thanks again for your super tutorial. It was wwll written and easy to understand and follow.

117 SonDan the Old School Music Lover March 8, 2012 at 3:07 am

wwll should be well.

118 Nick April 23, 2012 at 5:24 pm


How can I change up this code to utilize the widget function but create a 728 by 90 banner ad space below the header? Or after_header I should say if speaking code language 😉

119 Dave Curtis June 13, 2013 at 4:01 pm

Thanks. This brings up a whole slew of extra options I can now add to the top portion of whatever one of my sites needs them. Thinking of all sorts of deviously advanced looking magical trickery I can now perform to wow the public with. 🙂

{ 1 trackback }