Book Image

WordPress Mobile Web Development: Beginner's Guide

By : RACHEL MCCOLLIN
Book Image

WordPress Mobile Web Development: Beginner's Guide

By: RACHEL MCCOLLIN

Overview of this book

The chances are that more of your WordPress website visitors are using mobiles, or more clients are demanding responsive or mobile sites. If you can use WordPress to build mobile-friendly sites you can win more business from clients and more traffic for your site. "WordPress Mobile Web Development Beginner's Guide" will benefit you whether you've dabbled in WordPress or worked with it for years. It will help you identify which approach to mobile is most appropriate for your site (responsive, mobile, or web app) and learn how to make each one work, demonstrating a variety of techniques from the simple to the more complex, working through clear practical examples and applying these to your own website. Start by quickly making a WordPress site mobile-friendly, using off the shelf plugins and responsive themes, choosing the best ones for you and customising them. This leads into responsive theme design, with advice on layout, images and navigation. Finally, learn how to build a web app in WordPress, making use of plugins, APIs and custom code. If you need to hit the ground running with mobile WordPress development, then this book is for you. With practical examples and exercises from the beginning, it will help you build your first mobile WordPress site without having to learn aspects of WordPress or mobile development that aren't relevant. It will also help you understand which approaches work and why, so you can apply this knowledge to future projects.
Table of Contents (18 chapters)
WordPress Mobile Web Development Beginner's Guide
Credits
About the Author
About the Reviewers
Acknowledgement
www.PacktPub.com
Preface

Plugins that will make our site mobile


Now that we've identified how we need our mobile site to work, let's have a look at some of the plugins available and how they might match up to our criteria. Once we've done that, we'll have a go at installing and configuring two of the most popular mobile plugins.

Note that this list is taken from the plugins available in the WordPress plugin repository at http://codex.wordpress.org/Plugins in June 2012. As plugins are added to the repository and sometimes removed, the list may change over time.

Plugin

Link

Features

Pros

Cons

WPtouch

http://wordpress.org/extend/plugins/wptouch/

  • Reliable and popular.

  • Can be used with no customization—works immediately.

  • Customization options for colors, logo and menu icons.

  • Use a different navigation menu from the desktop site—useful for different mobile navigation.

  • Display widgets.

  • Limited customization available—makes it difficult to carry through branding or styling to mobile site.

  • Doesn't resize image files for mobile devices.

  • The mobile menu has to be set up even if you want the same menu as in the desktop site.

WordPress Mobile Pack

http://wordpress.org/extend/plugins/wordpress-mobile-pack/

  • Detects mobile User Agents and uses a mobile switcher combined with a number of mobile themes which you can choose from.

  • Can be integrated with the WP SuperCache plugin for speed.

  • Flexibility—can be used as a switcher.

  • Customization options via an options screen or by editing the theme's CSS.

  • Relatively fast to load on mobile devices.

  • Limited customization options.

  • Displays widgets.

Wapple Architect

http://wordpress.org/extend/plugins/wapple-architect/

  • Uses a third-party service to make existing theme mobile-friendly

  • Detects User Agents—which one it targets can be configured.

  • Requires a free license key.

  • Works with existing themes, so can carry styling through to the mobile site.

  • Resizes images for speed on a mobile site.

  • Requires a license key, although this is free.

  • Displays widgets.

Mobile Press

http://wordpress.org/extend/plugins/mobilepress/

  • Detects mobile User Agents and uses a mobile switcher combined with bundled themes to render the mobile site.

  • Switcher allows flexibility to use with your own theme.

  • Doesn't display menus—so limited use for sites with a static home page.

WP Mobile Detector

http://wordpress.org/extend/plugins/wp-mobile-detector/

  • Detects User Agents and uses a switcher to display a mobile theme. Comes with seven pre-installed themes.

  • A premium version is available with more customization options.

  • Switcher can be used to switch to your own mobile theme.

  • Seven mobile themes give a degree of choice.

  • The bundled themes are limited and not very attractive.

  • Doesn't display widgets.

  • Colors and logos can't be changed without upgrading to the premium version or editing the theme CSS.

Note

A mobile switcher is a plugin (or functionality within a plugin), which detects when the site is being viewed on a mobile device and automatically switches to a theme which the site administrator defines. It normally detects the User Agent to do this.

A User Agent is an application, which accesses a website. Generally, this refers to a browser, but it can include screen readers, spiders, or any other application or programs that access websites.

Having looked at some of the most popular plugins and how they work, let's try setting two of them up—WPtouch and WordPress Mobile Pack. WPtouch is the most widely used mobile plugin.

WPtouch is used on a huge proportion of WordPress sites, and so the chances are that if you use a mobile to browse the web, you've seen it on some sites without even realizing.

WPtouch has a premium version with extra functionality, but here we will be working with the free version, available at http://wordpress.org/extend/plugins/wptouch/. As of January 2012, this plugin had been downloaded nearly three million times, so that's a lot of websites!