Skip to content

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.

Affiliate banners in WordPress make it easy to get more clicks and commissions

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.

Ad Inserter Plugin to add affiliate banners in WordPress - get it on the WordPress repository for plugins


When choosing your plugin for adding affiliate banners in WordPress, ensure that the plugin you choose has been tested and is compatible with your version of WordPress.

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.

Get HTML banner code from ShareASale

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).

Add affiliate banner code in Ad Inserter to publish banners in WordPress

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:

  • Above header
  • Before post
  • Before content
  • Before paragraph
  • After paragraph
  • Before image
  • After image
  • After content
  • After post
  • Footer
  • Between posts
  • Before comments

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.

Ad Inserter has a range of locations where you can add affiliate banners in WordPress

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.

Set the location for banners in Ad Inserter

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.

Check the live site is displaying your affiliate banners in WordPress correctly

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.


In this tutorial, I’ll be demonstrating using the default Gutenberg editor in WordPress, but page builders like Elementor, Beaver Builder, and Divi also support adding custom HTML blocks to your posts and pages. If you’d like me to create a tutorial showing how to use custom HTML blocks in page builders, send me a request or tweet me on Twitter!

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:

Add a new block in Gutenberg

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.

Choose the custom HTML block in Gutenberg

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.)

Get the banner code for your affiliate banner

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.

Paste the HTML code into the custom HTML block in WordPress

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

Preview the code in the block

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.

Check the live page in desktop and mobile views

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.

Best Locations for Adding Affiliate Banners in WordPress

The best location for your affiliate banner really depends on the size of the banner you want to add to your pages and posts. Banners come in a variety of shapes and sizes, including wide landscape banners, square banners, and skyscraper banners (long and thin), and within the different shapes, you’ll find different dimensions.

Different sizes of affiliate banners

Quick Tutorial: How to get the HTML code of banners in ShareASale

In ShareASale, after you log in to your dashboard, hover over Links in the top menu and choose Get a Link/Banner in the drop-down menu.

Find banners for affiliates in ShareASale

On the next screen, click in the Merchant Search box to bring up the list of affiliate merchants you currently have an affiliate deal with. Either scroll or search to find the merchant you want to display a banner ad for.

Choose the merchant in ShareASale to get affiliate banners to add to WordPress

When the merchant page loads, click on the Banners option – this will bring you to the page with all the available banners. Simply click on the banner you want to use and the code will be displayed in a pop up window. If you don’t see the pop up, check that your browser or antivirus software isn’t blocking pop ups.

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

  1. How do you add an affiliate banner to a post or page?

    You can add affiliate banners to a post or page using a plugin or by adding custom HTML blocks to your posts and pages. Follow my step-by-step guides for each method to get your affiliate banners live on your website in less than 30 minutes.


    To add an affiliate banner to the sidebar of your website, you’ll need to use a custom HTML block. The process is pretty much the same as for adding an affiliate banner to your posts and pages with blocks, but instead of adding the block to the body of your article, you’ll need to open up the WordPress Customizer or your theme settings and add the HTML block to a sidebar widget or area.

  3. How do you add an affiliate banner in the header or footer of your website?

    As with adding an affiliate banner to the sidebar of your website, adding a banner to the header or footer can be done with custom HTML blocks via the Customizer or your theme settings.You can also add banners to the footer of your website using the Ad Inserter plugin. Simply choose the Footer option in the locations drop-down menu in Ad Inserter.

  4. Which is the best plugin for adding affiliate banners to your website?

    My favorite plugin for adding affiliate banners to your website is Ad Inserter. There are various ad display plugins available in the WordPress repository and from third-party marketplaces like Envato.Be careful when choosing a plugin to add affiliate banners to your site – make sure that the plugin has been tested with your version of WordPress and that it works with the version of PHP that your site is using. Taking this extra precaution reduces the risk of an ad plugin breaking your website.


    Absolutely. WordPress is a great way to get started with affiliate marketing. You don’t need any special skills to start an affiliate marketing website. However, you should choose your niche carefully and do your research before you launch your website.

Squirrly SPY

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 10

No votes so far! Be the first to rate this post.

Martyn Denial

Martyn Denial

I've been building websites with WordPress for over 10 years, and now I spend my days giving advice to others on how to make the most of WordPress for their websites. I'm also experienced in SEO and affiliate marketing, but WordPress is what I do best!View Author posts

Cookie Consent Banner by Real Cookie Banner