PacktLib: WordPress Mobile Web Development: Beginner's Guide

WordPress Mobile Web Development Beginner's Guide

Credits

About the Author

About the Reviewers

Acknowledgement

www.PacktPub.com

Preface

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

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

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

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

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

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

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

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

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

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

Pop quiz—Answers

Pop quiz—Answers

Pop quiz—Answers

Pop quiz—Answers

Pop quiz—Answers

Pop quiz—Answers