You are here

Add mobile theme to Drupal site

This method will allow mobile users to be redirected to another url which shows a site based on the same database but with a different theme.

  • A key advantage with this method is that since mobile pages have a different URL there is not a caching problem.
  • They can be linked together in Google Analytics with one of the urls defined as cannonical.
  1. Create a mobile domain within the /sites directory.
    • e.g. /sites/m.nlife.ca
  2. Copy /sites/default/settings.php into the folder created above
  3. Add a /themes subdirectory containing the mobile theme
    • e.g. /sites/m.nlife.ca/themes/zurb_nl
    • It’s a good idea to add this to the desktop site as well so it can be configured.
  4. modify the mobile settings.php to load the mobile theme (and home page if needed) by replacing:
# $conf = array(
#   'site_name' => 'My Drupal site',
#   'theme_default' => 'minnelli',
#   'anonymous' => 'Visitor',
  • with:
$conf = array(
  'theme_default' => 'zurb_nl', #or whatever
  'site_frontpage' => 'home_mobile',
);
  1. Symlink /sites/default/files to the mobile folder
    • e.g. ln -snf /home/newlife/sites/default/files /home/newlife/sites/m.nlife.ca/
  2. Modify .htaccess to provide the actual redirect. E.g. using nlife.ca as example:
# nlife.ca or www.nlife.ca - desktop/tablet site
# m.nlife.ca               - mobile site
# d.nlife.ca               - desktop site where mobile wants to see full site

# Optional removal of www prefix
RewriteCond %{HTTP_HOST} ^www\.nlife\.ca$ [NC]
RewriteRule ^(.*)$ http://nlife.ca/$1 [L,R=301]

# Don't change if already mobile, or forcing to desktop
RewriteCond %{HTTP_HOST} !^m.nlife\.ca$
RewriteCond %{HTTP_HOST} !^d.nlife\.ca$

# Mobile: force mobile clients across to the mobile site
RewriteCond %{HTTP_USER_AGENT} !ipad [NC]
RewriteCond %{HTTP_ACCEPT} "text/vnd.wap.wml|application/vnd.wap.xhtml+xml" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|erics|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]
RewriteRule ^(.*)$ http://m.nlife.ca/$1 [L,R=302]

This technique is working well on gw.ca and will be applied shortly to nlife.ca (a Downtown Toronto Church).

Topic: