Add a Header Widget to Thesis

My last two free Thesis Skins (Sharp and Terracotta) 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

Text File including the following code for copying and pasting

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!