How to Add Banner Ads in Header of Thesis Theme

This video tutorial deals about how to place banner ads in thesis theme header. We know thesis theme header section is very simple it contains only logo and tagging line. Most of the bloggers wants to utilize the header effectively.

First step you need to change you logo into high quality image because header gives more visibility to your site. To change logo image in header click here. Also bloggers wants to use right side of the header with banner ads of size 468×60. In this video I have explained how to add banner ads in header.

To achieve banner ads in header copy and paste the following code in custom_function.php or launch.php.

/*paste in custom_function.php  or launch.php  */
// banner ads in header
function my_header_ad() {
?>
<div id="header_ad">
<a href="http://fourblogger.com"> <img  src="http://fourblogger.com/wp-content/themes/thesis_16/custom/images/VIDEO BLOGGING.PNG" alt="video blogging" width="468" height="60"border="0"/></a>
</div>
<?php
}

add_action('thesis_hook_header', 'my_header_ad');

The above code you can replace you banner ad code within the <div> and</div>.

To paste the code in custom_function.php. login your wordpress admin.

  1. Choose ‘custom file editor’ under thesis options in left sidebar of the wordpress dashboard.
  2. Select custom_function.php file and click on edit selected file.
  3. Paste the above code and save it the visit your site.

To place the code in launch.php login your ftp.

  1. Select the path public_html/fourblogger.com/wp_content/theme/thesis_16/cusom/lib/functions/launch.php.
  2. Open the file by right clicking on the file.
  3. Paste the above code and save it the visit your site.

You should use any one way only.

To locate the banner right side of the header you have style the header banner ad. For this copy and paste the following code in custom.css file.

/* paste the code in  custom.css   */
.custom #header #header_ad {
float:right;
margin-top:-9em;
width:500px;
}

To paste the code in custom.css file

Choose ‘custom file editor’ under thesis options in left sidebar of the wordpress dashboard. Select custom.css file and click on edit selected file.

Paste the above code and save it the visit your site with  banner ad in header.

Header Banner ads

Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 41 comments… add one }

Leave a Comment

  • rob March 1, 2010, 10:54 PM

    i copied and pasted both codes, the banner is in the header but the second code did not move the banner to the rite? Any advice?

    Reply
  • Suresh March 2, 2010, 10:14 PM

    hai rob,
    In your custom function.php code you have missed to place div id="header_ad". once again copy and paste the code from fourblogger it will working fine.

    Reply
  • senseimatt March 7, 2010, 6:02 AM

    Love your tutorials. They are extremely helpful to move along the Thesis learning curve. Can this tutorial be used as an easy method of placing a graphic in the header? Does it need to be clickable to work?

    Reply
  • Pascal March 7, 2010, 6:38 PM

    Yes. You can add images in header using this tutorial.

    If you provide the link for image, yeah, it will be clickable. It is not hard to do.

    Reply
  • chino April 8, 2010, 11:03 AM

    i copied and pasted the codes above but nothing happens… what should i do?

    Reply
  • Suresh April 9, 2010, 2:36 PM

    hai,

    Give your site name otherwise i cant figure out the reason for why its not shown up in your site.

    Reply
  • Smodzy May 3, 2010, 7:05 PM

    Hi Shuresh,

    Great tutorial – it worked fine for me. Except for one thing – the image I in my header gets a border. Even though I pasted all your code, including border=”0″ in the custom_functions.php file.

    Do you have any idea what it could be? I have border:none in the customs.css file.

    Reply
  • Smodzy May 3, 2010, 7:10 PM

    Ah, sorry for asking – looked some more CSS up on the internet, and found a solution.

    Reply
  • venkat May 11, 2010, 9:25 PM

    How can we make the header ad appear on homepage only, I want to hide that ad on single posts.Can it possible if so plz explain

    Reply
  • Suresh May 12, 2010, 1:17 PM

    hai Venkat,

    In the above post replace thecustom custom_function.php code

    with the below code mentionrdin pastebin
    http://pastebin.com/XdLz6nTz

    and replace your ad within the div.

    Reply
  • Ryan May 16, 2010, 12:38 PM

    Very awesome video tutorial Suresh, by the way what software you used to make the video tutorial? Please tell me if you don’t mind :)

    Reply
  • Suresh May 16, 2010, 12:59 PM

    hai Rayn,

    Thanks.. We are using camtasia video editing software to make videos..

    You will get how to use camtasia software free ebook here..

    Reply
  • Sounds Fair May 24, 2010, 6:21 AM

    Pascal,
    Thank you, thank you, thank you. It took me a while to find you but thank god I did. The code was so easy to use and the video was easy to understand.
    Thanks once more.

    Reply
  • himanshu June 5, 2010, 9:26 PM

    it is showing a error in some line whenever i place the code in custom_function or lauch file. please help

    Reply
  • Suresh June 8, 2010, 3:08 PM

    hai himanshu,

    What error it shows.. tell me exactly… then only i can identify the problem which you are facing

    Reply
  • Barbara June 6, 2010, 3:27 AM

    I’ve spent more hours than I want to admit trying to get a widget to work in the banner for my needs; turns out it was better to use a widget for the search box and your method to put a small logo and clickable link in the banner. Thank you so much. Now if I can just figure out what the code for the search forces a 1/4 of white at the top of the banner, think I’ll be good to go!

    http://www.erickortzmd.com

    Reply
  • Suresh June 8, 2010, 4:01 PM

    hai Barbara;

    do the following in custom.css file

    1. change the ‘#logo a’ background image into ‘#header’
    background image
    2. add logo a {width:65%; height:120px;}and remove 943px
    3.change #header {height:125px;}
    4.change #header_ad{margin-top:-10em;} from -13px
    5.change #header_widget_1 ul.sidebar_list li.widget {top:35px;} from 55px

    and add the below line in custom.css file
    .custom #header_widget_1 ul.sidebar_list {padding-top:0em;}

    it will fine..
    This changes will remove white space above header.
    logo link 65% width clickable
    header ad and search box aligned in line..

    Reply
  • Barbara July 10, 2010, 1:52 AM

    Thank you…that did the trick. I had managed a design with that space but prefer not having it there. Much appreciated!

    Reply
  • Pascal July 12, 2010, 12:21 PM

    Double check your code

    Reply
  • Noel July 2, 2010, 4:13 AM

    Hello Pascal,

    Thank you, thank you, thank you!!! I just only stumbled on your site and have since followed and applied three of your tutorials. I especially liked this as it utilises my header space, so much so that I’d like to add another banner ad beside my first banner ad. How should I do that?

    Cheers,
    Noel

    Reply
  • aaslin July 17, 2010, 3:12 PM

    useful post,thanks and now a days very less posts from you?

    Reply
  • Pascal July 20, 2010, 10:57 PM

    Having lot of work done.

    Reply
  • blogger gurem July 21, 2010, 8:22 AM

    thanks to your post, i become litle bit understand about thesis themes

    Reply
  • Tinh July 28, 2010, 12:53 PM

    Nice tip and I will give it try with my theme. Thanks

    Reply
  • Sumit September 5, 2010, 1:18 AM

    Awesome it worked. Thanks a Lot

    Reply
  • mike September 11, 2010, 1:06 AM

    I would like to do this on my thesis based blog.

    I’m using thesis 1.8, will everything be the same with that version or should anything be different?

    Reply
  • mercadder November 9, 2010, 10:50 PM

    Hello, this “image” in the header can be a script type?

    Reply
  • mercadder November 9, 2010, 10:56 PM

    yes, I´ve tested and it´s working …

    Reply
  • Jay Wilson Jr. March 12, 2011, 10:29 PM

    Thank you for this great tut! Your blog is amazing!!

    Quick question: How do I remove the white area around the banner to make the black from my background show through on my blog?

    Thanks!

    Jay

    Reply
  • Me April 14, 2011, 6:20 PM

    Be careful of this!

    * paste the code in custom.css */
    .custom #header #header_ad {
    float:right;
    -------> margin-top:-9em; <--------
    width:500px;
    }

    Wouldnt work until I changed the value to: 0em, seemed to fall of the top of the page. all working and thankyou for the tutorial

    Reply
  • Legit SEO March 29, 2012, 2:16 AM

    Thanks for sharing this! My banner is working now :)

    Reply
  • John July 17, 2011, 3:20 PM

    Lovely tutorial. Finally one that worked well for me :D
    Tip: also can also embed your adsence code instead of banner url in the custom_function.php code between —

    Reply
  • esmus August 13, 2011, 4:50 PM

    Hello,
    I have done exactly what you said, but the ad banner appears just under the header logo, does not float right. I tried any way I know, but could not solve this problem. Could you please help me?

    Reply
  • Sorin September 12, 2011, 10:50 PM

    Hello,

    To add a 728/90px banner some solution?

    Thank you

    Reply
  • Suresh September 13, 2011, 9:26 AM

    hai Sorin,

    Use header widget width as 730px to add banner. Other wise place the ad code in custom_functions.php using header hook..
    thanks,

    Reply
  • Lindarx September 20, 2011, 7:15 PM

    Well hello again suresh,still having a trouble with the add banner .I added the code on custom functions and it appeared fine,right on my logo.After i add the custom css code it just goes away.On the loading it shows for just a fraction of second up.Anything i am doing wrong?

    Reply
  • Suresh September 21, 2011, 9:49 AM

    hai Lindarx,

    The css codes are not same for all sites. It will be changed according to the layout..
    In css code Just adjust the width of the widget and margin values to place the widget in right position..
    For css details adjustment check this. http://fourblogger.com/11-css-tricks-for-thesis-theme-customization/
    Thanks..

    Reply
  • Scott Dudley November 26, 2011, 9:56 AM

    First of all thanks for the brilliant tutorials.

    I am having problems with my header banner moving up sometimes and blocking off my advertising banner at the very top. I think it is because some people have things installed on their browser which appear at the top. In my CSS the top is set to 48px, but if people’s browsers have things showing up at the top of the page it does not move down with the rest of the site.

    You can see what I mean over at http://LowCostMarketingStrategies.com – it looks nice most of the time, but I have noticed that it is out of place and too high on other browsers.

    I need the banner to stay in same place relative to the rest of the header.

    My CSS code is:

    // CSS for header widget
    .custom .sidebar ul.sidebar_list {position: relative;}
    .custom #header_widget_1 ul.sidebar_list li.widget {position: absolute; display: block; top:48px; left:690px; width:468px;border:1px solid #ffffff}

    Thanks,

    Scott

    Reply
  • Nick February 27, 2012, 1:01 AM

    Worked great. I had code in there before that would put the ad up, but it would move all over the place depending on what browser you were using. This fixed everything. Thank you so so much!

    Reply
  • Kerala tour packages March 21, 2012, 5:29 AM

    Hello,
    I have done exactly what you said, but the ad banner appears just under the header logo, does not float right. I tried any way I know, but could not solve this problem. Could you please help me?

    Reply
  • avtar singh May 11, 2012, 8:30 PM

    dear sir , i am using twentyten theme , i want to add banner ad with logo pls help me my website is http://www.tazaaoffers.com

    Reply