People 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.
Loading ...
{ 41 comments }
Next Comments →
Franklin,
I love Thesis too. . .have you ever tried working with ? I adore it.
Argh! The link didn’t work…I was referring to the Open Hook plug-in for Thesis.
Yeah, I didn’t like it much. I’m too use to helping people in the support forum who do not use it. I’ll add how to easily add it to the open hook plugin at the bottom.
The banner blends in really well with this theme..
Yes your banner looks great and this tutorial is a big help to those who a want a similar one.
I agree with you melody. The header seems very comfort with the colors…
Thanks for the great guide, I am not using Thesis, but I did find this helpful for my theme, as I have been trying to do this but neglected to change my CSS
Really true…I’m liking the colors!
Hi, this didn’t work for me. I am actually trying to put two ads beside eachother (using the header hook) – not sure why my 2nd ad is not showing up.
Here’s what I have in the header hook:
And then in custom.css:
.custom #header_welcome { float: right; position: absolute; width: 168px; height: 90px; /*top: 15px; left: 502px;*/ }
The 2nd (welcome) ad doesn’t show up. Any ideas what I am doing wrong? Thanks!
Hmm looks like my code didn’t display my previous comment. Here it is again (this is in my header hook):
Hey great tip, thanks for sharing, do you know any more tricks for perhaps a footer and sidebar ads
thanks mate
Yeah, what are you looking for?
Hey, thanks for replying, you have a great site and a great about page, well I’m kind of new blogging its only been 2 yrs on and off and I’ve decided to make a go with my site(this is strictly a hobby of mine, I’m actually a dentist) to increase my rss readers and maybe make a little money nothing serious but my goal is maybe a $500, I’d like to donate these monies to charity of mine. Anyway back to the question I’d like to have a few banners, I read on another site that the following banners are a must(what do you think) 125×125, 300×250, 468×60(which I’m sure you agree lol), 120×600, and a 260×32 so I’m thinking its a similar code, anyway I would appreciate any insight or help.
Thanks Franklin and again great site, to be honest, there are lot site that deal with your topic but your kind off captivated me, the style is smooth and kind off kicks your inquisitive side, so congrats good job, you got me.
Jorge
I would use a plugin for 125×125 (which seem to be the best). I can do a tutorial for you tomorrow really quick. It will be best or a 468×60 which has worked wonders for me.
I’m definitely doing this, any thoughts on the above comment – Jorge Ledesma, that’s me
Hi Franklin. Thanks so much for this code. For some reason it just won’t work on my site though. Any thoughts?
Hi,
I came here from the thesis forum. Can you tell me how to place a 468×60 Google Adsense ad instead of a static image banner?
mee tooo
Inside the div, put your AdSense code instead of the . Just put it between the opening and closing div tags. The css code should be the same.
(added spaces to the tags in hopes they’ll show up…)
Ok, that didn’t show up. Trying again without the code. (You can delete my other comment…)
Just replace everything between the opening and closing div tags in the custom function code with your AdSense banner code. Styling should be the same.
Can you tell me how to place a 468×60 Google Adsense ad in the header???
Can you please write a tutorial about it
thanks
thanks for this tutorial
hey
i want to know it, too
hey thanks – this is great. I’m getting it to show up, but i can’t make the ad in the header stationary. in other words, when i make my browser window smaller and larger, it moves the ad around.
do you know how to make it “stick” there?
Should already stick. Can you show me?
Franklin – It’s my bad, I got it to work. Basically the “twist” was
position: absolute;
vs.
position: fixed;
I’m a nooob.
This tutorial rocked.
Thanks this is awesome! Just added a banner on my homepage.
Franklin— thanks for the tutorial.. i have it partially working.. im attempting to use this to put a hyper-linked banner ad [not adsense] into the header. i would like it to the right of the logo — which i have already replaced with an image. so far, the banner ad is scaling with opening and closing the window, independently of the rest of the blog. wheras yours moves as it should. im using the code you provided, except i have specified a BG image in the css [the banner ad] is this a common problem? what should i do?
heres the code i used to replace the blog title with a logo image… is this part of the problem perhaps?
thanks! — K
/* This line sets up our clickable background image based on the site title’s link */
/* DIY: Adjust the height & width attributes to reflect the actual size of your image */
/* DIY: Change the filename of your image to reflect the actual header’s file name */
.custom #header #logo a { display: block; height: 100px; width: 486px; background: url(‘images/annlogo_h.png’) no-repeat; outline: none; margin-top:10px;}
/* This line gets rid of the site title & tagline by casting them out to far left field */
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
/* This line collapses the vertical space of the tagline so that there isn’t unnecessary white space after the header image */
/* This is a bit of a kludge, but it seems to work. */
.custom #header #tagline { height: 0; }
/* This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content */
.custom #header { padding: 0; }
Thanks for give great tips , i am searching from last one month and finaly get it and use it , So many Thanks for this Tips , we are using in header
Hi Franklin
Thanks for great tips about adding ad to header. Works great but i have small small problem. When i tested this with different resolutions, ad is moving and not align nice with right side of my site. Same thing when i open bookmarks on my left side in firefox. How can i fix this banner to stay in place and aligned with my right border with any resolution or screen size instead of floating around?
Thanks in advance
Nice tutorial Franklin. Worked great with my site.
Do you have any idea on how to make it a rotating banner?
Cheers
thanks for the tutorial… awesome !!!
Next Comments →
Comments on this entry are closed.
{ 5 trackbacks }