Article | Date posted : 5 May, 2014 | Updated on : 30 May, 2014

How to create a responsive Google Adsense Ad in WordPress

Sponsored Links

There are three methods when it comes to integrating Google Adsense into your WordPress website. The first one is to use Google’s beta responsive feature and the second method is to use a plugin to detect different devices and the third one is to insert a couple of functions with server-side detection. On this website I use functions because I like to control what people see, and not letting Google decide.

The main reason I prefer to control ads myself is that I can set the most recommended sizes. While Google will automatically display ads based on the available space. This does not ensure the best available ads.

First method, using Google’s responsive feature


Responsive Google Ads

Responsive Google Ads

Login to your account and select My Ads click on + New ad unit and within the drop down menu select Responsive ad unit

Than add the script to your posts, you can use plugins to automatically insert each ad or widgets in your sidebar menu.

That was easy wasn’t it, this method is great for site owners with no knowledge on PHP or don’t want to add new functions.

Second method, using a plugin and shortcodes

First install WP Mobile Detect, now you can use shortcodes like [device][/device] to include ads only for mobile devices.

You can now include specific sizes of ads for a mobile device or a desktop etc…

Third method, using functions and server-side detection


mobile detect

mobile detect

In this method I will show you how to use server-side detection to accurately display ads depending on Mobile or Desktop devices.

First download /Mobile-Detect (the file name is Mobile_Detect.php), and upload to a folder within your theme, I have added mine to a folder named inc.

Once uploaded, open up your functions.php file inside your theme.

We than need to include the Mobile_Detect.php file

// detect mobile
require_once get_template_directory() . ‘/inc/Mobile_Detect.php’;
$detect = new Mobile_Detect;

We will detect if the the viewer is on a mobile device or a desktop device

if ($detect->isMobile()) {

Now we will add a new function and in this case its the footer ad, I will first display the full function code and then explain each line step by step.

function sw_footer_horizontal_ad($sw_is_mobile){
echo ‘<div class=”ad4″>’;
echo ‘<div class=”sw-article-header”><p>Sponsored Links</p></div>’;
echo ‘<div class=”ad4-inner”>’;
echo ‘<script async src=”//”></script>’;
if ($sw_is_mobile==1){
echo ‘<ins class=”adsbygoogle” style=”display:inline-block;width:234px;height:60px” data-ad-client=”ca-pub-xxxxxxxxxxxxxxxxxx” data-ad-slot=”xxxxxxxxxxxx”></ins>’;
echo ‘<ins class=”adsbygoogle” style=”display:inline-block;width:728px;height:90px” data-ad-client=”ca-pub-xxxxxxxxxxxxxxxxxx” data-ad-slot=”xxxxxxxxxxxx”></ins>’;
echo ‘<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>’;
echo ‘</div>’;
echo ‘</div>’;

First we open a function, and in this case we give it the name sw_footer_horizontal_ad. We than need to pass a variable through the function ($sw_is_mobile). This variable will tell the function if it’s a mobile device or not.

function sw_footer_horizontal_ad($sw_is_mobile){}

We than detect with an if statement, if the viewer is mobile. If that is the case we will than display an ad for mobile devices, if not than we will show a desktop ad.

if ($sw_is_mobile==1){
echo ‘<ins class=”adsbygoogle” tyle=”display:inline-block;width:234px;height:60px” data-ad-client=”ca-pub-xxxxxxxxxxxxxxxxxx” data-ad-slot=”xxxxxxxxxxxx”></ins>’;
echo ‘<ins class=”adsbygoogle” style=”display:inline-block;width:728px;height:90px” data-ad-client=”ca-pub-xxxxxxxxxxxxxxxxxx” data-ad-slot=”xxxxxxxxxxxx”></ins>’;

You can now add the function in your posts and pages.

And add the following line which will output your function and pass through if it’s a mobile device or a desktop.

<?php sw_footer_horizontal_ad($sw_is_mobile); ?>

Sponsored Links


Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me