How to Create Sticky Ads in WordPress

by

Sticky ads are a popular way to display advertisements on a website, ensuring they remain visible to users as they scroll through the content. In this guide, we’ll walk you through the implementation of sticky ads in WordPress and explain how you can customize the design for different AdSense ad sizes.

How to Add Implement Sticky Ads on WordPress?

You have to Add below code to your WordPress Themes Functions.php file.

  1. First login to your WordPress website.
  2. Go to Appearance > Theme File Editor.
  3. Then Click on the Functions.php file.
  4. Now you have to add the Given code Below in the beneath of the Functions.php file.
  5. Then you have to add the Adsense fixed ads in the specified location.
  6. Now check your website in the Incognito mode, to see the ads is working or not.
  7. If you don’t see your ads, then clear your cache file in WordPress Caching Plugins, clear browser cookies, Also purge your CDN cache files. After doing, you can see the ads is live in your website.

Codes To Be Add in the Functions.php file

In this given code, you have to just replace this two lines with your Adsense Ads code, the lines are,

<!—– Add your Adsense fixed ads here ——->
<!—– Paste the code here ——->

This code is designed for your 728×90 fixed size ads, you can change the code the adjust with your specified ads size.

// Sticky 728x90 fixed ads code start from here (Applied on overall side)

function sticky_ad_with_animation() {
    ?>
    <!-- HTML for Sticky Ad -->
    <div id="sticky-ad-container">
        <div id="sticky-ad">
      <!----- Add your Adsense fixed ads here ------->
      <!----- Paste the code here ------->

        </div>
        <div id="close-ad" onclick="closeAd()"><span style="text-align: center; justify-content: center: margin-x-">x</span></div> <!-- Cross icon -->
    </div>
<!-- &#10005; -->
    <!-- CSS for Styling and Animation -->
    <style>
        /* Sticky Ad Container */
        #sticky-ad-container {
            position: fixed;
            bottom: 22%; /* 22% up from the bottom */
            left: -728px; /* Start off-screen to the left */
            z-index: 9999; /* Ensure it's on top of other elements */
            transition: left 0.1s ease-in-out; /* Animation for sliding */
        }

        /* Sticky Ad */
        #sticky-ad {
            width: 728px; /* Ad width */
            height: 90px; /* Ad height */
            background-color: #f0f0f0; /* Fallback background */
/*             border: 1px solid #ccc; Optional border */
        }

        /* Close Button */
        #close-ad {
			position: absolute;
            bottom: -15px; /* Position at the bottom of the ad */
            left: 0px; /* Position at the right of the ad */
            width: 20px; /* Size of the cross icon */
            height: 20px;
            background-color: #c4c7c5;
            color: #000;
            border-radius: 50%;
            font-size: 14px;
            cursor: pointer;
            z-index: 10000; /* Ensure it's on top of the ad */
            display: flex; /* Use flexbox for centering */
            align-items: center; /* Center vertically */
            justify-content: center; /* Center horizontally */
        }

        /* Hide on mobile devices */
        @media (max-width: 767px) {
            #sticky-ad-container {
                display: none !important;
            }
        }
    </style>

    <!-- JavaScript for Functionality -->
    <script>
        // Function to show the ad with animation
        function showAd() {
            const adContainer = document.getElementById('sticky-ad-container');
            adContainer.style.left = '0'; // Slide in from the left
        }

        // Function to close the ad with animation
        function closeAd() {
            const adContainer = document.getElementById('sticky-ad-container');
            adContainer.style.left = '-728px'; // Slide out to the left
        }

        // Show the ad with animation when the page loads
        window.onload = function() {
            showAd();
        };

        // Optional: Show the ad again after a delay (e.g., 10 seconds)
        setTimeout(function() {
            showAd();
        }, 10000); // 10 seconds delay
    </script>
    <?php
}
add_action('wp_footer', 'sticky_ad_with_animation');

// Sticky 728x90 fixed ads code ends here (Applied on overall side)

Implementation of Sticky Ads

The provided code snippet creates a sticky ad that slides in from the left side of the screen and stays fixed at 22% from the bottom. Here’s a breakdown of how it works:

  1. HTML Structure:
    • The ad is wrapped in a div with the ID sticky-ad-container. This container is positioned off-screen initially (left: -728px) and slides into view when the page loads.
    • Inside the container, there’s another div with the ID sticky-ad where you can place your AdSense ad code.
    • A close button (#close-ad) is included to allow users to hide the ad. Clicking this button triggers the closeAd() function, which slides the ad back off-screen.
  2. CSS Styling:
    • The #sticky-ad-container is styled with position: fixed to keep it in place as the user scrolls.
    • The #sticky-ad is set to a fixed width and height (728x90 pixels), which is a standard size for AdSense ads.
    • The close button is styled as a small circular icon positioned at the bottom-left corner of the ad.
  3. JavaScript Functionality:
    • The showAd() function slides the ad into view by setting the left property to 0.
    • The closeAd() function hides the ad by setting the left property back to -728px.
    • The ad is displayed when the page loads (window.onload), and optionally, it can reappear after a delay (e.g., 10 seconds) using setTimeout.
  4. WordPress Integration:
    • The code is wrapped in a PHP function (sticky_ad_with_animation()) and hooked into the wp_footer action using add_action(). This ensures the ad is added to the footer of every page on your WordPress site.

Customizing the Design for Different Ad Sizes

AdSense supports various ad sizes, such as 300x250, 320x100, and 468x60. To adapt the sticky ad for different sizes, you’ll need to adjust the CSS and JavaScript accordingly. Here’s how:

  1. Change the Ad Container Size:
  • Update the width and height of the #sticky-ad to match the new ad size. For example:cssCopy
    //CSS CODE
#sticky-ad {
    width: 300px; /* New width */
    height: 250px; /* New height */
}

    2. Adjust the Off-Screen Position:

    • Modify the left property in the #sticky-ad-container and closeAd() function to match the new width. For example:
    //CSS CODE
#sticky-ad-container {
    left: -300px; /* New off-screen position */
}
    // JavaScript Code 
function closeAd() {
    const adContainer = document.getElementById('sticky-ad-container');
    adContainer.style.left = '-300px'; /* New off-screen position */
}

    3. Reposition the Close Button:

    • If the ad size changes significantly, you may need to adjust the position of the close button. For example:
      // CSS Code
#close-ad {
    bottom: -20px; /* Adjust as needed */
    left: 10px; /* Adjust as needed */
}

      4. Update Media Queries:

      • If you want to hide the ad on specific screen sizes, update the media query in the CSS. For example:
      //CSS Code
@media (max-width: 480px) {
    #sticky-ad-container {
        display: none !important;
    }
}

      Example for a 300×250 Ad

      Here’s how the code would look for a 300x250 ad:

      // CSS Code
#sticky-ad {
    width: 300px; /* New width */
    height: 250px; /* New height */
}

#sticky-ad-container {
    left: -300px; /* New off-screen position */
}

#close-ad {
    bottom: -20px; /* Adjust as needed */
    left: 10px; /* Adjust as needed */
}
      // JavaScript Code 
function closeAd() {
    const adContainer = document.getElementById('sticky-ad-container');
    adContainer.style.left = '-300px'; /* New off-screen position */
}

      Best Practices

      1. User Experience:
        • Ensure the ad doesn’t obstruct important content or annoy users. The close button is essential for usability.
        • Avoid showing the ad too frequently (e.g., after a short delay) to prevent a negative user experience.
      2. AdSense Policies:
        • Follow Google AdSense policies, such as not placing sticky ads on mobile devices (as implemented in the media query).
      3. Testing:
        • Test the ad on different screen sizes and devices to ensure it displays correctly and doesn’t break the layout.

      By following this guide, you can easily implement and customize sticky ads in WordPress for various AdSense ad sizes. This approach enhances ad visibility while maintaining a good user experience.

      Leave a Comment