Join 18,800+ Readers

Updating Your WordPress Site for Mobile Support

by Jake Rocheleau

on December 16, 2012

in WordPress

Learn how to earn $125 or more per hour as a freelancer - Click Here
Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN for 20% off

The WordPress CMS has become extremely popular amongst web developers. This open source framework is easy to work with and provides an excellent backend Admin dashboard. But how can your WordPress blog handle mobile visitors?

featured image - iphone ios app WordPress mobile design responsive websites

I want to use this article as a brief discussion into WordPress for mobile. There are various methods for implementing updates to your own theme, or installing custom plugins for mobile support. All of these solutions are great and offer different platforms for different people. I recommend reading up on a few of these methods and see which ideas can provide the most benefit on your website.

Responsify Your Layout

This is possibly the most suggested reference for mobile developers, although it is very difficult to hack into an existing theme and turn it responsive. I wrote a simple HTML5/CSS3 mobile list view tutorial which incorporates many of these responsive ideals.

But it is a struggle taking the time to download your current theme and go through editing files as needed. A solution I have found that works well is to re-code your layout into plain HTML first. Just rebuild your homepage in HTML/CSS and then go back to update your codes for responsive techniques. Once you’ve got a working template it will be much easier replacing your existing theme files.

Wordpress responsive theme design freebie 2012

Alternatively you may consider starting from scratch with an already-existing responsive WordPress layout, and then customize it as needed. I am a really big fan of the new Twenty Twelve theme which was designed as a fully responsive interface. This includes responsive page images, post content, and navigation menus. It shouldn’t matter which path you take to build a responsive layout – as long as the techniques work in all smartphone browsers.

Any Mobile Theme Switcher

Possibly the best open source plugin for mobile support is the Any Mobile Theme Switcher. It will automatically detect when your visitors are using any number of mobile phone operating systems and display your choice of mobile themes instead of the default theme. Some of the supported devices include the iPod Touch/iPhone, iPad, Android, Blackberry, and Windows Mobile Phone.

Wordpress theme switcher apps plugins

Believe it or not the plugin has settings where you may choose a different mobile theme for each device type. This means you can style a special theme which works properly in Mobile IE without having issues in Mobile Opera or Mobile Safari. This is by far my favorite choice for handling immediate mobile theme redirects without very much hassle.

WordPress Mobile Pack

If you are looking for more functionality than just theme switching, I have to recommend WordPress Mobile Pack which is a completely free plugin for download. The latest version was released for WordPress 3.0.5 but should still work perfectly fine running in WordPress 3.5+. The features list is unbelievable and really caters your entire WordPress installation to handle any mobile browser. Here are just a few key features:

  • Mobile theme switcher with options for users to change back into standard desktop view.
  • Contains a default mobile theme so you don’t need to install or build any further designs.
  • Mobile Admin Panel Dashboard theme crafted so you can easily login and create new posts while out on-the-go.
  • Custom mobile ad widget to replace desktop advertisements with AdMob or Google’s Mobile Adsense codes.

And these are just some of the more common features you will find inside the package. Check out some of the plugin screenshots which illustrate the unique mobile themes and their admin dashboard layout. But of course, you have the option of installing your own custom themes and using these as mobile replacements too.

The Mobile Pack is just simply more elegant when dealing with mobile smartphone browsers. As a whole you may be surprised with how much functionality you can find. The learning curve is not too heavy for new users, so it is definitely worth toying around if you have an interest.

Handling Custom Mobile Detection

There may be situations where you do not want to bother using somebody else’s plugin code. Some web developers would rather build their own system in PHP and redirect users into their own mobile themes. This is certainly possible, but does require a bit of intermediate level knowledge in PHP.

Take a look at this custom WP tutorial which offers a step-by-step process for building your own mobile detection system. Much of the code is placed inside your custom functions.php file which may be edited at any time. You can return new values for WordPress to handle theme switching, and will thus load in different PHP templates.

This method is probably the most convoluted for dealing with custom mobile support. But it also provides you with the widest breadth of opportunity to customize your layout. By writing your own mobile functions you may update anything in the page on-the-fly after detecting certain mobile Operating Systems. If you want to build with a simpler tutorial check out this great post on DigWP which only requires a couple blocks of code.

Related Articles

Although I have shared a lot of helpful techniques, you should check out some of these other related posts online. There are just so many different ways to handle mobile users on WordPress. Don’t be afraid of moving outside the box to find the perfect solution.

Final Thoughts

Supporting mobile websites visitors is one large aspect to creating an all-around handy WordPress website. Responsive themes are just as popular now as they have been in recent months. But it is not always possible for designers to go back and re-code their WordPress themes with responsive tendencies.

It is my hope that some web developers will find these techniques useful in future projects. Creating your own unique mobile theme and handling mobile redirects is not an easy challenge. But it is also not something which requires days of study to master. Just toy around with a few plugins here and see what you can put together. If you’ve got ideas or questions related to mobile WordPress development feel free to share with us in the post discussion area.

Powered by Shutterstock

About Jake Rocheleau

Jake is a frontend user experience designer and frequent blogger. He writes about all things web and mobile design. Check out his updates on Twitter @jakerocheleau. Connect with Jake on google+