How to add a sticky mobile footer to GeneratePress

I’ve shown you how to add ads to your WordPress website using the GeneratePress theme in the past. One rather fruitful placement wasn’t covered in that guide: The sticky footer displaying ads to mobile visitors. A sticky footer is a perfect place to display ads as it will follow the visitor around as they browse your articles.

This guide requires that you have purchased GeneratePress Premium, which you can do using my affiliate link. Once installed, you will need to enable the elements. Apart from that, there are no other plugins required. I personally do use the plugin Advanced Ads but you can achieve the same results by just copying the code from your Google AdSense console.

What a sticky footer ad looks like in Generatepress

The screenshot shows the results of following this guide. Keep in mind, that this can all be done using only GeneratePress Elements and no additional plugins. I keep finding more and more reasons to love this theme.

Creating a GeneratePress Block Element for the sticky footer

To start things off, we’re going to create a new GeneratePress Element. I went with the block element as they are very easy to work with and allow the use of the excellent GenerateBlocks. The block I created is very simple: It is a GenerateBlocks container, which I have given a background colour and a bit of padding, in to which I have placed my ads.

I am going with two different ads for this setup. One will display on smartphones and the other will display on tablets. The leaderboard ad on tablets has the dimensions 728×90 and the mobile leaderboard has the dimensions 320×50. As my desktop visitors already have to deal with a sticky sidebar ad, I’ll spare them the sticky footer ad.

As you can see in the screenshot below, I have used two Advanced Ads blocks to achieve this. One will only ever display on mobile devices. If you don’t want to use a plugin you can simply copy the code from your AdSense console and insert a Custom HTML block.

Placing the ads

The block I’ve created is hooked into generate_after_footer. This will place it at the very bottom of my site. But because I’m going to make it sticky it will, of course, stick to the bottom of the visitor’s screen.

I’ve decided to show this ad on posts only as I don’t want to spoil my pages. You could place this sticky footer ad wherever you like using the location options. Below the location field, you will also find the option to exclude certain pages and posts.

Styling the sticky footer using GeneratePress classes

And now we get to the interesting part: styling our sticky footer ad. Because I’m using a block element there is no need to set a colour, padding, or margin. The only styling I need to add is to make it sticky. I’m simply calling my CSS class sticky-footer.

As you can see, I’ve also added an extra CSS class called hide-on-desktop. This CSS class is built into GeneratePress and will hide this block on desktops. You can also use it the classes hide-on-mobile, hide-on-tablet, and/or hide-on-desktop to hide blocks on different types of devices.

Making the footer block sticky using CSS

Next we’re going to add some custom CSS to our theme. This can be done using the WordPress customiser. The first few lines will make our footer block stick to the bottom of mobile screens:

.sticky-footer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
}

And just like that, you have created a sticky footer. However, there is still one problem and that is that the sticky footer will overlap elements or widgets in your GeneratePress footer. To stop that from happening you can add the following code:

@media (max-width: 768px) {
	body {
		margin-bottom: 60px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	body {
		margin-bottom: 90px;
	}
}

This code will add a margin to your whole website so that the sticky footer has a place to go whenever the visitor scrolls all the way down. The first part will add the margin to the mobile site and the second part will add it to the tablet site. Make sure the size of your margin (in this example it would be the 60px and 90px) is the same height as your sticky footer.

Ads are just one option

This article obviously focused on ads. However, the sticky footer isn’t restricted to just one option. You could ad a form for users to sign up to a newsletter or display social links in your sticky footer.