Free Sample
+ Collection

WordPress Mobile Web Development: Beginner's Guide

Beginner's Guide
Rachel McCollin

Make your WordPress website mobile-friendly and get to grips with the two hottest trends in web design—Mobile and WordPress with this book and ebook.
RRP $29.99
RRP $49.99
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849515726
Paperback332 pages

About This Book

  • Learn how to build mobile and responsive websites using WordPress
  • Get to grips with the best mobile plugins and understand how they interact with your site
  • Learn how to make your own WordPress theme or site responsive, including layout, images, navigation and more

Who This Book Is For

If you have dabbled in WordPress or been working with it for years, and want to build mobile or responsive themes or sites, this book is for you. Even if you can’t write a line of code, the first few chapters will help you create a simple mobile site. But to get the most from the book, you will need a good understanding of HTML, CSS and WordPress itself.

This book is for owners of self-hosted WordPress sites, not sites hosted at

Table of Contents

Chapter 1: Using Plugins to Make Your Site Mobile-friendly
Before we start
Plugins or responsive design—what to choose
How do mobile plugins work?
Identifying the right plugin for our site
Time for action—identifying how your site should work on mobiles
Plugins that will make our site mobile
Time for action—installing and configuring WPtouch
WordPress Mobile Pack—number two in the charts
Time for action—installing and configuring WordPress Mobile Pack
Chapter 2: Using Responsive Themes
Mobile themes versus responsive themes
Identifying the best approach for your site
Twenty Eleven—configuring the default WordPress theme
Time for action—configuring the Twenty Eleven theme
More responsive themes—installation and configuration
Time for action—installing and configuring the Scherzo theme
Time for action—installing and configuring the Ari theme
Time for action—installing and configuring the Codium Extend theme
Taking it further—using a responsive theme just for mobile devices
Time for action—configuring the WordPress Mobile Pack plugin as a theme switcher
Chapter 3: Setting up Media Queries
What you will need for this chapter
Working with the WordPress Editor
Time for action—opening our stylesheet in the WordPress Editor
Creating a fluid layout
Time for action—digging into the Carborelli's layout styling
Time for action—making our site fluid
Moving on—planning for our media queries
Before setting media queries—getting the browser to behave
Time for action—adding the code to set our width correctly
Writing our media queries
Time for action—writing our first media query
Testing our fluid layout on a smartphone
Time for action—a media query for smartphones in landscape mode
Reviewing what we've done
Chapter 4: Adjusting the Layout
Need for adjusting the layout
Altering the layout of our header
Time for action—adjusting the header for iPads
Time for action—adjusting the header layout for phones in landscape mode
Time for action—adjusting the header layout for phones in portrait mode
Moving the sidebar below the content
Time for action—moving the sidebar below the content for tablets in portrait mode
Time for action—rearranging our widgets
Time for action—tweaking the content and sidebar layout for phones in landscape mode
Time for action—rearranging the sidebar widgets for phones in portrait mode
Moving on to the footer
Time for action—changing our footer layout for phones
Reviewing what we've learned about the layout for different screen widths
Chapter 5: Working with Text and Navigation
A note on testing
Optimizing text for small screens
Time for action—changing text settings
Time for action—setting up text sizing in our media queries
Time for action—adjusting the text size on phones in landscape mode
Optimizing fonts for mobile devices
Time for action—specifying different fonts for mobile devices
Optimizing navigation menus for mobile devices
Time for action—changing the layout of the menu on small screens
Time for action—changing the position of the navigation
Time for action—linking to the repositioned navigation
Chapter 6: Optimizing Images and Video
Making images fit into a responsive layout
Time for action—making our images responsive
Time for action—giving our images a percentage width
Proper responsive images—sending different image files to different devices
Time for action—editing the media settings
Time for action—installing the mobble plugin
Time for action—using PHP to display the featured image
Time for action—adding a featured image to each page
Adding video to our site
Time for action—adding a video to our site
Time for action—adjusting the video width
Time for action—making our video responsive
Chapter 7: Sending Different Content to Different Devices
Mobile-specific content—some considerations
Using CSS to hide page elements
Time for action—hiding elements using CSS
Using PHP to send different content to different devices
Time for action—removing a widget using PHP
Adding a mobile-only menu to the site
Time for action—setting up our mobile menus
Time for action—coding mobile menus into the theme
Time for action—styling the new mobile menus
Time for action—adding a select menu
Chapter 8: Creating a Web App Interface
What is a web app and why would we develop one?
Developing a web app—designing the app
Choosing how to develop our web app
Creating a web app using a plugin
Creating a web app using a responsive design
Time for action—hiding home page content
Time for action—adjusting the header layout
Time for action—editing the site description
Time for action—setting up our web app’s navigation
Time for action—adjusting the footer layout
Using a mobile theme to create a web app
Time for action—copying our theme files to create a new theme
Time for action—editing our mobile theme files
Time for action—uploading and activating our web app theme
Chapter 9: Adding Web App Functionality
What might we use a web app for?
Current WordPress plugins for web apps
Creating our ice cream sundae builder
Time for action—adding a form to our web app
Time for action—integrating with PayPal
Time for action—providing the visitor with directions
Outside WordPress—third-party APIs
Chapter 10: Testing and Updating your Mobile Site
Testing your mobile site
Time for action—using an extension to resize the Chrome browser window
Time for action—switching our User Agent
Time for action—testing your site on
Time for action—setting up Opera Mobile Emulator
Time for action—testing our site in Opera Mini Simulator
Time for action—testing with the Ripple extension for Chrome
Using a mobile device to update your website
Time for action—setting up and using the WordPress app

What You Will Learn

  • Identify which approach to mobile development will work best for your site, by understanding the needs of the site and its visitors
  • Find out which plugins and pre-built responsive themes are best for quickly making a WordPress site work on mobiles, and customize them for your site
  • Install responsive themes and customise them to fit with your existing design or brand
  • Make your existing WordPress theme or site responsive, adjusting the layout and interface to look great on mobiles, including phones and tablets
  • Take responsive design further, with responsive text and navigation, for better ergonomics and user experience
  • Learn how to make images and other media responsive and reduce their file size on mobile devices using inbuilt WordPress functionality
  • Create an app-like site, with a design and interface resembling a native app
  • Access the functionality of the user’s phone from the browser to create a WordPress web app, and learn which features you’ll be able to use in future

In Detail

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.


Read More