This theme tutorial applies to the following themes:

All Themes

Working with ads

Posted by Magnus Jepson on 29 Sep 08

<br />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.

  1. Make sure you’re using the latest versions of wordpress and of the theme itself
  2. All sidebar ads are located in the /ads/ folder.
  3. To insert your code, look at the coding examples below:

300×250 - Remove all the coding between the div commands:

<div class="mpu_banner>

ADD IN YOU CODE HERE!

</div>

125×125 (repeat the same for both the top and bottom ads)

<div class="ads">

	ADD IN YOUR CODE HERE!

	ADD IN YOUR CODE HERE!

</div>

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:

		<div id="topbanner">

			<?php

				// Get banner code //
				$banner_img = get_option('woo_banner_image');
				$banner_url = get_option('woo_banner_url');

			?>

			<a <?php do_action('woo_external_ad_link'); ?> href="<?php echo "$banner_url"; ?>"><img src="<?php echo "$banner_img"; ?>" alt="" /></a>

		</div>

And simple remove the coding and add in your code as follows:

		<div id="topbanner">

ADD IN YOUR CODE HERE!

		</div>

Part 2 - Adding an ad into the header

Let’s say you want to a 728×90 ad in the header:

<br />

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:

<center> ADD YOU CODE HERE! </center>

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)

<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>

So you should end up with this:

<div class="ads">

	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>

	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>

</div>

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:

<div class="ads">

	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>

	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>

</div>

<div class="ads">

	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>

	<a  href="LINK URL"><img src="IMAGE URL" alt="" class="last" /></a>

</div>

And it’s as simple as that. You can have as many ads as your require.

9 Comments For This Post

  1. Steven

    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.

  2. Miguel Reyes

    Great tutorial. Came in handy. Thanks Woo Ninjas.

  3. Kirstin Pauk

    @ 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 :)

  4. drnoe

    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?

  5. Make Design, Not War

    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 :)

  6. Rowan Gillson

    I’ll second that for adding Adsense ads into the posts, would love to see some more information on how to do this. :)

  7. Linda Farmer

    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!

  8. Magnus Jepson

    Linda - Please post in our forum.

  9. Linda Farmer

    Thanks, I’ve now posted in the forum.

Leave a Reply

About WooThemes

WooThemes is a project started by three respected designers - Adii, Magnus Jepson and Mark Forrester - whom all share one thing: their passion for WordPress. All of the themes available on WooThemes are 100% unique and we can assure you that you won’t find similar CMS solutions elsewhere for any other platform.

We pride ourselves not only in the quality of our themes releases, but also that of our support & customer service. Our ultimate aim is to build a community of passionate WooThemes users, where future themes will be influenced by our userbase.

We truly love WordPress and after using any of our themes, you’ll not only love WordPress, but you’ll love WooThemes as well!

Sign up to our newsletter

If you’d like to stay updated with all our latest product offerings and releases, please complete the form below and we’ll send you an e-mail every now and again with all the latest WooThemes news.