• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Terms of Service & Privacy
    • Accessibility
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » Add Mobile-Friendly Ads on Smaller Devices using Genesis

Published on April 24, 2015 / Updated on May 6, 2016 / Reading Time: 4 minutes

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.

Warning!!! Backup your theme before proceeding. If you are not familiar with modifying your child theme files, you should probably seek the assistance of a professional. I suggest reading the instructions in their entirety before beginning to make sure you understand how this will work.

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:

Widgets ‹ Dev1 — WordPress 2015-04-24 16-11-03

Have a theme you’d like to have customized with mobile-friendly ads? Get in touch with me and let’s see what we can do about that!!
  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrintShare1

    Filed Under: Genesis Framework, Tutorials Tagged With: ad space, genesis child theme, mobile friendly widgets, mobile-friendly, responsive design, restored316, tasteful child theme

    A recent conflict was found when Genesis Simple Share is activated and configured while using the Posts and Page Grid in Genesis Blocks. The error can be seen when viewing the content on the front end. The error does not display in edit mode. Below is a temporary fix that will allow you to manually set […]

    Reader Interactions

    Comments

    1. Brock says

      April 25, 2015 at 4:33 am

      Nice!

    2. melanie says

      June 24, 2015 at 3:38 am

      I can not code php.But trying to understand.
      I use Education pro theme.Front page is different codet than in tastefull theme.
      How can I apply ths?
      I want that my sidebar menu appears in mobil menu as sngle mobil menu.
      Thank you.

      • Anita C says

        June 26, 2015 at 8:25 pm

        Hi Melanie, use my technical support page above for further assistance. I can help you via email.

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2022 · Designed with by Me! · Hosted on SiteGround

    We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy