• How it works?
• Installation Instructions
• Using the Plugin - For End Users
• Upgrading Device Data
• Using the Plugin with PHP Code - For Theme Developers
• Download
• Additional Features
• Additional Themes

1. Detection - works out the type of device accessing the web site and provides information about the hardware, operating system and browser.
2. Optimisation - enables the theme used to be altered depending on the detected properties.

Detection

The plugin contains a small database capable of determining the requesting device's properties extremely quickly using the finger prints (technically called useragents) sent by web browsers. No cloud services, PHP extensions or external components are required. Once the plugin is installed the detected device properties are available to theme developers.

Optimisation

A simple user interface enables non-technical users to define rules to alter the web sites response for different device types. Themes can be altered, or the request redirected to another web site. For example; rules can be defined to treat small screen mobile devices, smartphones and tablets differently from each other. Adverts could be optimised for the smaller screens, or content limited to the essential parts of a page.

The plugin is provided for free to all Wordpress users under the Mozilla Public Licence 2. Paid for versions are available that offer more properties and features.

A working copy of Wordpress version 3.4 is needed. The installation of Wordpress is not covered in these instructions. Further information about the Wordpress environment can be found at www.wordpress.com.

1. Within the admin area of your Wordpress installation select Plugins from the left hand menu. This will bring up a list of installed plugins.
2. Underneath the Plugins section there will now be a menu link that reads Add New. Select this.



3. A search box will appear within the main window. Type 51Degrees.mobi and select the Search Plugins button. This will show all the plugins that are hosted within the Wordpress directory and have been authored by 51Degrees.mobi.



4. Under the title of the plugin that reads 51Degrees.mobi Device Detection select the Install Now option. A window may appear asking if you are sure about installing the plugin. Select Yes or Ok to begin installation process.



5. When complete the screen will change stating "Successfully installed the plugin 51Degrees.mobi Device Detection". At this point select the link that reads Activate Plugin.



6. With the plugin activated 51Degrees.mobi will appear in the left hand menu. Selecting 51Degrees.mobi will display options associated with the plugin enabling detection and optimisation features. The context help tab at the top right hand corner of the Wordpress page, or the following instructions on this page, can be used to learn how to configure the available options.

When the plugin is installed and activated 51Degrees.mobi is visible under the left hand Settings menu allowing you to control how your site will respond to visitors from difference device types. For example; SmartPhones, Tablets and standard browsers could all receive different themes optimised for their unique capabilities such as touch or screen size. There are options to change the theme used with the page, or redirect the visitor to another URL depending on the requesting device type.

Within the plugin setting you will see six distinct areas that effect the display for your visitors:

1. At the top of the settings page are the rules tabs. Select Create Rule to add the first rule. Select the tab name to change it to something more meaningful to you. Select the + symbol to add additional rules. Rules are evaluated in order from left to right. The first one which matches the requesting device is used to control the response.



2. Below the Rules tabs are tick boxes for basic properties that can be used to adjust which types of devices will be affected by the rule. Selecting one or more of these property tick boxes associates the rule to the device type. For example; to apply a rule to Tablet devices only you would select the Tablet tick box and none of the others.

You may need to upgrade the plugin to activate all the properties.



3. Within the Advanced Properties section it is possible to further customise the rule using more properties.

For example; if you would like your rule to apply to devices with a screen resolution of 800x480 pixels then you would select the IsMobile, ScreenPixelsHeight and ScreenPixelsWidth tickboxes and set their Value boxes to True, 800 and 480 respectively. 

More properties are available to choose from when the plugin is upgraded. The free plugin provided from the Wordpress plugins menu contains basic properties only. Learn more



4. The action controls how the site responds to requests from matching devices. Two possible actions are available:

   1. Change the theme to one more suited to the requesting devices capabilities. For example, on small screen devices, less important content can be omitted or smaller banner ads can be displayed.
   2. Redirect the request to another web site more suited to the device.

A drop down list in the Action area contains a list of all the installed themes. One of these can be chosen for use with the rule. Alternatively the [Redirect to url] option can be selected and a text box will appear to the right of the drop down list. This is where a new URL can be placed to redirect all requests from devices matching the rule.



5. Select the Save Rule button to save your settings.

At this point, whenever a visitors comes to your site using a device that matches the properties selected they will be re-directed to a different site, or the theme altered depending on your settings. If no rules match, the Wordpress site will continue to display content as it did prior to the installation of the plugin.

6. Other options available are:
• Delete - removes the rule.
• Increase Priority - the rule will be evaluated before other lower priority rules.
• Decrease Priority - the rule will be evaluated after other higher priority rules.
7. The Global Settings section includes an option to share usage data with 51Degrees.mobi helping us continual improve our products. Learn more about sharing usage data.



8. If you subscribe to Device Data, input your licence key into the box at the bottom of the page. You can then use the Automatically Update button to download new device data.

The 51Degrees Wordpress plugin can be upgraded to use CMS or Premium data in two ways.

1. Plugin Download - Download a new plugin from the 51Degrees.mobi web site and upgrade.
2. Automatic Upgrade - Paste a licence key into the Plugin an automatically upgrade. This requires the PHP environment to support file updates and outbound web connectivity.

Plugin Download

Some servers do not allow file changes or downloads from external websites that our automatic upgrade process depends on. To enable Premium or CMS data on such installations you can download a plugin with extra data manually from this website and upload it to Wordpress manually.

Download the plugin from our downloads page by pasting your licence key into the text box provided.

If the licence key is valid you will be able to download the Wordpress plugin, packaged as a zip file. Before uploading the plugin to your Wordpress site you will need to deactivate and delete your current 51Degrees.mobi plugin in order to avoid possible clashes.

To do this navigate to the plugins menu and deactivate the 51Degrees.mobi plugin. This will then enable the delete option.

Once the previous plugin is deleted you are ready to upload the upgraded plugin. Go to the Wordpress plugin page and and select Add New.

Select Upload from the top of the page. You will then be prompted to provide the location of the plugin. After it is uploaded and activated and you will see 51Degrees.mobi in the left hand menu and when selected additional properties and options.

Automatic Upgrade

To update straight from your plugin copy your licence key into the Upgrade Device Data section of the plugin page and select the update button.

Important

After the plugin has been upgraded WordPress will no longer automatically inform you when updates are available. Please follow us on Twitter @51Degreesmobi, follow our RSS feed, or check our blog regularly to receive update notifications.

1. With the plugin installed and activated, login as a user account with sufficient permissions to customise a themes PHP code.

Navigate to the theme editor by clicking on "Appearance" and then "Editor" (in the left hand menu). This will display the code of the current theme.

For this tutorial the default theme, "Twenty Eleven", is in use.



2. In the editor screen look on the right hand side menu and find the file name that reads "Main Index Template (index.php)" and click it.

The main screen will change to show all the PHP code contained within this file.



3. Within this file find the following lines of code.

<div id="primary">
<div id="content" role="main">

They are located near the beginning of the file after the file description comments.

As the $_51d variable is declared in global scope, you will need to use the global keyword to use it.

Also note that that all properties are given as strings, even if the property is boolean. This is to ensure data consistency.

Add the following code after the lines found above.


<?php
  global $_51d;
  if($_51d['IsMobile']=='True') {
    echo "Welcome Mobile Visitor";
  }
  else {
    echo "Welcome Non-Mobile Visitor";
  }
?>

The changes should be similar to the following screen shot.



The addition of this small piece of code within the Wordpress theme will print a message on the main index page of your Wordpress site. The message will change depending on whether the visitor is using a mobile device or a non-mobile device.

All the properties exposed by the plugin are accessible via the $_51d array. You could use var_dump($_51d); to easily see all the properties and values available. See the PHP Guide for more information.

The paid for versions of the plugin contain more properties and features. Learn more.

51Degrees.mobi paid for device data can be distributed under licence with 3rd party skins or plugins. Please contact us for more information.

To disable redirection (eg, to have a link to the desktop site) you will need to 'NO_SWITCH' to true:

$SESSION['NO_SWITCH'] = true;

This needs to be set before the desktop page is loaded. Redirection can be re enabled by unsetting 'NO_SWITCH'.

• How it works?
• Installation Instructions
• Using the Plugin - For End Users
• Upgrading Device Data
• Using the Plugin with PHP Code - For Theme Developers
• Download
• Additional Features
• Additional Themes