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.
- Choose ‘custom file editor’ under thesis options in left sidebar of the wordpress dashboard.
- Select custom_function.php file and click on edit selected file.
- Paste the above code and save it the visit your site.
To place the code in launch.php login your ftp.
- Select the path public_html/fourblogger.com/wp_content/theme/thesis_16/cusom/lib/functions/launch.php.
- Open the file by right clicking on the file.
- 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..
Related Tutorials:
- How to Add Rotating Banner Ads in Sidebar of Thesis Theme
- How to Add Google Translator in Header of Thesis Theme
- How to Add Social Bookmarking Icons in widgetized Header of Thesis Theme
- How to Place Ads Box Before The Post Title in WordPress Thesis Theme?
- How to Place Your Ads Inside the Post of Thesis Theme?
{ 41 comments… read them below or add one }
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?
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.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?
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.
i copied and pasted the codes above but nothing happens… what should i do?
hai,
Give your site name otherwise i cant figure out the reason for why its not shown up in your site.
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.
Ah, sorry for asking – looked some more CSS up on the internet, and found a solution.
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
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.
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
hai Rayn,
Thanks.. We are using camtasia video editing software to make videos..
You will get how to use camtasia software free ebook here..
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.
it is showing a error in some line whenever i place the code in custom_function or lauch file. please help
hai himanshu,
What error it shows.. tell me exactly… then only i can identify the problem which you are facing
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
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..
Thank you…that did the trick. I had managed a design with that space but prefer not having it there. Much appreciated!
Double check your code
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
useful post,thanks and now a days very less posts from you?
Having lot of work done.
thanks to your post, i become litle bit understand about thesis themes
Nice tip and I will give it try with my theme. Thanks
Tried Hard to Implement it in my blog @ http://www.irisholidays.com/blog. However the image is not appearing and I am getting an error around that function. How to do this. Can you please help?
Awesome it worked. Thanks a Lot
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?
Hello, this “image” in the header can be a script type?
yes, I´ve tested and it´s working …
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
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
Thanks for sharing this! My banner is working now
Lovely tutorial. Finally one that worked well for me
Tip: also can also embed your adsence code instead of banner url in the custom_function.php code between —
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?
Hello,
To add a 728/90px banner some solution?
Thank you
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,
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?
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..
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
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!
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?