Maria’s Guides

Instructions for using the AdRotator plugin to generate random ad images with links.

I’ve been wanting to do this forever. In fact, it was the first thing I explored when I started using WordPress late last year. Unfortunately, I didn’t have enough understanding of how plugins and theme files worked to get anywhere.

Things are different now. I know what I’m doing. And this particular task is quite simple, as you’ll see here.

The Goal

My goal was to be able to display small advertising images at the top of the navigation bar. The image would appear randomly from a pool of images and, when it appeared, it would be associated with a specific URL. When the image appeared, the site visitor could click the image to go to a Web site or page.

I wanted to use this for wickenburg-az.com, a site I spend an awful lot of time working on with no compensation. The idea was to charge a nominal fee to add an image to the pool for a month. The money I collected would cover the cost of running the site.

Keep in mind that I could use any size image and place it anywhere in the header, sidebar, or footer. I wanted a 170 x 120 pixel image at the top of the sidebar. (I already run a strip of Google text ads at the bottom of the page, as I do here. I think too much advertising on a Web site is extremely obnoxious. But how much is too much when you have bills to pay?)

The Plugin

I won’t go into detail about my search for the plugin. It was neither long nor exciting. I wound up with AdRotator by Angsuman Chakraborty, which was really designed to work with Google AdSense and other prepacked blog advertising tools. But as I read the comments for the plugin’s description, I was assured that it would do what I needed to do.

But how do I use it? The User Manual was difficult to find. It wasn’t very user-friendly, either. (No offense to the plugin author. Frankly, I think that every programmer should team up with a tech writer to get documentation written. Programmers program. Writers write. Programmers don’t usually program and write — although an exception does come to mind.)

So I decided to write up a quick How To piece that would explain how to use AdRotator to do just what I wanted it to do. This isn’t AdRotator documentation. It only explains how to use the plugin for one particular task.

Also, these instructions don’t explain every single step in minute detail. If you want that kind of explanation, buy a Visual QuickStart Guide. Instead, these instruction assume you have already mastered the basics of using your image editing software, an FTP client, a text editor, and WordPress.

Create the Ads

First, use image editing software and your FTP program to create and upload the ad images.

1. Decide on an ad size based on where you plan to place the ads. I used 170 wide by 120 tall so it would fit in the sidebar column of my theme (modified Connections).
2. Use your favorite image editing software to create each image in the desired dimensions.
3. Save the images as GIF, JPEG, or PNG format files with the appropriate file name extension.
4. Use your favorite FTP client to upload the images to a folder within your WordPress wp-content folder. I created a folder called ads (real creative, huh?) and put them there. For obvious reasons, the folder’s permissions must be set so its contents are readable.
5. Put away your image editing software; you’re done with it for now.

Install and Activate the Plugin

To use any WordPress plugin, you must download it, install it, and activate it.

1. Download the plugin. This was pretty challenging, since I had a hard time finding a link to it. You can find a link on this page or simply click Download the plugin.
2. Use your favorite FTP client to upload the AdRotator.php file to your plugins directory inside your wp-content directory.
3. Go to the Plugins adminsitration panel in WordPress and activate the AdRotator plugin.

Create the Reference File

Now comes the part that seems to confuse most people (according to the comments). You need to create a plain text file that includes HTML for displaying the ad graphics with links to their URLs.

1. Fire up your favorite text editor. Do not use a word processor like Microsoft Word! I use TextWrangler, which I can’t say enough nice things about.
2. Create a new text file.
3. For each ad/URL combination you want to include in the pool of ads, create a line in the text file that includes the following code:

   <a rel="external nofollow" href="http://advertiserurl.com" title='advertiser name or slogan'><img src='http://yoursite.com/wp-content/yourimagefolder/imagefile.jpg' border="0" /></a>

   Of course, you’ll substitute real URLs and text for what is shown above. A real example from my setup would be:

   <a rel="external nofollow" href="http://www.flyingmair.com" title='Helicopter Tours and Charters'><img src='http://www.wickenburg-az.com/wp-content/ads/flyingmair.jpg' border="0" /></a>

4. Save the file with a Web-friendly name and the .txt file extension. In my example, I named it ads.txt (not very creative).
5. Use your favorite FTP software to upload the file to the wp-content folder in your WordPress installation.

Reference the Ads

Now you need to reference the AdRotator plugin in the theme file in which you want the ad to appear. Normally, this will be header.php or footer.php (for banner ads) or sidebar.php (for ad boxes or towers).

1. Open the theme file in which you want to reference the ad.
2. Include the following code exactly where you want the ad to appear:

   <?php echo getad('adfilename'); ?>

   Of course, you’d replace adfilename with your file name excluding the .txt extension. So in my example, it would be:

   <?php echo getad('ads'); ?>

3. Save the theme file you edited.

Check Your Work

That’s all there is to it. To check your work, display any blog page that uses the theme file you modified.

If you’re great at following instructions and I didn’t make any mistakes in the instructions here, it should work fine.

If you’re human (like I am), you’ll have to fix a number of tiny boo-boos you made along the way. The mistakes I made include wrong image URL (duh) and incorrect formatting (theme-dependent). I also made some ugly images the first time around and had to make new ones that looked better. I’m a writer, not an artist.

If you make some errors and your fixes don’t seem to be working, clear your browser’s cache. Then reload a page. It should be okay.

If you want to see how mine came out, visit http://www.wickenburg-az.com/.

Tips

A few tips for making advertisements less painful for site visitors:

• Keep image file sizes small. I recommend less than 20K, but definitely less than 100K.
• If the ad image is textual and you’re placing it on a colored or patterned background, consider saving the image as a GIF with transparency.
• Animate GIFs look cool if properly done. Unfortunately, I can’t make one that isn’t terribly obnoxious.

And one tip for making advertisements more painful:

You can create multiple txt files, each with its own lists of images and links, and reference each one in a different place on your blog. This makes it possible to combine header, footer, and sidebar advertising on one site. Just don’t expect me to visit often; I really do hate ads.