WooThemes

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:

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.