4

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.

Improve this question

3 Answers 3

Reset to default
6

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');
Improve this answer
3
  • 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, 2011 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, 2011 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, 2011 at 16:01
1

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.)

Improve this answer
1
  • 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, 2011 at 15:49
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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