How To Display Ads In Your WordPress Sidebar

Update: We have published a WordPress plugin named Simple Image Link which provides a simple way to add an ad on your sidebar.  You may want to check this out.

A lot of new bloggers want to include advertising on their site, but find the idea of adding an advertisement to their sidebar daunting. If your blog runs on WordPress software, it’s a simple matter of using your text widgets to show ads. In this post, we’ll show you how.

There are a number of WordPress themes readily available that support ads, and make managing them relatively easy and pain free (at least that’s what they say). But, no doubt, you have already invested time choosing and customizing/tweaking your current theme.

Rather than change designs now, a simple approach is to use the standard WordPress Text Widget to show image ads. Once you have had experience with displaying ads, you can then decide whether it is worth changing your theme to accommodate the ads.

What is an ad?

When you sign up for ads, typically via an affiliate program, you will be provided with a username and password which will allow you to login and select the ads you wish to run on your blog.

Nearly all affiliate programs will provide the HTML code that you need to add to your blog. All you will need to do is to copy this HTML code to the clipboard and then paste it into a text widget.

If we walk through an example, you’ll see it really is that simple.

For an image based ad, the HTML will be of the form:

<a href=”…”><img src=”…” /></a>

Where:

<a href=”…”>…</a>

Is the link which takes your reader to the Web site of the product/service being advertised.

and <img src=”…” />

Is the reference to the image to be displayed, which is taken from the affiliate program’s Web site. You will not need to upload any images to your blog.

I read Raymond Chen’s blog The Old New Thing. Now Raymond has written a book based on his blog, aptly called The Old New Thing, and has an image of the book on his blog, which is linked the book’s details on Amazon.

I will use this as an example, for which the HTML code is:

<a href=”http://www.amazon.com/gp/product/0321440307?ie=UTF8& tag=tholneth-20&linkCode=as2&camp=1789&creative=9325& creativeASIN=0321440307″><img border=”0″ src=”http://images.amazon.com/images/P/ 0321440307.01._AA_SCMZZZZZZZ_V33963393_.jpg” /></a>

NOTE: A few extra spaces have been added to the URL values so that they wrap nicely within this post – just so you know.

The URL has two parts. Everything up to the question mark i.e. http://www.amazon.com/gp/product/0321440307 – is the link to the book’s details on Amazon; everything after the question mark are name/value pairs which contain Raymond’s affiliate information and how to display the information about the book.

The URL to the book’s details is:

http://www.amazon.com/gp/product/0321440307?ie=UTF8& tag=tholneth-20&linkCode=as2&camp=1789&creative=9325& creativeASIN=0321440307

The URL to the image is:

http://images.amazon.com/images/P/ 0321440307.01._AA_SCMZZZZZZZ_V33963393_.jpg

How to put an image ad into a text widget

The simplest thing to do is to display one ad per text widget.

Within the Design – Widgets section of your WordPress Dashboard, add a new Text Widget.

  • Do not enter a title for the Text Widget (the single line edit box at the top).
  • Enter the ad’s HTML code into the main edit box of the text widget.

Saving the changes, will show the following within your blog:

To center the image within the text widget

To center the image within the text widget all you need do is, within Design – Theme Editor section of your WordPress Dashboard, add the following to your theme’s style sheet.

.textwidget { text-align: center; }

The text widget will now appear with the image centered.

One disadvantage of this approach is that all text widgets will be centered. So if you are using text widgets to display something other than ads which you do not need centered, then you will need to differentiate text widgets which display ads from those which don’t display ads.

You can do this by enclosing the ad’s HTML within a DIV tag as follows:

<div class=’ad’>…</div>

So the text widget now looks like this:

Within the theme’s style sheet add the following at the end:

.ad { text-align: center; }

How to include two ads per text widget

If you want to display two ads per text widget you will most likely want to center this both horizontally and vertically.

You do this by enclosing the HTML code for the two ads within the text widget as follows:

<table class=’ad’><tr><td>…</td><td>…</td></tr></table>

Replacing … with the HTML for the 2 ads required:

The ads will appear as follows:

You can force the ads to be aligned horizontally and vertically by adding the following to your theme’s style sheet:

.ad { width: 100% }
.ad tr td { text-align: center; vertical-align: middle; }

The ads will be aligned as follows:

Google and Advertising

Google’s PageRank flows from blogs and Web sites via links. This means your PageRank benefits when you receive links from sites with a higher PageRank, and sites you link to will benefit from your PageRank.

As a result, many sneaky webmasters began buying and selling links to manipulate search rankings. In an attempt to curb this practice, Google made the decision that all paid links should be disclosed.

The ads you are running are links, and since the advertisers are paying you to have the link on your blog, you must describe the ad links as “nofollow,” this tells Google to not consider the link for the purposes of calculating its PageRank. If you don’t abide by this rule, your blog will be penalized; it may even be removed from the search results.

Adding “nofollow” to ad links

The easiest way to disclose your link is by adding the text rel=”nofollow” to the link.

So the Amazon link to Raymond Chen’s book on Amazon becomes:

<a rel=”nofollow” href=”http://www.amazon.com/gp/product/0321440307?
ie=UTF8&tag=tholneth-20&linkCode=as2&camp=1789&creative=9325&
creativeASIN=0321440307″><img border=”0″ src=”http://images.amazon.com/images/P/
0321440307.01._AA_SCMZZZZZZZ_V33963393_.jpg” /></a>

You may need to add rel=”nofollow” to any HTML code you receive via affiliate programs.

Wikipedia has more information on nofollow.

128 Responses to “How To Display Ads In Your WordPress Sidebar”

  1. Asking questions are truly nice thing if you are not understanding
    anything completely, however this article gives fastidious understanding yet.

  2. Sk Palash says:

    This information is useful. I tried my website http://www.techurworld.com

  3. Excellent pieces. Keep posting such kind of information on your site.

    Im really impressed by your site.
    Hey there, You have performed a great job.
    I will definitely digg it and in my view recommend to my friends.
    I am confident they’ll be benefited from this site.

  4. Thorunn says:

    How would I add these on top of my banner?

  5. Hector Chikomba says:

    hi what if i want to put my own ads, not ones sourced from amazon or google

  6. When some one searches for his required thing, so he/she
    needs to be available that in detail, therefore that thing is
    maintained over here.

  7. Jam Play says:

    Hi there, just became alert to your blog through Google, and
    found that it is really informative. I’m going to watch out for
    brussels. I will be grateful if you continue this in future.
    Many people will be benefited from your writing.
    Cheers!

  8. Does your site have a contact page? I’m having problems locating it but, I’d like to shoot you an
    e-mail. I’ve got some recommendations for your blog you might be interested in hearing.

    Either way, great blog and I look forward to seeing it improve over time.

  9. Heya i’m for the primary time here. I came across this board and I to find It truly useful & it helped me out much. I’m hoping to give one thing back and aid others like you aided me.

  10. Thanks for sharing such a good thinking, article is
    nice, thats why i have read it fully

    My blog post; angry birds epic hack

  11. Pycmenthe says:

    After I originally left a comment I appear to have clicked the -Notify me when new comments are added- checkbox
    and now each time a comment is added I get 4 emails with
    the exact same comment. There has to be a means you are able
    to remove me from that service? Cheers!

  12. phentermine says:

    This info is worth everyone’s attention. How can I find out
    more?

  13. Hellpful іnformation. Fortunate me I fοund your site unintentionally,
    and I’m shocked wɦy thiѕ accident didn’t toօk place in advance!

    I bookmarked it.

    Also visit mƴ website: ambience wordpress theme review

  14. I tend not to leave a comment, but after looking at a ton of comments on this page How to Put Ads On Your WordPress Blog
    | BlogWell. I actually do have 2 questions for you if you
    tend not to mind. Is it just me or does it look as if like
    a few of these responses come across like they are written by brain dead folks?
    :-P And, if you are writing on other social sites, I would like to follow you.

    Could you list of all of all your public sites like your Facebook page, twitter feed, or
    linkedin profile?

    my webpage; Orlando Bathtub Refinishing

  15. magnificent issues altogether, you just received a new reader.

    What could you suggest in regards to your submit that you
    just made a few days ago? Any positive?

  16. free hosting says:

    Hey there, I think your site might be having browser
    compatibility issues. When I look at your blog in Chrome,
    it looks fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up!
    Other then that, terrific blog!

  17. Terrence says:

    Howdy, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot of spam remarks?
    If so how do you protect against it, any plugin or
    anything you can advise? I get so much lately it’s driving me insane
    so any support is very much appreciated.

  18. Hello, just wanted to tell you, I enjoyed this article. It was practical.
    Keep on posting!

  19. Howdy would you mind sharing which blog platform you’re working with?

    I’m looking to start my own blog soon but I’m having a tough time choosing between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design seems different then most blogs and
    I’m looking for something unique. P.S
    My apologies for getting off-topic but I had to ask!

  20. This is very interesting, You’re an overly skilled blogger.
    I have joined your rss feed and look forward to looking for more of your magnificent post.
    Additionally, I’ve shared your website in my social networks

  21. I have read so many articles or reviews about the blogger lovers but this paragraph is
    truly a fastidious piece of writing, keep it up.

  22. Workshop on Modeling Autonomic Communications Environments, Dublin, Ireland, October 25–26.
    You will need tto browse through many companies to choose the one that suits your need, liking and budget perfectly.
    Currently, with rivalry becoming more complicated plus the need to
    be observed becommes imperative, just about every firm desires to create
    a successful web-site that won’t only show its goal, butt is also exceptional inn every single feature and gives
    a professional representation.

  23. I know this if off topic but I’m looking into starting my own weblog and was wondering what all is needed to get set up?
    I’m assuming having a blog like yours would cost a pretty penny?

    I’m not very web smart so I’m not 100% sure. Any tips or advice
    would be greatly appreciated. Appreciate it

  24. You are so cool! I don’t suppose I’ve read something like that
    before. So wonderful to discover somebody with a few genuine thoughts on this subject matter.
    Really.. thank you for starting this up. This site is one thing that is required on the internet, someone with a little originality!

  25. We are a group of volunteers and opening up a new scheme in our community.
    Your website provided us with valuable information to focus on. You have done a remarkable job and our whole community will be thankful to you.

  26. For the reason that the admin of this web page is working, no
    doubt very soon it will be well-known, due to its
    feature contents.

    my web blog :: Valentine Quotes

  27. Wonderful publish. I’m checking regularly the following weblog using this program . satisfied! Particularly beneficial information particularly the continue sections :) We take good care of such information a lot. I’m trying to find this particular details for a long period.. email newsletters Thanks and associated with chance.

  28. discover here

    How to Put Ads On Your WordPress Blog | BlogWell

Leave a Reply