Add Mobile-Friendly Ads on Smaller Devices using Genesis

I do a lot of customization work for small businesses and bloggers who participate in affiliate and revenue generating programs and use the Genesis Framework. Some of the clients that do not have mobile-friendly websites were very worried about how Google’s mobile-friendly changes would effect their revenue. This has been a long standing issue for bloggers. Why? Well, in the Genesis Framework the Primary Sidebar drops underneath the content area on smaller mobile devices (around the size of 768px or lower). If the client’s content is pretty lengthy and detailed, it will require the visitor to scroll to read the content. Once they finish reading they may or may not scroll further which means the ads will not be seen or clicked. What’s the solution? Add new widget areas for mobile-friendly ads that’s how!

DEMONSTRATION

As a demonstration, I’ll be using the Tasteful Theme by Restored316 Designs. I love Lauren’s designs and customize them often for clients. Take a look at the current Tasteful Theme Demo using Responsinator. It looks beautiful doesn’t it? If you look at the smaller device sizes (under 768px) the sidebar containing the sign up box and advertisement falls to the bottom. Now, this may not be a big deal for you, but for a lot of bloggers who have revenue generating ads in their sidebars, this could be a problem.

SOLUTION

So, how can we make it so that we have a few happy bloggers out there? Check out my demo using Responsinator. I added widget areas that can only be seen on mobile devices smaller than 768px. I added one mobile widget to render below the slider (Mobile Ad 1). I then added another mobile widget below the Featured Articles (Mobile Ad 2). If you scroll through to the larger devices you will notice that the two new widgets are not visible.

How’d You Do That!?

As I mentioned at the beginning, I used the Tasteful Theme. Therefore the code below can only be used on the Tasteful theme. If you are a web developer, I am sure you can figure out the logic I’ve used here. If you are not and would like to have something similar done to your theme – contact me here and let’s discuss your website.

So let’s get started.

Add the Widget Areas on the Home Page

First you will need to open up the front-page.php file in the Tasteful Theme. Look for this code:

Replace that code with this code:

Register the New Widget Areas

Now we need to register the widget areas so they show up. Open up your functions.php file. Copy and paste this at the very bottom. If you are adventurous… you can paste it right under the other registered widget areas.

Let’s Turn Them On and Off

Great! So now we need to tell your theme – “do not display the mobile widgets on desktops or mobile devices 768px or larger – turn them off.” Open up your style.css file. Right before the Media Queries area, copy and paste this:

We’re almost done! Let’s turn them on for mobile devices. Staying in the style.css file, scroll down below the Media Queries and look for the 767px media query (@media only screen and (max-width: 767px)). Copy and paste this code right before the last closing parenthesis (near the 500px media query if you haven’t modified your theme).

That’s it. You’re all done.

Now you should see two mobile widget areas in your Widget area that look like this:

Like my Signature? Get the Signature Widget for Genesis right here!