In this article, I will show you how to add a bottom sticky footer ad to your WordPress website.
Sticky ads in AdSense perform better for site owners because users are more likely to see them and click on them. This can lead to an increase in click-through rate (CTR), impressions, and earnings.
Many big websites and news publishing houses use footer sticky ads to boost their AdSense revenue.
Sticky Ads: What They Are, Examples, and How to Implement Them 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 regardless of how far down the page the user scrolls. This gives sticky ads more exposure and makes them more likely to be seen by visitors.
You can also earn more ad impressions with sticky ads. There is already a sticky ad feature in the Adsense auto ads settings called “anchor ads.” However, anchor ads cannot be customized or displayed according to your preferences. That’s why this article will show you the easiest way to add sticky footer ads in WordPress.
Some people also call sticky ads bottom sticky ads or floating ads.
Users can easily dismiss the ad by clicking the X button above it. This way, you can increase your earnings without significantly affecting the user experience.
One important thing to note is that you should not use any clickable elements above sticky ads, and they must be separate from the rest of the content. You can review the Adsense guidelines on sticky ads here.
Examples of Sticky Ads
Some common examples of sticky ads include:
- Footer ads
- Sidebar ads
- Header ads
- Pop-up ads
- Slide-in ads
AdSense Guidelines for Sticky Ads
- Don’t overload your page with ads. Make sure that all ads, including sticky ads, take up less space 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 must not float away from window edges or follow the cursor.
- Sticky footer ads should not cover more than 30% of your computer, tablet, or mobile screen.
Steps to Add a Sticky Footer Ad in WordPress
To add a sticky footer ad in WordPress, follow these steps:
- Log in to your AdSense dashboard and create a responsive display ad unit.
- Copy the publisher ID and data ad slot code.
- Now go to Appearance > Theme Editor > Footer.php file and search for the
</body>tag. - Paste the code just above it and update the file.
<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>
Now, the sticky footer ads will be shown on your WordPress website. You can test if it’s working by opening the webpage in incognito mode.
Troubleshooting Sticky Ads
If the sticky ad code is not working properly, check if your caching plugins, such as WP-Rocket or LiteSpeed Cache, are causing the problem. In some cases, the “Remove unused CSS or JavaScript” setting can prevent the code from loading on the front end.
To troubleshoot this, try deactivating the plugin temporarily, clearing the cache, and checking in incognito mode. You can also try adding the code to the header section of your website.
If you are still seeing a blank ad, this could be due to a low ad fill rate. This means that there are not enough ads available from AdSense to display in the ad slot. Try opening an old popular page where you receive the most traffic to see if the ad is showing there.
If the ad is still not showing, you can try using the following alternative sticky ad code:
If you don’t want to edit the theme code, you can use a code management plugin that lets you add code to the header and footer sections.
For this, I prefer to use the free Header Footer Code Manager plugin by 99robots. It allows you to set display rules for the code, such as showing it only on desktop or mobile, or only on the homepage or post pages.
If you are using the Pro version of the Kadence theme, you can paste the code in the Header/Footer Scripts section in the customizer.
You can enable this function by going to Appearance > Kadence.
By the way, the Kadence theme comes with a lot of unique features, so you can easily customize your WordPress website.
How to Hide the Sticky Footer Ad on the Homepage
You can hide the sticky footer ad from the homepage of your WordPress website by blocking the loading of the ad code. To do this, you can use a code manager plugin such as Header Footer Code Manager or an AdSense manager plugin such as Ad Inserter.
In the code manager plugin, paste the ad code in any of the blocks and set it to the Post page only. You can also check other options here. Now, set the location to the footer and keep the alignment to the center, as shown in the image above.
Once you have saved the code, the sticky footer ad will only show on the Post page and will not load on any other pages. In this way, you can further customize the loading of the ad code.
Note: If your ads are not showing properly or only show on a few pages, I recommend using the code in the header section instead of the footer. Also, avoid using too many ads on a single webpage.
Conclusion
I hope you have successfully added sticky footer ads to your WordPress website. If you have any trouble during this process or any questions, please feel free to ask me in the comment section.
Also, let me know if the sticky ads improve your click-through rate (CTR).
