How to add Header Widget in Thesis to Display Banner Ads

Add Header Widget in Thesis to Display Banner Ads and effectively utilize free space.  Also we can use custom functions to add banner ads in thesis theme header. Here is a detailed guide, read it and follow the steps.

By default Thesis is just a Bare-Bones theme and need a lot of customization to make an unique design. The main part of any blog or website is header and special care is to be taken while crafting it. It is good to display Banner Ads in thesis header because, it grabs the readers attention and also has high Click Through Ratios (CTR).

Banner Ads of sizes 468 x 60 and 728 x 90 can be displayed in these header. There are two methods to get you job done, read both and use the one  you like.

Check Out How to Install Thesis Theme on WordPress Blog

Add Header Widget in Thesis to Display Banner Ads

If you want to control header banner ads using Widget Section, then add the below code to custom_functions.php file and update it.

/** Register a Widget Section to Display banner Ads */
register_sidebars( 1 , array(
'name' => 'Header Banner Ad',
'description' => 'Display Header Banner Ads in Thesis Theme. Drap & Drop Text Widget to Start With.',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
/** Display banner Ads in Header using Widget Section */
function header_widget() { ?>
<div id="header-banner-ad">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Banner Ad') ): ?>
<?php endif; ?>
</div>
<?php }
add_action('thesis_hook_header', 'header_widget');

After adding this code, a new widget section will be created in the Appearance > Widgets. You need to add some content to that section using a text widget.

Also Read Thesis 1.8.5 Now Available for Download

Sample Code To display Banner Ad in Thesis Theme Header

Here is the sample code that helps to display a banner ad in header. Go to Widget Section, Drag & Drop text widget to “Header Banner Ad” section and add below code to it. Check your blog home page and the header ad will be live.

<img src="http://www.wpsquare.com/wp-content/uploads/2012/07/banner-ad.png" alt="WordPress Tutorials" width="468" height="60" border="0"/>

If you are looking for more precise method or dont like to use additional widget section, here is another method you can follow.

PS: Use Only one method at a time or it would result in breaking of theme.

Display Banner Ads in Thesis Header using Custom Functions

Here is simple code to display banner ads without any hassle. Add the below code to custom_functions.php file and update it. Replace the highlighted code with your own image, also dont forget to change the link.

/** Display Banner Ads in Thesis Theme Header*/
function thesis_header_ad() {
?>
<div id="header-banner-ad">
<a href="http://www.wpsquare.com">
<img src="http://www.wpsquare.com/wp-content/uploads/2012/07/banner-ad.png" alt="WordPress Tutorials" width="468" height="60" border="0"/>
</a>
</div>
<?php
}
add_action('thesis_hook_header', 'thesis_header_ad');

CSS for Header Banner Ad in Thesis

Final step is to add some styling to perfectly position header banner ad. After using any one of the above methods, add the below code to custom.css file in thesis and update it.

#header-banner-ad {
display: block;
float: right;
list-style: none outside none;
margin-top: -6em;
width: 500px;
}

You have successfully added header banner ad to thesis theme, if you need any further help regarding this, drop a comment and we are glad to help you.