Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm looking for a way to add body class depending on the User Agent of the client with php.

I'm looking to implement it this way:

page.php:

<body id="front" <?php ( function_exists ( 'body_class' ) : body_class($classes) ? NULL ); ?> >

Or by using adding it to the functions.php file

FYI: The whole purpose of this is to sniff out particular mobile styles and disable javascript for the some mobile user-agents.

p.s. I'm not looking for a mobile plugin.

p.p.s. no, i'm not interested in using a mobile theme.

share|improve this question

3 Answers 3

up vote 5 down vote accepted

something like this maybe:

function my_class_names($classes) {
    $useragent = $_SERVER['HTTP_USER_AGENT'];
    if(strchr($useragent,'Safari')) $classes[] = 'Safari';
    // etc..
    return $classes;
}
add_filter('body_class','my_class_names');

Edit - as per Chip's suggestion, here's the function using the WordPress useragents checks:

function my_class_names($classes) {
    global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
    if($is_lynx) $classes[] = 'lynx';
    elseif($is_gecko) $classes[] = 'gecko';
    elseif($is_winIE) $classes[] = 'winIE';
    elseif($is_macIE) $classes[] = 'macIE';
    elseif($is_opera) $classes[] = 'opera';
    elseif($is_NS4) $classes[] = 'NS4';
    elseif($is_safari) $classes[] = 'safari';
    elseif($is_chrome) $classes[] = 'chrome';
    elseif($is_iphone) $classes[] = 'iphone';
    else $classes[] = 'other';
    return $classes;
}
add_filter('body_class','my_class_names');
share|improve this answer
1  
And the filter approach is a good one, also - though I would still suggest taking advantage of the global variables, such as $is_iphone, already defined by WordPress. –  Chip Bennett May 18 '11 at 15:48
    
thanks @Chip Bennett, I always forget about those. I edited the answer to add all of the useragents WordPress checks for. –  Milo May 18 '11 at 15:58
    
You might want to edit your code to implement the $is_iphone global, as well. :) (but, up-vote from me anyway, as filters are generally the cleanest approach) –  Chip Bennett May 18 '11 at 16:01

Use media queries. If you change your output depending on the user agent, you have to disallow proxy caches, and even caching in local static files will become unnecessary hard. And don’t forget to send a header Vary: User Agent – this will slow down your site loading times in every browser.

See also: How To Use CSS3 Media Queries To Create a Mobile Version of Your Website.

share|improve this answer

WordPress includes global variables that store some of these useragents. Perhaps something like this:

<?php
global $is_iphone;

$classes = array();

if ( $is_iphone ) $classes[] = 'iphone';
?>
<body id="front" <?php body_class( $classes ); ?>>

(Why are you wrapping body_class() inside function_exists()? This tag generally doesn't need backwards-compatibility, as it was introduced in WordPress 2.8.)

share|improve this answer
    
I'm just a paranoid programmer. I tend to over think things. I didn't know this about the body_class() function. Thanks! –  chrisjlee May 18 '11 at 15:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.