Make a Mobile version of your Drupal Site using jQuery mobile and some magic !

Let's get started !

We'll use during this tutorial following tools :

• Drupal
• jQuery Mobile
• Domain Access module
• Zen theme

I assume that we already have some site installed & running and that we are creating a mobile version of this site. For this tutorial, I’ll use drupal6.dev as the domain name for the main site and m.drupal6.dev for the mobile version.

Domain Access module setup

First of all, we need a tool to separate the presentation and content of the mobile site from main site. There is a great module on the Drupal community site called Domain Access (  http://drupal.org/project/domain ) which allows you to use of one Drupal installation & database to run different sites.

Let’s put this module into our site’s modules directory (by default, sites/all/modules) and enable it. You should read the installation instructions from the module’s README.txt and INSTALL.txt files, but basically, we need to put a new code line into the end of the settings.php file to get it working (sites/default/settings.php):

include './sites/all/modules/domain/settings.inc';

There are many sub-modules in the Domain Access module. For now, we need to enable the Domain Access, Domain Configuration, Domain Settings & Domain Theme modules.

Modules admin page:

After that you need to go to the module’s configuration page (http://drupal6.dev/admin/build/domain) and create new domain record (http://drupal6.dev/admin/build/domain/create).

New domain record page:

Remember that you’ll need to setup virtual hosts for your web server for the m.drupal6.dev domain name to point to the main site’s directory and put new records into your local hosts file. You can search the web to find information about how to do this for your web server.

After we created the domain record for the mobile version, we are ready to start theme creation.

Theme creation and setup

I recommend using the Zen starting theme (http://drupal.org/project/zen) for ANY new theme you create for almost any site types. This is the real time-saver and a very solid and flexible, standards-compliant theme skeleton. You can check the online documentation for more details.

I’ll assume that you have created and enabled the Zen-based theme by yourself and now we are ready to assign this theme to our new domain record. I’ll use mobile as a theme name.

You need to go to the domains list page (admin/build/domain), click on the theme link for the mobile domain record, and make our new theme the default.

Now you need to go to your mobile site (http://m.drupal6.dev) and check if new theme has appeared.

Drupal includes a lot of css & js files in any theme, but we don’t need many of them for the mobile version, so I’m going to strip all css & js files from our theme and load only the needed files.

I’ll use the page pre-process function to access page variables such as $styles and $scripts. You can check Drupal’s Theming Guide for more details on pre-process functions.

Create this function in the theme’s template.php file:

function mobile_preprocess_page(&$vars, $hook) {
  // Use only theme's js 
  $scripts = array('theme' => array(
    ‘sites/all/themes/mobile/js/js.js' => array('cache' => 1, 'defer' => '', 'preprocess' => 1),
  ));
  $vars['scripts'] = drupal_get_js('header', $scripts);
  // Use only theme's css 
  $styles = array('all' => array('theme' => array(
    'sites/all/themes/mobile/style.css' => 1,
  )));
  $vars['styles'] = drupal_get_css($styles);
}

Defining theme’s regions

We don’t need most of the default Zen theme’s regions for our example theme, so we need to edit our mobile.info file and leave only footer & header regions:

regions[header] = header
regions[footer] = footer

Now, we can include any Drupal blocks we need in these regions from the blocks admin page.