Detecting mobile devices for your WordPress website

Last updated on November 28, 2011. Tags: CSS layout, functions.php, mobile phone, tablet computer

My earlier article discussed that not all websites need a mobile version. In this article, I will tell you how to adjust your website to make it more convenient for mobile device users.

Actually, there are several ways of serving the mobile version of a website. One that is commonly used by popular websites like Wikipedia and Yahoo is to serve a different website accessible at subdomains or folders mobi.website.com or website.com/mobi for the website www.website.com, or perhaps buy a different domain ending at .mobi such as www.website.mobi. Some websites, such as Wikipedia, will allow you the option to opt out of viewing the mobile version and instead see the full view of the website (full view here means what we can see in desktop computers). I've been looking for the code to do this but I could not find it.

I am personally not a fan of different URLs for different versions of the same website. I don't want people viewing mobi.codegrad.hub.ph suddenly wondering what's on codegrad.hub.ph (ok for now I do't have any plan to create a mobile version of Codegrad as I could not imagine web developers programming HTML or PHP using mobile devices). Moreover, if you used Google or any other search engine, even if you are using the mobile version of the search engine, when they present the results, they will show the "original" URL of those websites, which is usually the one designed for desktop computers. You need to "hide" the URL of the mobile version (possibly using meta robots or robots.txt) and use some scripting to forward mobile device users from your original URL to those locations. Your visitors might wonder why they are being redirected in all sudden. Worst, if you forgot to hide the mobile version, search engines will see different websites having exactly the same content and might penalize you for it by lowering their rank in search results.

Hence, the plan here is to present a different layout whether the visitor is accessing it through desktop computer or through mobile devices. The website will work in a way that depending on whether the visitor is using desktop computer or mobile, it will use two (or more) different CSS and may present or omit some features (such as sidebar).

First, you need to insert the following codes in the functions.php file of your theme:

function detectdevice()
{
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
$arg = "false";
if (stripos($ua,'android') || stripos($ua,'ipad') || stripos($ua,'iphone') || stripos($ua,'webos') !== false) {
$arg = "true"; }

return $arg;
}

Those values after the part $ua (ipad, iphone, android, webos) are called "user agent". It pertains to the device or operating system that is being used to access the website. It is some sort of information that the retrieving device send to the server of the website telling it what device is it, e.g., if it is a phone, a tablet computer or a desktop computer, or what operating system it is using, e.g., Windows, Macintosh or Linux.

In the above example, the user agent may pertain to a device or operating system. I didn't list all the user agents as I could not find a complete list and newer device and operating sytems are invented as time passes by. There are some, such as webos, that I am totally not familiar with. I suggest you do your own research about user agents if you need anything else aside from the ones mentioned here.

Then, you might want to test if the function detectdevice() is working by inserting this code anywhere in your theme.

<?php if (detectdevice() == 'true') : ?>
This is being accessed from a Mobile Device!
<?php else : ?>
This is being accessed from a Desktop Computer!
<?php endif; ?>

To use two different stylesheets, you need to first create the second stylesheet. The default stylesheet file of a WordPress theme is style.css. Assuming that you made your website first for desktop computer users first and decided to create a mobile version later, the CSS codes in the style.css is the one optimized for desktop computers. Thus, the second CSS file that you will create is the one that is for mobile devices.

You can name this second CSS file with anything except for style.css or rtl.css so as not to cause any conflict with how the WordPress themes work by default. I would also suggest that you name it (but not required) in a way such that its name would come AFTER style.css if they are listed in alphabetical order. The reason is that when you open the theme editor in your dashboard, it would open first style.css but if there's another CSS file that comes before style.css in alphabetical order, that other CSS file will be opened first. For example, I advise that you name the second CSS file as zstyle.css but not astyle.css.

Then, encode the content of the second stylesheet such that it will produce the design or layout that you want for the mobile version of your device. To make your task easier, have a temporary copy of your website elsewhere and use that to test this second CSS file. After you produce the design that you want, move the second CSS file to your original theme folder and delete the temporary copy of the website.

In the header.php file of your theme, look for the following line of codes:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

The part stylesheet_url will automatically return the one with name style.css in your current theme folder. To use the detectdevice() function to return two different stylesheets; one for desktop computer and one for mobile devices, replace the line of code shown above with the ones below. Here, the zstyle.css is the name of the second CSS file and you can change it to whatever name you give to your second CSS file.

<?php if (detectdevice() == 'true') : ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/zstyle.css" type="text/css" media="screen" />
<?php else : ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php endif; ?>

To remove the sidebar for the mobile version of your website, replace the code below:

<?php get_sidebar(); ?>

...with this one:

<?php if (detectdevice() == 'false') : ?>
<?php get_sidebar(); ?>
<?php endif; ?>

In the above code, WordPress will display the sidebar only if the device being used to access the site is not a mobile device.

Note that depending on the theme, you might need to do this in several theme files such as index.php, page.php, single.php, 404.php, search.php and archive.php. Also, it is not advisable if some of the important codes controlling your layout, such as the close tag of your content area is in the sidebar.php file. A safer way to remove the sidebar is to reduce its width to zero in the second CSS file and individually remove those features (categories, latest posts, etc) that appear in the sidebar. For example, your sidebar.php would probably look like this:

<?php if (detectdevice() == 'false') : ?>
<ul>
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>
</ul>
<?php endif; ?>

There are several combinations that you can do with this PHP code and that would entirely depend on the difference between your websites' mobile version and the "full view" desktop computer version. I would suggest you try it on websites that are not yet active, or a replica of your existing website segregated for the purpose of testing codes and implement them only on an active website when you're done testing and pretty certain that it's gonna work.

Posted by Greten on August 30, 2011 under Designing for Mobile Devices, WordPress

Share and Enjoy: