1

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?

Improve this question

2 Answers 2

Reset to default
5

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!

Improve this answer
5
  • yeah that's really cool. Can I just load a specific theme if wp_is_mobile equals true?
    – Pollux Khafra
    Commented Aug 21, 2012 at 20:56
  • @PolluxKhafra Absolutely! I'll edit my answer to give a better use case.
    – Brian Fegter
    Commented Aug 21, 2012 at 20:59
  • @PolluxKhafra Check out my latest edit. This should suit you well. Remember template and stylesheet are the directory names.
    – Brian Fegter
    Commented Aug 22, 2012 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
    Commented Aug 22, 2012 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
    Commented Aug 22, 2012 at 5:42
2

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.

Improve this answer

Your Answer

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

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