Anyone using a responsive theme for their website knows how frustrating it can be to host Google AdSense in your design. What you need is an ad that can adjust automatically to the size of the screen viewing your website.
SAMPLE RESPONSIVE GOOGLE ADSENSE AD:
Website design needed to adapt to allow websites to showcase the design well on any screen size and responsive design was the answer. Responsive design allows the layout to move and adapt to fit the different screen sizes. (You can test this by resizing your browser window right now if you’re on a desktop or laptop.)
(Hippies' Note: If you enjoy reading our articles, you'll love our newsletter. Receive updates directly to your inbox. Subscribe now!)
Responsive design is one of the fastest growing trends in web design today, and being able to serve ads is vital to many websites.
Google AdSense for Responsive Design Plugin
After careful searching, I couldn’t find this type of plugin anywhere online. I did find some which allowed you to have responsive AdSense within widgets, but I wanted them in my post content. So, when a developer can’t find what they want, it’s time to roll-your-own. I found a great tutorial on responsive AdSense, and then modified it into a WordPress plugin.
The Google AdSense for Responsive Design WordPress plugin, or GARD for short, allows you to easily add a responsive Google AdSense ad within a post or page. Simply add the [GARD] shortcode and that’s it.
And the best part? This is a FREE plugin!
That’s right. I’ve already done the work and am sharing it with the public soon.
Sign up for our newsletter to be notified when it’s officially released to the public.
Using the GARD Plugin
Another sample responsive ad above by using GARD.
The usage of our plugin Google AdSense for Responsive Design is simple, just use the shortcode [GARD] anywhere in your post or pages where you would like an AdSense ad to appear! That’s it.
The plugin will determine the screen and content area width, and pick from one of 7 ad sizes to display. If you don’t want all 7 options, just fill out the ones you do want it to pick from, and leave the rest blank.
Be sure to visit our wordpress plugin forums for support with GARD and to suggest new features.
Setting Up the GARD Plugin
There is nothing tricky to this, as it’s pretty straight forward. Even the options page is simple and to the point. Just enable the plugin, then go to SETTINGS > Google AdSense for Responsive Design, and fill out your Google AdSense Publisher ID, and any ad slot codes that you have created for your website.
Some features we may add down the road are:
- The ability for you to include custom AdSense ad sizes that may be different than the 7 we’ve included.
- The ability to change the shortcode from GARD to something custom. (complete)
- Ability to use GARD in widgets.
- Automatically insert GARD ads after X number of paragraphs.
If there are any features you’d like added to GARD, please let us know in our forums.
GARD Coming Soon…
The Goole AdSense for Responsive Design will be released to the public for FREE soon. It will be announced to our ‘Digital Hippies’ first, so to receive advanced access please sign up for our Digital Hippie Newsletter (also free).
What are some other plugins you are looking for and haven’t found? Let us know in the comments below.