How to Create Sticky Mobile Footer Ads in WordPress

Last updated on July 20th, 2022 at 12:03 pm

In this tutorial, we are going to discuss how you can create sticky mobile footer ads on your WordPress or Blogger website. While there are WordPress plugins like Q2W3 fixed widget which can place sticky sidebar ads on your site, there is not much option for a publisher when it comes to creating sticky mobile footer ads.

 

Thus, publishers are left with the option either to buy a premium plugin like WP Advanced Ads to set up a sticky ad or hard code it. In this tutorial, we will learn how you can hardcode a sticky mobile footer ad on WordPress using simple CSS properties. We would be requiring very basic knowledge of CSS and HTML for this and you need to have access to your Theme editor for this action.

Benefits of Creating Sticky Ads on Mobile

We recommend publishers to try sticky 320×50 mobile ad units on their website and here are some of the benefits which would justify a similar setup.

1. Promote a website offer or ask your visitors to install your app if you’ve recently launched a app and want your website visitors to try the app.

2. You can show CPM based ads from direct buyers. A sticky mobile ad unit has a 100% view rate and thus it gives enough time to the users to interact with the ad creative and direct buyers would prefer this ad format to send their message to their target audience (be it a brand awareness or an action-oriented).

3. Enable auto-refreshing ad units on mobile. You can set time-based auto-refreshing ADX ad units on mobile. Quite a number of ad networks like Google Ad Exchange and others allow auto-refreshing of ad units. While publishers can choose the duration of the ad unit before it refreshes, we have seen marked increase in overall revenue for these ads on websites which have high time on site. We can help you get started with auto-refreshing ad units. Get in touch.

How to Create Sticky Mobile Footer/Header Ads on WordPress

It is something like page-level ads (anchor ads) format and you must have noticed the implementation on various publisher websites. Here, we will look at how you can set up these sticky mobile footer ads on WordPress.

This is the ad script which you need to place in the CSS stylesheet of your blog template. Normally, the CSS file is defined as stylesheet.css on your theme editor. So, login to your WordPress blog, go to theme editor and open the stylesheet.css file and update the following code.

Sticky Mobile Ad at the Top or Header: CSS Code

Following is the CSS code for top or head sticky ads.

@media only screen and (min-width: 310px) and (max-width:500px) {

#adTop {

left:0;

position: fixed;

text-align:center;

top: 0px;

width:100%;

z-index:999;

}

}

Sticky Mobile Ad at the Bottom: CSS code

Following is the CSS code for bottom or footer sticky ads.

@media only screen and (min-width: 310px) and (max-width:500px) {

#adBottom {

left:;

position: fixed;

text-align:center;

bottom: 0px;

width:100%;

z-index:999;

}

}

Here is a little technical brief of the ad code—

@media—We call this as media query which is a CSS element that tell the browser to execute the code on if the screen width is between 310 px to 500 px (i.e. this ad code would appear on feature phones and smartphones having a maximum width of 500 px)

#adTop – It is defined as a CSS with an id named as adTop. This id would have the CSS property defined under the {}

Addon notes: The position is set to fixed and aligned centrally. This means that the elements in the ad code will not move as the user scrolls the screen. Also, please remember that using AdSense ad codes as sticky is a policy violation.

Ad Code

<div id=”adBottom”> your ads code here </div>

<div id=”adTop”> your ads code here </div>

Now copy the ad code from the notepad or where you’ve saved the ad. Place the ad code in the section of the code which says, “your ads code here”. Copy the updated code and place it before the end of the head that ( i.e. </head>)

Placing the ad code before the closing of the head tag ensures that the ad will be loaded every time the header of the article is called and the display properties of the ad code is defined by id = adTop or adButtom.

Now, that you know how to create sticky ad codes on mobile on top and bottom placements, let’s take a look at how we can create sticky sidebar ad codes.

Thus, to conclude, sticky and auto-refreshing ad codes can work like a charm and increase your overall ad revenue. Also, it helps you to promote website offers and app installs on your site or in fact if you’ve any advertiser for your site. So, let’s get your hands dirty by setting up sticky ad codes on mobile and desktops. Hope this article on creating sticky mobile footer ads on WordPress was helpful!