![[Thesis Tutorial] Placing Banner Advertisement In Wordpress Blog Header](http://www.hasan-online.com/wp-content/uploads/2009/12/thesis-theme.gif)
Last few months, I’ve been using Thesis Theme for my blogs. It’s a GREAT theme with tons of customization features for the bloggers and designers. In early days of using Thesis, I was facing a problem in positioning a banner advertisement at Thesis header.
I searched on Google and reached at Francklin Bishop’s website and tried his solution. His positioning and CSS tweaking was fine with fixed display resolution, but if I tried to resize the window, advertisement was moving out from it’s position. However, I kept experimenting on the same code and ultimately I fixed the problem.
Custom Function (custom_functions.php)
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.css)
.custom #leaderboard_ad {
float: right;
position: absolute;
width: 468px;
height: 60px;
top: 100px;
padding-left: 52em;
}
Once you added the code in your custom_functions.php and custom.css files, you can change width, height, top and padding-left according to your website design and layout.
{ 16 comments… read them below or add one }
i have a problem, in all browsers scroll the body to left
Can you send me the link of your website that giving you headache? Link at your gravatar looks fine to me.
All the best.
You are a gun !!!!!!!!
Thanks mate, I was working for hours on this thing.
Thanks!!!!!!!
You are welcome. Let me know if you have any problem in customizing Thesis Theme.
All the best.
This is –by far– the simplest example of inserting a banner as in the Thesis header. I’ve tried a few others, some of them my own, and this is the simplest. Some adjustments have to be made for image size and placement within your specific implementation of Thesis, but it works like a champ.
Karl A. Krogmann
With this code, your logo is not clickable anymore.
Hi Jojo,
You have to put your website URL in anchor tag. In the above code, it is empty now.
Let me know if it works.
Cheers!
I can´t click your logo on this site, too. I assume this is, because the css-code creates some sort of overlay? I tested it with Firefox and Chrome.
Probably you are right, I didn’t notice the problem before. I’m going to investigate the error.
Thanks.
Many thanks for the solution here. I’ve searched high and low and your solution was the one that really worked.
Thanks Chris. Let me know if you need further assistance.
Cheers!
Hi bro, you should post this good tutorial in your bangla blog. Also my VERY personal request will be to keep in mind to write a tutorial on “how to customize a blog for mobile” since both the number of mobile internet users and advertisements made for mobile users has been increased rapidly.
Hi complete newbie here. I understand how to add to my custom.php and custom_function.php files but where do i put my adsense code in all of this. Sorry for such a basic question. Good site by the way!
I don’t understand where we should put the ad code in this solution. Thanks!
You have to add those code to custom_functions.php and custom.php files respectively. I can see you have already showing a banner in your header area. You have to do the same thing for your ads as well.
Best of luck!
this code works great but im having an error , it dosent shows me the ad in internet explorer