How to Add Affiliate Banners in WordPress – Two Methods, Simple Steps

Last updated on October 21st, 2022 at 10:03 am

Using affiliate banners in WordPress and promoting other people’s products as an affiliate is one of the most popular (and lucrative) means of earning an income from your blog. In fact, the affiliate marketing industry is estimated to be worth over $12 billion (according to data published by SaaS Scout.)

However, as more and more people start using affiliate marketing as a side hustle, the more difficult it becomes to make your website stand out so that you, not your direct competitors, earn the affiliate commission.

If you want your affiliate links to get the clicks, you need to do more than just throw in some in-text links or a Buy Now button. Product displays can work well, but affiliate banners are one of my go-to methods to get more clicks and commissions. In this article, I’m going to walk you through why you need to use affiliate banners on your website, plus how to add them to your posts and pages easily.

What Are Affiliate Banners (and Why Should You Use Them?)

Affiliate banners are visuals that come in various sizes, designed to help you generate more sales (and earn more commissions) when you’re promoting other people’s products and services. Most merchants provide HTML code for banners that you can easily copy to add striking visuals to your website and generate more affiliate income.

Using affiliate banners is a great way to monetize your website. They’re an easy way to bring in extra cash, and you don’t need any special technical skills to set them up. While you can use text links within your blog posts to promote affiliate products, affiliate banners are much more eye-catching – like this banner below.

Benefits of Adding Affiliate Banners to Your Website

A study published by the Neilson Norman Group claims that visitors to your website read at most 28% of the words during an average visit. If you’re using in-text affiliate links, this statistic is worrying. Your links could be missed, meaning your earnings from affiliate marketing will be lower than if you use both in-text links and affiliate banners.

Humans process visual data a lot faster than words. Some statistics suggest that we process visual data 60,000 times faster than we process words. So, affiliate banners draw attention far better than text links do.

The most significant benefit of affiliate banners is that you don’t need to be an affiliate expert to be successful with using them – nor do you need any specialized skills. You can start earning from your website by adding banners to your existing posts. This means you will have a tremendous amount of flexibility in order to earn more money.

The great thing about affiliate banners is that you don’t even have to create them yourself. The merchants that you’re promoting do all the hard work of creating stunning banners, and all you have to do is copy the code they provide onto your website. It’s incredibly easy to get affiliate banners onto your website – there are two main methods that I’ll walk you through now.

Step-by-Step Instructions to Add Affiliate Banners to WordPress

To add affiliate banners to WordPress, you can use an ad banner plugin or the Custom HTML block in Gutenberg. Both methods work well and are easy to implement on your website. However, the Custom HTML block method requires you to manually add the block in each place you want to display your affiliate banner(s), making it slightly more time-consuming.

Method 1: Use a Banner Plugin (Recommended)

Banner or Ad plugins for WordPress make adding affiliate banners to your website really straightforward. Although many plugins have been designed to help with adding display ads, such as Google AdSense, to your website, most also have the ability to use custom HTML.

The biggest benefit of using a plugin to add affiliate banners to your website is that you can manage your affiliate banners within the plugin. You can also set your banners up to automatically display in various pre-configured locations and easily add new banners, remove old banners, or simply update the HTML code for an existing banner.

Step 1: Choose a Plugin for WordPress

There are plenty of WordPress plugins for adding banner code to your website. Some of the best include:

• AdRotate
• Ads by WPQuads
• Google Adsense & Banner Ads by AdsforWP
• Ad Inserter

In this tutorial, I’ll be using Ad Inserter, but you can use any of the available WordPress banner plugins to add affiliate banners to your site. The exact process may be a little different depending on the plugin, but most will work in a similar way.

Step 2: Install and Activate the Plugin

Ad Inserter is available to install from the WordPress repository, so installing the plugin is a simple matter of navigating to Plugins >> Add New and searching for “ad inserter” in the search box.

Click on the Install Now button and then, when the plugin has been installed successfully, click Activate.

Step 3: Grab the Affiliate Banner Code

Before you can add your affiliate banner(s) to your website using Ad Inserter, you’ll need to get the HTML code for the banner. Exactly where you find the HTML code will depend on the affiliate program you’re using. In the screenshot below, I’m using ShareASale, but most affiliate programs have a similar method of enabling you to get the banner HTML code.

Select the HTML code and press CTRL/CMD + C to copy it to your clipboard. Now you can return to your WordPress dashboard to add the affiliate banner in Ad Inserter.

Step 4: Add the HTML Code to Ad Inserter

Navigate to the Ad Inserter dashboard in WordPress. As you can see in the screenshot below, Ad Inserter allows you to add multiple banners or ads (each of the numbered tabs represents a separate banner or ad).

Paste the HTML code you copied in the previous step into the black code box. Use the visual code editor to preview how your banner will look. This will ensure that the code is pulling the banner from the affiliate site correctly.

You can then use the settings in the Manual tab below the code box to customize exactly where you want your banner to appear.

Ad Inserter supports an extensive range of display locations on your posts and pages, with the option to customize the location for specific posts and pages or exclude posts and pages.

The locations you can add your banners to include:

The locations available for posts and pages may vary depending on the theme that you’re using, but Ad Inserter includes a tool that allows you to check which locations are available in your theme.

The customization options also vary depending on the location you choose. For example, if you choose the Before paragraph location, you can specify which paragraph you want your banner to display before.

Once you’ve finished customizing the location and alignment of your banner, click on the Save Settings button just below the code box. This applies your code and settings and displays your affiliate banner in your chosen location.

Step 5: Check Your Site to See Whether the Banner is Displaying Correctly

The final step is to check your live website to make sure that your affiliate banner is displaying correctly. If you’re using a caching plugin like WPRocket or LiteSpeed Cache, you may need to clear the cache if you’re displaying the affiliate banner on a static page.

Method 2: Use Custom HTML Blocks in WordPress (No Plugin Required)

The second method of adding affiliate banners in WordPress is slightly more complex as you need to manually add blocks to each of your posts and pages in order to display your banners.

However, one advantage is that you can display your banners in your WordPress sidebars, which Ad Inserter doesn’t support. You can also take advantage of Gutenberg’s support for reusable blocks, allowing you to create a banner block once and reuse it in different locations.

Another advantage of using the Custom HTML blocks method is that you don’t need to use a plugin. Since plugins can impact the performance of your website, if you’re already using a lot of plugins, this method may be better for you.

Step 1: Choose the Location for Your Manual Affiliate Banners

When you’re using the Custom HTML block method of adding affiliate banners to your website, you can place them pretty much anywhere you want. In this example, I’ll be adding a banner to the bottom of a blog post, but you can add a custom HTML block in sidebars, headers, footers, and widget areas your theme supports.

Adding your banner to an area that repeats across your website, such as the footer or sidebar, is the easiest way to add an affiliate banner that’s relevant to all areas of your website. However, if you want to add specific banners on specific pages or blog posts, you should add the custom HTML block within the body of your post or page.

Step 2: Choose the Custom HTML Block from the Block Picker

In the Gutenberg editor, click the + icon to add a new block:

This will open the block picker. Type “HTML” into the search box to save time, and choose the Custom HTML block in the block picker.

Step 3: Get Your Affiliate Banner HTML Code

Head to your affiliate partner (e.g. ShareASale, Impact Radius, GetRewardful, etc.) and choose the affiliate banner you want to add to your post or page. Copy the HTML code for the banner.

The code should already contain your affiliate link, as in the example below (although I’ve hidden part of my affiliate link for privacy reasons.)

Step 4: Paste Your Affiliate Banner Code into the HTML Block

Go back to your WordPress page and paste the HTML code you’ve just copied into the Custom HTML block.

To check that the code is working correctly, click the preview button.

Step 5: Hit the Publish Button on Your Page or Post

Once you’re satisfied with where you’ve placed your affiliate button, you can publish or update your post or page. If you’re using a caching plugin, purge the cache before checking the live page of your website to make sure the banner looks right and is clickable. As well as checking the desktop view, you should also check how your banner looks on mobile devices, since more and more people are browsing websites on smartphones and tablets.

Key Considerations For Successfully Adding Affiliate Banners to Your Website

Affiliate banners are a great addition to your website, especially if you’re not using AdSense, AdThrive, Mediavine, or Ezoic to monetize your posts and pages. However, it’s important not to overdo it when adding banners to your site. It’s better to have one or two banner ads for affiliate products rather than a banner after every paragraph, as too many banners make for a bad reader experience.

Try to ensure that the banners that you’re adding are relevant to your audience. Nothing puts readers off more than being bombarded with adverts (because that’s essentially what your affiliate banners are) that they’re not interested in.

It can be tempting to add affiliate banners for products that will generate a high commission, but if it’s not something your readers are likely to buy, you’re not going to make a commission anyway.

Make sure that you choose appropriately-sized banners for your website, too. Most affiliate merchants will offer banners in a lot of different sizes, so you should be able to find one that fits the location you want to place it in. Don’t, for example, try putting a landscape banner in the sidebar of your page or a skyscraper banner in the middle of your blog post.

Alternatives to Using Affiliate Banners

The most obvious alternative to using affiliate banners is to use text links within your articles and pages. Contextual text links may generate fewer sales/commissions, but they still have an important place in your affiliate marketing strategy.

Adding CTA (call to action) buttons on your posts and pages is another important tactic that you can use alongside affiliate banners. Make your buttons stand out on the page, and use CTAs that make your readers want to click.

Finally, you can use product display plugins like Lasso, AffiliateX, and Affiliate Booster to showcase products that you recommend. This is particularly useful if you’re an Amazon Associate, as well-designed product display boxes and comparison tables are eye-catching and make it easier to generate sales/commissions.

Summing Up

Adding affiliate banners to your WordPress website is a great way to make your website more visually appealing without having to spend time and money on designing your own banners. Some affiliate marketing blogs make upwards of $100,000 a month from their content, and while not all of that income is likely to be affiliate commissions, it’s still a very lucrative business.

Affiliate banners are easy to add to your website. Whether you opt to use a plugin to manage your banner ads or prefer to use custom HTML blocks for a more personalized banner experience, it’s a quick process, meaning you can add banners to your website in a matter of minutes.

Frequently Asked Questions About Using Affiliate Banners in WordPress