How to add sticky floating ad in WordPress

In this article, I will show you how you can add a bottom sticky footer Ad to your Wordpress website.

Sticky ads in Adsense perform better for site owners as the chances of ad click on this type of ads increases. so, the overall Click through rate, impression, and earning improve.

In fact, many big websites, news publishing house uses these footer sticky ads to boost their Adsense revenue.

So, let’s understand what is sticky ads, examples of sticky ads, and how you can implement this on your Wordpress website.

What is a Sticky Ad?

As the name suggests Sticky ads are ads that stick to a certain position on the website despite users scrolling through the page. In this way, the sticky Ads get better exposure and draw the attention of the visitors.

You can also get the most Ad impression in this sticky ad. There is already a sticky ad functionality in the auto ads settings of Adsense called “anchor Ads“.

But we can’t customize it and display the ads according to our own choice. That’s why in this article I will show you the easiest way to add the sticky footer ads in Wordpress.

Some people also called it bottom sticky ads or floating ads.

Users can easily dismiss the ad shown by clicking the cross button above the ad. In this way, you will get more earnings without hampering the user experience that much.

Here, One thing to note is that don’t use any clickable items above these ads and it must be separate from the rest of the content. You can check the Adsense Guidelines on sticky ads here.

Adsense Guidelines for Sticky Ads

  • Don’t overload your page with ads. You need to ensure that all ads, including sticky ads, should take less than the amount of content on the viewable screen or viewport.
  • Vertical sticky ads must never overlap or underlap any other page content.
  • The ad should never come too close to the content, navigational site functions (including scrollbars), or another ad.
  • Any ad implementation must provide clear differentiation between ad and content.
  • Horizontal sticky ad units are not allowed to float away from window edges or follow the cursor.
  • Horizontal sticky ad units are not allowed to float away from window edges or follow the cursor.

To add the bottom sticky ad in Wordpress, follow the below steps

Step-1: Login to your Adsense dashboard and create a responsive Display ad unit.

Step-2: Now copy publisher id and data ad slot code and replace it in the below code.

<div class='sticky-ads' id='sticky-ads'>
<div class='sticky-ads-close' onclick='document.getElementById("sticky-ads").style.display="none"'><svg viewbox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>
<div class='sticky-ads-content'>

<ins class="adsbygoogle"
     style="display:inline-block;height:70px;width:100%;line-height:70px;"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
<style>
.sticky-ads{ position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; }.sticky-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } .sticky-ads .sticky-ads-close svg { width: 22px; height: 22px; fill: #000; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px;</style>

Step-3: Now Go to Appearance > theme editor > Footer.php file and search for </body> tag.

Add sticky floating ad in WordPress

Step-4: Paste the code just above it and update the file.

Now the sticky footer Ads will be shown on your Wordpress website. You can try opening the webpage in incognito mode if it is working or not.

Video Guide

YouTube video

If you don’t want to edit the theme code then you can use a code management plugin that lets you add codes in the header and footer section.

Header-Footer-Code-Manager-WordPress-plugin-WordPress-org

For this, I prefer to use the “Header Footer Code Manager” plugin by “99robots”. It is a free code management plugin in Wordpress.

you can also set display rules to this code, like show only in desktop or mobile, load only in homepage or post page, etc.

If you are using the Pro version of the Kadence theme then you can paste the code in the “Header/Footer Scripts” section in the customizer.

You can enable this function by Going to the Appearance > kadence.

Kadence-header footer script manager

By the way, the Kadence theme comes with a lot of unique features and you can easily customize your Wordpress website.

Here are some of the Kadence theme tutorials [Video], you may be interested in:

You can hide the sticky footer ad from the homepage of your Wordpress website by blocking the loading of the ad code.

So, for this, you can use a code manager plugin mentioned above or an Adsense manager plugin like Adinserter on your website.

How to hide sticky footer ad in homepage

Here, paste the code in any of the blocks and set it to the Post page only or you can check multiple options here.

Now set the location to the footer and keep the alignment to the center as shown in the above image.

Now save the code and the sticky footer ad will only show on the Post page only and will not load on any other pages. So, in this way you can further customize the loading of the ad code.

Conclusion

I hope you have successfully added the sticky footer ads on your Wordpress website. If you have any trouble during this process or any doubts feel free to ask me in the comment section.

Also, tell me if the sticky ad improves your click-through rate(CTR) or not.

Don’t forget to Subscribe to our YouTube channel for more Tutorials like this.

Similar Posts

13 Comments

  1. How to hide this sticky ads on home page?

    1. For this, you have to use a code management plugin that allows you to load the script on a specific page. Like the Header footer code manager given in the article. Or you can use the ad inserter plugin to load ad codes on specific pages Like Only post page, homepage, etc.

  2. Afer Philip says:

    OK so I’ve read through your tutorials. I tested it and it works so perfectly.
    Now what if I want to display more than one ads on the sticky footer
    How will I do that

  3. Hi Padhi, i try to use step with Adinserter and work perfectly. Thanks

  4. Chetan Patel says:

    without close footer sticky add my email par send now plz

      1. Chetan Patel says:

        sticky add work karti hai lekin usmein close wala button hota bina close button ke sticky add chalana hai wordpress par

  5. How do I show it also on desktop? It only shows on mobile.

      1. Hi, had server-side device detection set to mobile only on ad inserter. Using only client side device detection fixed the problem. Thank you!

Leave a Reply

Your email address will not be published.