WordPress Mobile Web Development: Beginner's Guide

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.

WordPress Mobile Web Development: 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.
Mapt Subscription
FREE
$29.99/m after trial
eBook
$21.00
RRP $29.99
Save 29%
Print + eBook
$49.99
RRP $49.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$21.00
$49.99
$29.99p/m after trial
RRP $29.99
RRP $49.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Book Details

ISBN 139781849515726
Paperback332 pages

Book Description

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

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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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 responsinator.com
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
Summary

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

Authors

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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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 responsinator.com
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
Summary

Book Details

ISBN 139781849515726
Paperback332 pages
Read More

Read More Reviews

Recommended for You

Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
$ 4.80
WordPress Web Application Development Book Cover
WordPress Web Application Development
$ 26.99
$ 18.90
WordPress 3 Complete Book Cover
WordPress 3 Complete
$ 23.99
$ 16.80
Responsive Web Design by Example : Beginner's Guide Book Cover
Responsive Web Design by Example : Beginner's Guide
$ 26.99
$ 18.90
Twitter Bootstrap Web Development How-To Book Cover
Twitter Bootstrap Web Development How-To
$ 12.99
$ 9.10
HTML5 and CSS3 Responsive Web Design Cookbook Book Cover
HTML5 and CSS3 Responsive Web Design Cookbook
$ 26.99
$ 5.40