How do I add a banner ad to my site?

First off, congrats on getting an advertiser or sponsor for your Web site. That’s always a nice thing and based on what you said there aren’t any metrics to achieve either so there’s no worry about having your traffic fluctuate over the advertising period. On the down side, now you need to figure out how to add the advertisement to the site!

There are a zillion plugins for WordPress and some of them will accomplish what you seek, but since I’m generally plugin averse (for security and reliability of your site) let’s look at a more direct path by using what’s know as a widget. Widgets are like little boxes of content that add all sorts of functionality to your site, including latest posts, a list of categories, and more. On my site, widgets help me manage the sidebar, the text at the very bottom of the page, etc.

This process is a bit complicated, so bear with me on this. The first step is to upload the banner graphic to your WordPress blog. To do that, choose “Add New” from the “Media” tab:

Now you can just drag and drop your image onto the page. Once it’s uploaded, you’ll see an “Edit” button adjacent:

Click on “Edit” and you’ll see the detailed view of your image. In my case, this would make a bad banner; your image will have different dimensions!

What you care about is the File URL in the grey box. But we’ll come back to that.

Now let’s pop into your Widget area. That’s done by choosing Widgets from the Appearance menu:

Now the screen will be split into two areas. On the left will be the type of widget elements you can work with, and the right side will show which widgets you current have active. On my site, for example, the set of widget areas looks like this:

Notice the conveniently labelled “Ads Above Header“. Hopefully you have a similar widget on your site too!

Armed with that, click the tiny arrow adjacent to open it, and if it’s empty, you can drag a TEXT widget area onto it to create a block of text where you can drop HTML code. The Widget areas on my site include these:

You can see the “Text” widget area. Once I drag that onto the “Ads Above Header” widget, it looks like this:

Good. All the hard part’s done. Now let’s assemble what you need, all of which you’ll type directly into the Content box on your new widget. You’ll want to know the destination URL for people’s clicks on the banner, the File URL from the banner graphic you already uploaded, and the height and width of the image. 728 x 90 is a common banner dimension, for example.

Here’s the HTML code you can use to add it to your site:

In this example, you’ll need to replace everything in red. Pay super close attention to the quotes too: if the destination URL is quoted, don’t add a second set of quotes as that’ll break things. You should also have no spaces within quotes. Height and width should end up looking something like height=”90″ width=”728″.

Click on the blue “Save” button and reload your home page in a different browser tab. The ad should show up and if you click on it, you should go to the destination page! Not too bad, you hacker, you!

Now, if it doesn’t work, if you don’t have an “Ads Above Header” widget, or if you don’t have permission to access this area on your blog, then you’ll need to have your Web admin or webmaster help with this task. They’ll want the exact same information, however, so you can still upload the banner graphic and then send them the target URL, image file URL, company name info and height & width numbers.

Good luck and be careful! If things go super wonky, you can always delete the new widget area with the “Delete” link on the bottom too!

Disclaimer: You’re on your own with this tutorial. If you aren’t confident, don’t try what I outline above. If you do these steps and it doesn’t work, it’s your webmaster who will need to help you fix it, not me. This is just for entertainment and educational purposes, natch.

The post How do I add a banner ad to my site? originally appeared on Ask Dave Taylor.