This tutorial was written by one our awesome forum ninjas – Kirstin Pauk.
This tutorial will guide you through setting up various types of ads on WooThemes. Some themes may need a little extra tweaking but it shouldn’t be too complex.
In this tutorial you’ll learn:
• How to ad in adsense or flash based ad codes
• How to insert an ad into the header
• How to add in image ads (alternate way) and add more ads to the sidebar
Most themes use 2 or 3 types of ads:
• 300×250 (sidebar)
• 125×125 (top and bottom – in the sidebar)
• 468×60 (currently Gazette only – in the header)
Part 1 – Using flash or adsense ads
Flash and adsense ads can’t be applied via the admin menu but it’s relatively easy to set them up.
- Make sure you’re using the latest versions of wordpress and of the theme itself
- All sidebar ads are located in the /ads/ folder.
- To insert your code, look at the coding examples below:
300×250 – Remove all the coding between the div commands:
125×125 (repeat the same for both the top and bottom ads)
ADD IN YOUR CODE HERE! ADD IN YOUR CODE HERE!
It’s as simple as that!
468×60 – You need to open header.php (this is for Gazette only!)
Find this code located at the bottom of header.php:
And simple remove the coding and add in your code as follows:
Part 2 – Adding an ad into the header
Let’s say you want to a 728×90 ad in the header:
Simply open up header.php and ad in your code in either the ‘top’ or ‘navigation’ sections. To center, simply place the ad in center commands:
ADD YOU CODE HERE!
This will push down the main navigation, and all you need to do to resolve this is alter the background image. You can read my other tutorial on how to do this here.
You can apply these techniques to any theme 
Part 3 – Alternate way to use image ads
Coding the ads yourself instead of using the admin menu is easier than you think. It also allows for you to add more if needed. For this example we’re going to add in 2 new ads into the top ads section. You need to open ads-top.php (although this will work for all the ad files).
The technique is the same as above but you substitute the ‘ADD YOUR CODE HERE’ with this code (make sure to change the link and image urls)
So you should end up with this:
That will give you 2 ads. To include more, simply copy the all 4 lines of code, and change the link and image urls to suit:
And it’s as simple as that. You can have as many ads as your require.
16 Responses to “Working with ads”
Thx for this handy tutorial -
As I’ve mentioned to other theme designers, allowing admins to input adcode with HTML, javascript via custom fields would be really helpful. Orbitz and many others offer code to their affiliates that allow for dynamic ads, such as drop-down menus, buttons, etc.
Its about time wordpress themes made it easy to include those – much more profitable.
Great tutorial. Came in handy. Thanks Woo Ninjas.
@ Steven, it’s actually much quicker to hard code than do do the extensive changes to the admin menu as you still then need to add in the coding – once you know where to put the ads into the code, it becomes much easier to do
We’re using Newspress 1.0 and are unable to upload a new image for one of our 125×125 block ads. How do we do that?
Great little tutorial, thanks. On the topic of integrating advertising with WooThemes: I’m interested in adding in ads between posts. For instance, if I wanted Adsense ads to show up between every 4th post. Any chance you could add a small blurb about this to this tutorial? I’ve done it before with plugins, but I’d love to know how to do it myself with, for instance, FreshNews, without having to use a plugin
I’ll second that for adding Adsense ads into the posts, would love to see some more information on how to do this.
I’m totally new to WordPress, so you’ll have to bear with me. (I’ve created websites in html, so I’m not completely green.) I recently purchased the FreshNews template and am getting it ready for launching.
I read through the above tutorial but I’m having trouble getting the Google AdSense spot to show up in the 300×250 sidebar. In the ads-300×250.php file, I replaced the code as instructed above.
http://www.thethirdplanet.org/blog
Although it isn’t mentioned above, I’m wondering if I also have to delete the information in the FreshNews Options in the WordPress dashboard related to ads to make the Google ad show up?
Thanks for this tutorial and I too echo the last 2 commentors’ request for more AdSense capability or more tutorials on this subject. Cheers!
Linda – Please post in our forum.
Thanks, I’ve now posted in the forum.
Has anyone figured out how to post adsense in between posts… like every 4th post like others have suggested?
@Joseph Fidler: You could include a counter to do that.
In the template file, look for
Change it to:
Then, at the location you want the ad to appear, include:
Code to include Adsense goes here
Am I missing something? Your suggestion seems to be missing information.
@Joseph: it is missing information, because this part of the website doesn’t allow me to add (php) code. I followed up with a message requesting you to create a topic in the forums – there I CAN add code – but that message never appeared here.
I’m not sure about other Themes but the instructions below does not seem to be possible with TypeBased?
Part 2 – Adding an ad into the header
Let’s say you want to a 728×90 ad in the header:
Simply open up header.php and ad in your code in either the ‘top’ or ‘navigation’ sections. To center, simply place the ad in commands:
ADD YOU CODE HERE!
This will push down the main navigation, and all you need to do to resolve this is alter the background image. You can read my other tutorial on how to do this here.
You can apply these techniques to any theme
sorry, but can you tell me where to post the adsense coding? do i go into my themes ad folder?