Changing displayed advertisements depending on device

By | June 18, 2014

Web browsing nowadays is not done solely on a desktop computer or laptop, which means devices like phones and tablets are to be considered specially when you do advertising to your site.  Most of the blogs have headers and the header banners are usually sized at 728 pixels wide meaning it wont show properly in mobile devices as they are extremely long like the image below.

Mobile not Fixed

To solve that is to identify if the device your website is displaying on is mobile or not, then from there you can display the proper advertisement.  While the WordPress codex has the function wp_is_mobile this is not enough as tablets are also considered as mobile and those can display the 728 pixel ads.

Now to solve this issue is by programming something that let you identify the device but there is already an awesome plugin out there that exposes new functions, meet the WP Mobile Detect.

WP Mobile Detect

With this plugin you can just call the functions below to determine your device

  • wpmd_is_notphone() – Returns true when on desktops or tablets
  • wpmd_is_nottab() – Returns true when on desktops or phones
  • wpmd_is_notdevice() – Returns true when on desktops only
  • wpmd_is_phone() – Returns true when on phones ONLY
  • wpmd_is_tablet() – Returns true when on Tablets ONLY
  • wpmd_is_device() – Returns true when on phones or tablets but NOT desktop
  • wpmd_is_ios() – Returns true when on an iOS device
  • wpmd_is_iphone() – Returns true when on iPhones
  • wpmd_is_ipad() – Returns true when on iPads
  • wpmd_is_android() – Returns true when on Android
  • wpmd_is_windows_mobile() – Returns true when on Windows Mobile

you can also use short codes like , , , etc

Once installed its easy to use, so if your problem is the header all you need it go to your header.php and replace your ads script with this

<?php if (!wpmd_is_phone()): ?>
    <div>Your Normal Ad Code Here</div>
<?php endif?>
 
<?php if (wpmd_is_phone()): ?>
    <div>Your Mobile Ad Code Here</div>
<?php endif?>

Once all Ok, check your website on different devices to test and it should work as you wanted it to, like this.

Small adds on mobile

Mobile Fixed

and normal ads on desktop or tablet

Desktop Fixed

 

Recommended

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.