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.

Ok I know browser detection is considered bad practice but I can't find a way around it because I really do need whole different themes for a complex site. So I snatched this function from http://detectmobilebrowsers.com/

$useragent=$_SERVER['HTTP_USER_AGENT'];
 if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://detectmobilebrowser.com/mobile');

not gonna make that fit this box

So how I can I use this to load a specific theme that I already have uploaded to my themes folder?

share|improve this question
add comment

2 Answers

up vote 5 down vote accepted

You can use the built in function wp_is_mobile()

Override a style with wp_enqueue_style

add_action('wp_enqueue_scripts', 'my_mobile_styles');
function my_mobile_styles(){
    if(wp_is_mobile()){
        wp_register_style( 'my-mobile-style', 'URL_to_stylesheet', array('id-of-main-stylesheet') );
        wp_enqueue_style( 'my-mobile-style' );
    }
}

Switch themes by filters

You can use the stylesheet and template filters to alter which theme WordPress will render.

# Parent Theme
add_filter( 'template', 'my_mobile_template', 99999, 1);
function my_mobile_template($template){
    if(wp_is_mobile())
        return 'mobile_template_dir_name';
    return $template;
}

# Parent or Child Theme (if applicable)
add_filter( 'stylesheet', 'my_mobile_stylesheet', 999999, 1);
function my_mobile_stylesheet($stylesheet){
    if(wp_is_mobile())
        return 'mobile_stylesheet_dir_name';
    return $stylesheet;
}

Isolating to a mobile user-agent

You can further extend this by using the following extracted from wp_is_mobile() within your conditional IF statement brackets.

$is_ios = strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile');
$is_android = strpos($_SERVER['HTTP_USER_AGENT'], 'Android');
$is_silk = strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/');
$is_kindle = strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle');
$is_blackberry = strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry');
$is_opera_mini = strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini');

From there, you can enqueue styles that override your main theme.

Caveat

It's important to note there is a function called switch_theme() which is not to be used for this case. It literally changes the theme and stylesheet location in the database. switch_theme() would change your theme to the mobile version for all users whenever a mobile user-agent is detected.

Testing

I typically use some browser extensions that alter the browser user-agent definition for testing something like this. Here are some links to the ones I've used:

Hope this helps you out!

share|improve this answer
    
yeah that's really cool. Can I just load a specific theme if wp_is_mobile equals true? –  Pollux Khafra Aug 21 '12 at 20:56
    
@PolluxKhafra Absolutely! I'll edit my answer to give a better use case. –  Brian Fegter Aug 21 '12 at 20:59
    
@PolluxKhafra Check out my latest edit. This should suit you well. Remember template and stylesheet are the directory names. –  Brian Fegter Aug 22 '12 at 0:25
    
Ok one issue is that it's only loading the stylesheet so Im doing something wrong. I just add the functions to function.php and replace both instances of mobile_stylesheet_dir_name and mobile_template_dir_name with my theme name. But the template doesn't replace. –  Pollux Khafra Aug 22 '12 at 5:12
    
@PolluxKhafra Check out the priority params I added to the filters. It's possible something else is filtering after your filter. By placing as priority 99999 it pushes it to the bottom of the stack. –  Brian Fegter Aug 22 '12 at 5:42
add comment

If you are using Child themes:

if(!is_child_theme()){
     add_filter('template', 'my_mobile_template');
}
add_filter('stylesheet', 'my_mobile_stylesheet');

That's because you defined the template already in the child themes stylesheet.

Took me literally a week to figure it out.

share|improve this answer
add comment

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.