WordPress Mobile Web Development Beginner''''s Guide ppt

WordPress Mobile Web
Development Beginner's Guide
Make your WordPress website mobile-friendly and get to
grips with the two hoest trends in web design—Mobile
and WordPress
Rachel McCollin
BIRMINGHAM - MUMBAI
WordPress Mobile Web Development Beginner's Guide
Copyright © 2012 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system,
or transmied in any form or by any means, without the prior wrien permission of the
publisher, except in the case of brief quotaons embedded in crical arcles or reviews.
Every eort has been made in the preparaon of this book to ensure the accuracy of the
informaon presented. However, the informaon contained in this book is sold without
warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers
and distributors will be held liable for any damages caused or alleged to be caused directly or
indirectly by this book.
Packt Publishing has endeavored to provide trademark informaon about all of the
companies and products menoned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this informaon.
First published: August 2012
Production Reference: 1170812
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84951-572-6
www.packtpub.com
Cover Image by Faiz Fattohi ()
Credits

Author
Rachel McCollin
Reviewers
Evangelos Evangelou
Steve Graham
Todd Halfpenny
Acquision Editor
Karkey Pandey
Lead Technical Editor
Unna Shah
Technical Editors
Devdu Kulkarni
Ra Pillai
Prashant Salvi
Project Coordinator
Sai Gamare
Proofreader
Linda Morris
Indexer
Monica Ajmera Mehta
Producon Coordinators
Aparna Bhagat
Nitesh Thakur
Cover Work
Aparna Bhagat
Nitesh Thakur
About the Author
Rachel McCollin is a WordPress Developer specializing in responsive and mobile web
design. She rst learned to code as a teenager when her parents bought her a computer
with very few good games available she learned BASIC so that she could write

her own code.
Aer gaining a degree in Psychology, she worked in e-learning, moving to web design
aer eding the Labour Party's general elecon website in 2001.
Rachel now runs Compass Design, a web design agency based in Birmingham, England,
but with clients across the UK and internaonally. The agency was established in 2010
and quickly began specializing in building WordPress themes and sites, with a slant
towards responsive themes. Compass Design now prides itself on making all of the
new sites it develops mobile-friendly. Rachel tweets about WordPress, mobile
development, and many other things that catch her eye. You can follow her on
twier at
@rachelmccollin.
I've learned most of what I know about web design, and WordPress
development in parcular, from the web design community. I'd like to
thank all of the WordPress developers and designers, who have inspired
and taught me, in parcular the organizing team for WordCamp UK,
without whom I would have never got the chance to discuss my ideas
on mobile WordPress development with an audience.

A number of friends and colleagues have provided support, feedback,
and advice—they include Andy Cobley, Tracey Dixon, Kriss Fearon,
Todd Halfpenny, Sue Davis, Karen Bugg, Gary Jones, and Isaac Keyet
at Automac. My colleague Nivi Morales has taken up a lot of the
slack in terms of client work while I've been wring this book, and
given me invaluable moral support. And last, but not least, I have to
thank my husband Pete, who doesn't let the fact that talk of WordPress
and mobile websites makes his eyes glaze over, get in the way of his
unwavering support for me in running my business and wring this book.
About the Reviewers
Evangelos Evangelou currently lives in Cyprus and is the Creave Director of
PricklyPear Media.

Evangelos was born in the UK to Cypriot refugee parents from Kyrenia. His parents
came to the UK in the mid-80s where they had their own catering business.
In 2005, Evangelos completed an honors B.Sc. degree in Web & Mulmedia from
the University of Central Lancashire. His studies were later nalized with an M.A. in
Animaon. Soon aer his degree, Evangelos moved to Cyprus where he worked for
SpiderNet (now PrimeTel—currently the largest ISP on the island) creang and building
professional websites.
During his me of employment, he worked on several large-scale websites, including
three of Cyprus' biggest websites such as Cyprus Airways, PhileNews, and the
University of Cyprus. Soon aer, PricklyPear Media Ltd. was created.
Now, Evangelos spends much of his me with personal clients and template producon
with Vorel Media, founded by Evangelos Evangelou and his good friend Bryan Vorel.
Evangelos has experience in WordPress, SEO, HTML, CSS, JavaScript, and template
producon. He is also a strong forum member on SitePoint, and was recently given
a 'mentor' badge. On that note, Evangelos loves what he does and loves life!
Acknowledgement
I'd like to thank Packt Publishing, who gave me this opportunity in reviewing such a great
book. I would also like to thank SitePoint for being such a great place for web designers.

My personal life is also very important, this acknowledgment goes to my loving parents,
who made sure I was happy and had everything, achieving the unimaginable for their
children (as in their mind we're sll kids). I'd like to thank my four brothers for the support
that they gave while reviewing this book, which would have been impossible without their
constant re-enforcement.

Apart from my family, I'd like to thank everybody who helped PricklyPear Media in making
it what it is today; this includes my past employers and co-workers. I look forward to Packt
Publishing publishing more amazing books.
Steve Graham is an Entrepreneur and Web Developer specializing in WordPress
websites. As a co-owner of Internet Mentor (

meet-the-team/
), he aims to ensure that all of his clients derive measurable and
sustainable direct results that drive business growth.
Steve focuses on enabling clients, whether this is in relaon to their business websites
and social media acvies, or in a broader sense through his other great passion of
delivering presentaon and leadership skills.
Todd Halfpenny has been working as a Soware Designer for mobile telecoms
operators for over 10 years and has an innate love for anything, and everything,
related to mobile technology.
For the past four years, he has also worked on many WordPress projects, both personal
and client based. Through these projects, he has developed tons of WordPress plugins,
and among those listed in the
WordPress.org plugin repository are the highly popular
Widgets on Pages and Responsive TwentyTen.
His journey with mobile technology has also led him to develop a few Android applicaons
including Asssist, which was the rst Dribbble client for the plaorm.
Todd can be found online at
and on Twier at
@toddhalfpenny.
www.PacktPub.com
Support les, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support les and downloads related
to your book.
Did you know that Packt oers eBook versions of every book published, with PDF and ePub
les available? You can upgrade to the eBook version at
www.PacktPub.com and as a print
book customer, you are entled to a discount on the eBook copy. Get in touch with us at
for more details.
At
www.PacktPub.com, you can also read a collecon of free technical arcles, sign

up for a range of free newsleers and receive exclusive discounts and oers on Packt
books and eBooks.

Do you need instant soluons to your IT quesons? PacktLib is Packt's online digital book
library. Here, you can access, read and search across Packt's enre library of books.
Why Subscribe?
 Fully searchable across every book published by Packt
 Copy and paste, print and bookmark content
 On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access
PacktLib today and view nine enrely free books. Simply use your login credenals for
immediate access.
Table of Contents
Preface 1
Chapter 1: Using Plugins to Make Your Site Mobile-friendly 9
Before we start 10
Plugins or responsive design – what to choose 10
How do mobile plugins work? 11
Idenfying the right plugin for our site 13
Time for acon – idenfying how your site should work on mobiles 13
Plugins that will make our site mobile 14
Time for acon – installing and conguring WPtouch 16
WordPress Mobile Pack – number two in the charts 23
Time for acon – installing and conguring WordPress Mobile Pack 24
Summary 30
Chapter 2: Using Responsive Themes 31
Mobile themes versus responsive themes 32
Idenfying the best approach for your site 33
Opons for developing a mobile site 33

Idenfying the best approach for our site 33
Twenty Eleven – conguring the default WordPress theme 35
Time for acon – conguring the Twenty Eleven theme 35
More responsive themes – installaon and conguraon 44
Scherzo – installaon and conguraon 44
Time for acon – installing and conguring the Scherzo theme 44
Ari – another clean minimal theme 47
Time for acon – installing and conguring the Ari theme 48
Codium Extend 53
Time for acon – installing and conguring the Codium Extend theme 54
More responsive themes 60
Table of Contents
[ ii ]
Taking it further – using a responsive theme just for mobile devices 61
Showing visitors dierent themes on dierent devices – how to do it 62
Stage 1 – installing and conguring themes 62
Stage 2 – installing and conguring a theme switcher 63
Time for acon – conguring the WordPress Mobile Pack
plugin as a theme switcher 63
Summary 68
Chapter 3: Seng up Media Queries 69
What you will need for this chapter 69
Working with the WordPress Editor 70
Time for acon – opening our stylesheet in the WordPress Editor 70
Creang a uid layout 71
Time for acon – digging into the Carborelli's layout styling 72
Time for acon – making our site uid 76
Moving on – planning for our media queries 79
Idenfying our breakpoints 79
In what ways should a site be dierent on dierent devices? 80

Before seng media queries – geng the browser to behave 81
Time for acon – adding the code to set our width correctly 81
Wring our media queries 82
Time for acon – wring our rst media query 82
Tesng our uid layout on a smartphone 84
Time for acon – a media query for smartphones in landscape mode 86
Reviewing what we've done 86
Summary 89
Chapter 4: Adjusng the Layout 91
Need for adjusng the layout 91
Altering the layout of our header 95
Time for acon – adjusng the header for iPads 95
Time for acon – adjusng the header layout for phones in landscape mode 98
Time for acon – adjusng the header layout for phones in portrait mode 103
Moving the sidebar below the content 105
Time for acon – moving the sidebar below the content
for tablets in portrait mode 106
Time for acon – rearranging our widgets 109
Adjusng the layout for more than two widgets 112
Three widgets side by side 112
Four widgets in a grid 112
Table of Contents
[ iii ]
Time for acon – tweaking the content and sidebar
layout for phones in landscape mode 114
Time for acon – rearranging the sidebar widgets for phones in portrait mode 117
Moving on to the footer 120
Time for acon – changing our footer layout for phones 120
Altering the layout of a fat footer 122
Reviewing what we've learned about the layout for

dierent screen widths 123
Summary 126
Chapter 5: Working with Text and Navigaon 127
A note on tesng 128
Opmizing text for small screens 128
Time for acon – changing text sengs 132
Why use ems ? 134
Time for acon – seng up text sizing in our media queries 135
Time for acon – adjusng the text size on phones in landscape mode 137
Opmizing fonts for mobile devices 140
Time for acon – specifying dierent fonts for mobile devices 141
Opmizing navigaon menus for mobile devices 142
Time for acon – changing the layout of the menu on small screens 143
Time for acon – changing the posion of the navigaon 145
Time for acon – linking to the reposioned navigaon 148
Summary 152
Chapter 6: Opmizing Images and Video 153
Making images t into a responsive layout 154
Ensuring images don't stray outside their container 154
Time for acon – making our images responsive 155
Resizing narrower images within the layout 157
Time for acon – giving our images a percentage width 158
Using CSS to resize images – the hitch 160
Proper responsive images – sending dierent image les to dierent devices 160
Are mobiles always slow? 160
Seng up our responsive images 162
Time for acon – eding the media sengs 163
Time for acon – installing the mobble plugin 164
Time for acon – using PHP to display the featured image 165
Time for acon – adding a featured image to each page 168

Featured images – the disadvantages 172
Table of Contents
[ iv ]
Adding video to our site 173
Displaying video – choosing a method 174
Using Flash 174
Inserng our video into the HTML 174
Using a service such as YouTube to stream video to our site 174
Streaming YouTube video responsively 175
Time for acon – adding a video to our site 175
Time for acon – adjusng the video width 178
Time for acon – making our video responsive 181
But are these videos truly responsive? I hear you ask 184
Summary 185
Chapter 7: Sending Dierent Content to Dierent Devices 187
Mobile-specic content – some consideraons 188
Why send dierent content to dierent devices? 188
What dierences will there be for our mobile site? 188
Methods to send dierent content to dierent devices 189
Hiding content using CSS 190
Delivering dierent content using PHP 190
Mobile First 190
Using CSS to hide page elements 191
Time for acon – hiding elements using CSS 191
Using PHP to send dierent content to dierent devices 194
Time for acon – removing a widget using PHP 195
Adding a mobile-only menu to the site 199
Idenfying the changes we need to make 199
Time for acon – seng up our mobile menus 201
Time for acon – coding mobile menus into the theme 205

Time for acon – styling the new mobile menus 210
Time for acon – adding a select menu 212
Summary 215
Chapter 8: Creang a Web App Interface 217
What is a web app and why would we develop one? 218
Developing a web app – designing the app 220
Choosing how to develop our web app 221
Pros and cons of the dierent methods 221
Creang a web app using a plugin 223
Creang a web app using a responsive design 224
Making a backup before we start 225
Hiding elements to create our web app’s home page 225
Time for acon – hiding home page content 226
Changing our web app’s design with CSS 230
Table of Contents
[ v ]
Time for acon – adjusng the header layout 231
Time for acon – eding the site descripon 236
Time for acon – seng up our web app’s navigaon 238
Time for acon – adjusng the footer layout 242
Creang a responsive web app – review 243
Using a mobile theme to create a web app 244
Creang our mobile theme les 244
Time for acon – copying our theme les to create a new theme 244
Time for acon – eding our mobile theme les 245
Time for acon – uploading and acvang our web app theme 248
Using a mobile theme to create a web app – review 251
Summary 252
Chapter 9: Adding Web App Funconality 253
What might we use a web app for? 253

Current WordPress plugins for web apps 254
Events, bookings, and management plugins 254
E-commerce and subscripon plugins 255
Geolocaon and mapping plugins 256
Social media plugins 256
Photography plugins 257
Creang our ice cream sundae builder 257
Time for acon – adding a form to our web app 258
Time for acon – integrang with PayPal 263
Time for acon – providing the visitor with direcons 267
Outside WordPress – third-party APIs 273
Summary 274
Chapter 10: Tesng and Updang your Mobile Site 275
Tesng your mobile site 276
Tesng on mobile devices 276
Resizing our browser window 277
Time for acon – using an extension to resize the Chrome browser window 278
Switching desktop Safari's User Agent to simulate an iPhone 280
Time for acon – switching our User Agent 281
Using a website to test responsive layouts 283
Time for acon – tesng your site on responsinator.com 283
Using mobile browser emulators 285
Time for acon – seng up Opera Mobile Emulator 286
Time for acon – tesng our site in Opera Mini Simulator 290
Time for acon – tesng with the Ripple extension for Chrome 291
Table of Contents
[ vi ]
Using a mobile device to update your website 295
Using the WordPress app 295
Time for acon – seng up and using the WordPress app 295

Summary 301
Pop Quiz Answers 303
Chapter 2, Using Responsive Themes 303
Chapter 3, Seng up Media Queries 303
Chapter 4, Adjusng the Layout 304
Chapter 5, Working with Text and Navigaon 305
Chapter 7, Sending Dierent Content to Dierent Devices 305
Index 307
Preface
WordPress is fast becoming the world’s most popular website for Content Management
System (CMS)—it now powers 22 percent of new domains in the USA. WordPress has a
comparavely quick learning curve and with the use of plugins and custom code, can be
made to run just about any website, no maer how complex is the funconality needed.
As more and more of us use devices such as smartphones and tablets to browse the Web
instead of a desktop computer, the need for websites to be fast and user-friendly on those
devices is geng more important. Mobile development is very hot in web design circles
right now, with constant advances in techniques such as a responsive design and mobile-rst
content strategy ensuring that websites not only look good on mobile devices, but also give
users the content and the experience they want.
If you’re one among the millions of people who own or manage a WordPress site, you’re
probably already thinking about making it mobile-friendly. If you’re a WordPress developer,
you may have been asked to develop a mobile-friendly site by a client, or possibly you’re
considering it for your own site.
As we will see in this book, there are a number of ways to do this, ranging from the quick and
dirty to the complex and potenally beauful. By using a plugin, you can quickly make your
site easier to read and interact with on mobile devices, or you can go further, harnessing the
combined power of PHP, CSS, and relevant APIs to create a web app—a website that looks and
behaves like a nave app.
This book will take you through the process of making a self-hosted WordPress site (as
opposed to a

wordpress.com site) mobile-friendly. We will be working with the site for
Carborelli’s, a cous ice cream parlor using its website to adverse its store and sell
ice cream online. You’ll learn a variety of ways to make this site look and perform beer
on mobile devices, and we’ll work up to mobile e-commerce and nally, using WordPress
to create a web app for Carborelli’s.
Preface
[ 2 ]
This book focuses on mobile development, so it’s worth idenfying exactly what we mean
when referring to dierent devices. The following are the denions of some of the devices
we will be using:
 Smartphones: They include iPhones, Android phones, Windows Phone 7, Blackberry,
and any phone with a browser capable of accessing websites and displaying them
in the same way as a desktop browser would. These are the phones we will be
targeng in this book.
 Feature phones: These are the phones, which include some advanced features,
in addion to making phone calls, but do not have the advanced capabilies
of smartphones and do not include a fully-featured browser. We will not be
targeng them in this book, except for in Chapter 1, Using Plugins to Make
Your Site Mobile-friendly, with mobile plugins.
 Mobile devices: Mobile devices, as referred to in this book, include smartphones
and small personal devices running a mobile operang system, for example, the
iPod Touch, but not tablets.
 Tablets: These are the devices with a larger display than mobile devices, but
they use a mobile operang system. These include the iPad, Samsung Galaxy
Tab, Blackberry Playbook, and Kindle Fire. We will focus on the iPad in this book,
as it is by far the most widely used tablet device.
The disncon between smartphones and feature phones is blurred, but you can nd
more informaon at
/>What this book covers
Chapter 1, Using Plugins to Make Your Site Mobile-friendly, will introduce you to some

plugins you can use to quickly make your content more accessible to people vising the
site on mobiles. It will help you choose the right plugin for your site and show you how
to congure some of the most useful ones that are available right now.
Chapter 2, Using Responsive Themes, will introduce you to themes, which have a built-in
mobile-friendly stylesheet. It will help you idenfy some of the best ones, gure out if
that’s the best approach for your site, and congure and tweak those themes.
Chapter 3, Seng up Media Queries, is where we will start to work with CSS for the
responsive design. You’ll learn how to add media queries to your theme’s stylesheet
to idenfy when visitors are viewing the site on a mobile device.
Chapter 4, Adjusng the Layout, deals with the most fundamental aspect of responsive
design. Here, we’ll explore ways to adjust the layout of the site so that it looks beer on
mobiles, including tweaking sengs for headers, sidebars, and footers.
Preface
[ 3 ]
Chapter 5, Working with Text and Navigaon, will introduce you to the most eecve ways
to deliver text to mobiles. We’ll make sure the text in our content reads well on small screens
and explore the use of ems instead of pixels to aid with, responsive design.
Chapter 6, Opmizing Images and Video, will take you through dierent approaches to
opmize images and media. We’ll look at ways to not only make images appear smaller,
but also to make sure smaller les are being delivered to mobile devices, saving on load
mes and data use. We’ll also examine ways to deliver video and other media to mobiles.
Chapter 7, Sending Dierent Content to Dierent Devices, will take you through seng up
the Carborelli’s site so that its navigaon diers on mobile devices and makes it easier for
visitors to get to what they need quickly, as the visitors to your site may want quick access
to dierent informaon depending on what kind of device they’re using.
Chapter 8, Creang a Web App Interface, covers the use of CSS to make the mobile version
of your site appear like a nave app. We’ll make changes to the Carborelli’s home page, and
navigaon in parcular, to create a really memorable mobile site.
Chapter 9, Adding Web App Funconality, will lead you further into the realm of web apps.
You’ll learn about plugins and APIs that harness the funconality of the mobile device and

give the user a more app-like experience. We’ll also start to explore mobile commerce by
working on the e-commerce secon of Carborelli’s site.
Chapter 10, Tesng and Updang your Mobile Site, will take you through the pros and cons
of tesng on actual mobile devices, dierent methods to emulate mobile devices in a desktop
browser, and how to update and edit our site using a mobile device. A mobile-friendly site
needs to work in a variety of browsers on a large array of mobile devices. You’ll learn how to
simulate some of these devices without actually owning them, and which devices it’s useful
to own or borrow to simulate the full user experience, parcularly to test web apps.
What you need for this book
This book uses a cous site to apply learning as we go along. However, you will get more
from it if you are also working with your own site (although this is not essenal). Ideally,
you will have an exisng desktop site built using WordPress and administrator access to it.
More details of what you will need are included in Chapter 1, Using plugins to make your
site mobile-friendly.
Who this book is for
This book is aimed at people with some experience of WordPress but who are new to
mobile development. It deals with self-hosted WordPress sites, and not sites hosted
on wordpress.com.
Preface
[ 4 ]
To get the most from this book, you should:
 Be familiar with using WordPress to develop websites, including working with
the WordPress admin, installing themes and plugins, and eding theme les
 Have a good understanding of HTML and CSS, and be able to write both
 Have experience of uploading and downloading les using FTP, cPanel, or your
preferred method
 Have some familiarity with PHP—you do not need to be able to write PHP but it
helps if you have come across it before
Skills that you do not need and will learn from this book include the following:
 Using CSS for responsive design—creang a uid layout and dening media queries

 Wring custom PHP—we will learn some examples of this but won’t cover PHP
in a lot of detail
 Harnessing APIs for mobile development—the book will introduce you to some
APIs, explain what they do, and show some of them in acon.
Conventions
In this book, you will nd several headings appearing frequently.
To give clear instrucons of how to complete a procedure or task, we use:
Time for action – heading
1. Acon 1
2. Acon 2
3. Acon 3
Instrucons oen need some extra explanaon so that they make sense, so they are
followed with:
What just happened?
This heading explains the working of tasks or instrucons that you have just completed.
You will also nd some other learning aids in the book, including:
Preface
[ 5 ]
Pop quiz – heading
These are short mulple choice quesons intended to help you test your own understanding.
Have a go hero – heading
These set praccal challenges and give you ideas for experimenng with what you
have learned.
You will also nd a number of styles of text that disnguish between dierent kinds of
informaon. Here are some examples of these styles, and an explanaon of their meaning.
Code words in text are shown as follows: “This secon consists of styling for
#main div,
which contains the content and the sidebar, for each of
#content, #primary, and
#secondary, with #primary and #secondary being sidebars, or in the WordPress

terminology, widget areas:”
A block of code is set as follows:
/* main layout */
body {
margin: 20px auto;
width: 940px;
padding: 10px;
}
New terms and important words are shown in bold. Words that you see on the screen,
in menus or dialog boxes for example, appear in the text like this: “On the Mobile Switcher
screen, select the responsive theme from the Mobile theme drop-down list”.
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this
book—what you liked or may have disliked. Reader feedback is important for us to
develop tles that you really get the most out of.
Preface
[ 6 ]
To send us general feedback, simply send an e-mail to , and
menon the book tle via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in
the SUGGEST A TITLE form on
www.packtpub.com or e-mail
If there is a topic that you have experse in and you are interested in either wring or
contribung to a book, see our author guide on
www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help
you to get the most from your purchase.

Downloading the example code
You can download the example code les for all Packt books you have purchased from
your account at . If you purchased this book elsewhere,
you can visit and register to have the les
e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do
happen. If you nd a mistake in one of our books—maybe a mistake in the text or the
code—we would be grateful if you would report this to us. By doing so, you can save
other readers from frustraon and help us improve subsequent versions of this book.
If you nd any errata, please report them by vising />support
, selecng your book, clicking on the errata submission form link, and entering
the details of your errata. Once your errata are veried, your submission will be accepted
and the errata will be uploaded on our website, or added to any list of exisng errata, under
the Errata secon of that tle. Any exisng errata can be viewed by selecng your tle from
/>Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt,
we take the protecon of our copyright and licenses very seriously. If you come across any
illegal copies of our works, in any form, on the Internet, please provide us with the locaon
address or website name immediately so that we can pursue a remedy.
Preface
[ 7 ]
Please contact us at with a link to the suspected
pirated material.
We appreciate your help in protecng our authors, and our ability to bring you
valuable content.
Questions
You can contact us at if you are having a problem
with any aspect of the book, and we will do our best to address it.

1
Using Plugins to Make Your Site
Mobile-friendly
Imagine you're the designer or administrator of an exisng website and your
client or manager tells you the site needs to be mobile-friendly, in a hurry.
There's a limited budget and no me, so what do you do?
The answer, as with many WordPress challenges, could be a plugin.
When I rst set up a mobile website for a client in 2010, there were only about
half a dozen plugins that would help achieve this. Now, if you search for the
term mobile in the WordPress plugin repository at
/>extend/plugins/
, you will get 466 results, about 10 percent of which are
plugins which will help make an exisng desktop site mobile-friendly. They do
it in dierent ways, but in this chapter, we will look at some that make your
site mobile-friendly in the quickest possible me.
WordPress uses plugins to add extra funconality to a site, which
isn't a part of the core WordPress installaon. Plugins exist
for a huge array of tasks, from backing up your site to adding
full e-commerce funconality. To nd out more about plugins,
see and
/>Using Plugins to Make Your Site Mobile-friendly
[ 10 ]
In this chapter we shall:
 Learn about the dierent types of mobile plugins and how they work
 Idenfy what you need to consider before choosing a plugin to make your
site mobile-friendly
 Examine some of the available plugins, see how they make a site look, and
idenfy some of their pros and cons
 Learn how to install and congure some of the most eecve mobile plugins
So let's get on with it!

Before we start
Before compleng the exercises in this chapter, you will need a few things ready as follows:
 An exisng desktop site, running on WordPress
 Administrator access to the site's WordPress dashboard or admin.
 FTP access to the site if you choose to manually upload plugins instead of
using the WordPress backend
 Permission to make changes to the site—it's probably safest to work on
a test site rst
 A mobile device to test the mobile version of your site. These should reect
the devices your visitors will be using. We will look at tesng using devices
and emulators in Chapter 10, Tesng and Updang your Mobile Site.
Plugins or responsive design – what to choose
When making our site mobile-friendly, we have two main opons :
 Using a mobile plugin to deliver a mobile theme or site to mobile devices
 Using a responsive theme or making our exisng theme responsive
We will look at the responsive design in more detail later in this book. But, as using a plugin
is the quickest and easiest way to make our site mobile-friendly, that's where we'll start.