How to detect iPhone browser natively in WordPress

WordPress has embraced the mobile revolution from the first moment. We have apps for iOS or Android and all the WordPress blogs can be accessed in iPad format. We also have in WordPress core a variable to detect if the user is visiting the site using an iPhone device. In this tutorial we will learn how to apply a class using WordPress’ body_class based in that variable.

The variable we will be using is $is_iphone, and is defined at vars.php as follows:

if ( $is_safari && stripos($_SERVER['HTTP_USER_AGENT'], 'mobile') !== false )
  $is_iphone = true;

All we have to do is instance the global variable in our WordPress theme, test if it’s true and do something:

<?php
global $is_iphone;
if($is_iphone)
  $iphone_class = 'iphone';
?>
<body <?php body_class($iphone_class); ?>>

With this simple code, you can apply a specific CSS class to the body tag if someone is visiting your site using an iPhone. Of course, you can do a lot of other things, like applying a new stylesheet. A new CSS file is much better than rely on media queries, since the CSS will dictate which images must be specifically downloaded. Using media queries, all images defined in the CSS file are downloaded.

<?php
global $is_iphone;
if($is_iphone)?>
<link rel="stylesheet" href="/iphone.css" media="only screen and (max-device-width: 480px)">
<?php else ?>
<link rel="stylesheet" href="/common.css" media="screen">

Chances are that you’re overring WordPress internal body_class using your own class generator, so you can just add the following in your code, assuming $classes is the array where you are storing your CSS classes to be outputed:

if($is_iphone)
$classes[] = 'iphone';

With little effort we now have our site prepared to detect the browser of an iPhone device. If you’re wondering why there is not an $is_android variable, I’m wondering that too, but anyway, you can always fake one by sniffing the $_SERVER['HTTP_USER_AGENT'] variable.

You might want to check these related posts:

Liked this? buy me a coffee so I can stay awake doing more things like this.

Tags: , , , . Categories: Technology, WordPress.
Monday, April 4th, 2011.


“How to detect iPhone browser natively in WordPress” received 11 comments! Add yours.

  1. wpmag.com - WordPress News, Themes, Tutorials, Plugins, Questions, ... April 5th, 2011

    How to detect iPhone browser natively in WordPress | Technology | ilovecolors…

    WordPress has embraced the mobile revolution from the first moment. We have apps for iOS or Android and all the WordPress blogs can be accessed in iPad format. We also have in WordPress core a variable to detect if the user is visiting the site using a…

  2. Chris April 5th, 2011

    Thanks for this code. It would be great to have the $is_android variable

  3. Ashish April 21st, 2011

    It’s cool.
    But is there any way to do this with jQuery or simple Javascript?

  4. Mike April 21st, 2011

    can you add this code into dreamweaver on an existing website?

  5. Elio April 23rd, 2011

    I guess you can, after all Dreamweaver has a code view where you can enter this code.

  6. Carl August 7th, 2011

    The iPhone is the best smartphone by far, I love all the iPhone apps that are available for the for the Apple OIS. Looking forward to the iPhone 5.

  7. marp February 3rd, 2012

    It’s working.
    Great.
    Keep it up.

  8. 25 Awesome Tutorials and Articles for Web Developers | thePIXLr May 8th, 2012

    [...] 8. How to Detect an iPhone Browser Natively in WordPress [...]

  9. Tweet Parade (no.47 Nov 2012) | gonzoblog December 3rd, 2012

    [...] How to detect iPhone browser natively in WordPress - With this simple code, you can apply a specific CSS class to the body tag if someone is visiting your site using an iPhone. Of course, you can do a lot of other things, like applying a new stylesheet. [...]

  10. Ways to Detect the version of WordPress | February 3rd, 2013

    [...] How to remove WordPress version WordPress sites hacked, again! Slow adoption rate of new WordPress versions How to increase visitors and convert to customers Check Your WordPress Version Without Logging In To Your Admin Section How to Detect Mobile Devices using CSS3? How to detect iPhone browser natively in WordPress [...]

  11. Ways to Detect the version of WordPress April 7th, 2013

    [...] How to remove WordPress versionWordPress sites hacked, again!Slow adoption rate of new WordPress versionsHow to increase visitors and convert to customersCheck Your WordPress Version Without Logging In To Your Admin SectionHow to Detect Mobile Devices using CSS3?How to detect iPhone browser natively in WordPress [...]

Leave a comment