WordPress Theme Swap for Mobile

February 7th, 2012 by Christian Skelly

Your business utilizes a WordPress website that looks sharp, gets updated frequently, is highly intuitive, optimized for social sharing and is user-friendly. Seems like your strategy of maintaining a timely blog or site with regular, thought-provoking content is paying off. Now look at the same site on a mobile device. Ouch!

Do you need to start all over again? Thankfully, you don’t. You can build a WordPress mobile site and get back on track.

Following on from our earlier post on content creation, the best way to render your WordPress site on a mobile device is through a separate theme designed exclusively for the mobile format. Using a separate theme with the same WordPress backend means all your permalinks and other crucial WordPress data remains intact.

To achieve automatic theme swapping we will need a robust device detection script that will simply tell us which theme to load and a custom plugin that will perform the actual swap.

Device Detection

I recommend using the popular WURFL library for device detection. The library parses the user-agent string of the viewing device and matches this against a well-maintained database of device capabilities. Is the device wireless? Does it use a touch screen? Is it an Android, IOS or desktop device? The list goes on and on.

Custom Plug-in

The ability to create custom WordPress plugins enables us the extend the base functionality of our site, to add new features that integrate seamlessly with our current set-up. WordPress’s Hook architecture will help to create your theme-swapping plugin which you will be able to activate and deactivate at will. Coding instructions for creating your custom WordPress plugin using the WURFL library can be found on our Garage technical blog.

Congratulations! Your site should now display the appropriate theme according to your users’ device.