Thesis Tutorial: Banner Ad in Header

by Franklin Bishop on April 19, 2009

thesis-designerPeople that are using the Thesis Wordpress theme have been wanting to know how I added a banner ad in my header. Since others were having problems, including myself, with the traditional way of coding this, I decided to do it differently.

Below I have shown you what I put in my custom CSS file and custom functions file. I left my code in their so that it is easy to see where to delete and insert your own code.

Custom Function

function my_header_ad() { ?>
<div id="leaderboard_ad"><a href=""><img src="image url" alt="" /></a></div>
<?php }
add_action('thesis_hook_header', 'my_header_ad');

Custom CSS

.custom #leaderboard_ad { float: right; position: absolute; width: 468px; height: 60px; top: 15px; left: 502px; }

Now make sure you change the CSS so that it fits in your header. For top, the higher the pixel value the lower it will be. For left, the higher the pixel value the farther to the right it will be. You will have to play with it so it fits your header the way you like it.

Hopefully this Thesis Tutorial can help you get a banner ad in your header. As always, there are little things that can mess this up. So if you have troubles let me know.

{ 5 trackbacks }

links for 2009-04-21 | girliegeek
April 21, 2009 at 2:03 am
List of Wordpress Thesis Theme Tutorials, Tips and Hacks - EzyBlogger
July 17, 2009 at 10:10 am
List of Wordpress Thesis Theme Tutorials, Tips and Hacks | Choose 4 Me
August 2, 2009 at 12:12 am
Mini-Tips, Facebook Connect, a Contest and More Answers! | 3asslema4Host
August 13, 2009 at 7:07 am
250+ Thesis Theme Resources | Sahil Kotak dot Com
December 8, 2009 at 2:26 pm

{ 41 comments… read them below or add one }

Jinnat Ul Hasan September 5, 2009 at 5:27 pm

Thanks man, I was facing problem in placing my advert. I searched in Google and found your website. I’ve successfully placed an advert beside my website name.

Cheers!

Reply

Jinnat Ul Hasan September 10, 2009 at 7:38 pm

Your method worked, but in less resolution, ads moves out of the sideline… how to fix that?

Reply

Jinnat Ul Hasan December 17, 2009 at 6:37 am

I’ve fixed the problem at my website. You may check it here (http://bit.ly/7BJRaX).

Take care.

Reply

danielthepoet September 11, 2009 at 7:28 am

I implemented the code and my ad is up, but it’s not anywhere near the right location. It’s appearing directly below my logo. I tried adjusting the distance from top and left, with no results.

Any ideas?

Reply

Sahil Kotak October 22, 2009 at 11:57 am

Hi,I had the same problem. But tried to fix by changing the pixels of Top and Right in CSS.

Reply

Josh October 30, 2009 at 4:13 pm

I’m having the same problem. No matter what I do, I can’t get the ad to move from below the logo. Any ideas, Franklin?

Reply

Yep October 10, 2009 at 12:08 am

This is beautiful, thank you!

Reply

Leave a Comment

Previous post: What is Twitter and Why Join Twitter?

Next post: Get More Followers on Twitter and Grow Your Online Presence