Tutorial Details
- Version (if applicable): WordPress 2.8+
- Difficulty: Easy
- Estimated Completion Time: Less than 5 minutes
With the rapid growth of smart phone users, it has become increasingly important in web development to ensure visitors who access your website through handheld devices are catered to appropriately. There are a number of ways in which these visitors can be targeted, and in this tutorial we will explore creating a function to natively detect iPhone users in WordPress.
Step 1 Writing the Function
Ensure you paste the function before the closing </head> tag. By default, the TwentyEleven and TwentyTen themes use the body_class(); function in the header.php file to dynamically add classes to the standard <body> tag.
For example, if you are viewing a single page in WordPress, <body class="singular"> is an example of a body class for a singlular page/post, which would allow you to change the style of certain elements of your design dynamically using CSS. If your theme doesn’t use the body_class(); tag (even though it really should be doing that already!), go ahead and include it, like this:
<body <?php body_class(); ?>>
WordPress has a number of global variables which can be used for browser detecting, including the $is_iphone variable. We will be using this variable along with the body class system in WordPress. To do that, we must first write a function:
<?php
function detect_iphone($iphone) {
global $is_iphone;
if($is_iphone) $iphone[] = 'iphone';
return $iphone;
}
add_filter('body_class','detect_iphone');
?>
This is our function. Firstly, we give our function a name of “detect_iphone” so that we can decipher it from our other functions. You will then notice added “global” to our $is_iphone variable, this is because the variable is defined outside of our function. We then tell WordPress that if this condition is met (if the user is browsing the site from an iPhone), to add “iphone” to our body class. Go ahead and paste this snippet of code above the closing </head> tag in header.php
Step 2 Targeting iPhone Users With CSS
This function now allows us to specifically target iPhone users using CSS, by using our newly created “iphone” class. For example, we may include the following in our stylesheet to display our h1 tag differently to iPhone users:
h1 {
font-size: 30px;
line-height: 110%;
text-decoration: underline;
}
.iphone h1 {
font-size: 35px;
text-decoration: none;
color: #FF0000;
}
Conclusion
There are an increasing number of methods to make WordPress sites friendly for our mobile audience, and I hope this quick-tip has helped you to understand another approach at tackling mobile-friendly sites.
I encourage you to discuss your own preferred methods of making your WordPress sites mobile-friendly in the comments below!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Wptuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
That’s a neat tip. I just use the WPTouch plugin though.
Interesting! Thank you for the tip!
You could also use media queries and cater for more than just iPhone users.
Yes, indeed media queries would be another appropriate method of targeting hand-held users.
This method could come in useful for letting iPhone users know about your app (for example), using a div with the information – which could have “display” set to “none” by default, but have it set to display when it’s in the iPhone body class
Thanks for the tip, nice clean and dynamic way of checking different sorts of gadgets roaming your wp-websites.
What about android users and other smartphones? Or does this code work for all smartphones?
Unfortunately this method does not target Android devices. There currently isn’t a way to natively detect Android users.
You could use media queries instead, as mentioned by @Tim above
Nice! Clean simple function… I like!
I´m lookin´ a long time for this information.
Thank you!!!