WordPress Mobile Web Development Beginner's Guide -- Table of Contents -- WordPress Mobile Web Development Beginner's Guide -- Credits -- About the Author -- About the Reviewers -- Acknowledgement -- www.PacktPub.com -- Support files, eBooks, discount offers and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Time for action-heading -- What just happened? -- Pop quiz-heading -- Have a go hero-heading -- Reader feedback -- Customer support -- Downloading the example code -- Errata -- Piracy -- Questions -- 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 -- What just happened? -- Plugins that will make our site mobile -- Time for action-installing and configuring WPtouch -- What just happened? -- WordPress Mobile Pack-number two in the charts -- Time for action-installing and configuring WordPress Mobile Pack -- What just happened? -- Have a go hero -- Summary -- 2. Using Responsive Themes -- Mobile themes versus responsive themes -- Identifying the best approach for your site -- Options for developing a mobile site -- Identifying the best approach for our site -- Twenty Eleven-configuring the default WordPress theme -- Time for action-configuring the Twenty Eleven theme -- What just happened? -- Have a go hero-making Twenty Eleven your own -- More responsive themes-installation and configuration -- Scherzo-installation and configuration -- Time for action-installing and configuring the Scherzo theme -- What just happened? -- Have a go hero -- Ari-another clean minimal theme.

Time for action-installing and configuring the Ari theme -- What just happened? -- Have a go hero -- Codium Extend -- Time for action-installing and configuring the Codium Extend theme -- What just happened? -- More responsive themes -- Taking it further-using a responsive theme just for mobile devices -- Showing visitors different themes on different devices-how to do it -- Stage 1-installing and configuring themes -- Stage 2-installing and configuring a theme switcher -- Time for action-configuring the WordPress Mobile Pack plugin as a theme switcher -- What just happened? -- Pop quiz -- Summary -- 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 -- What just happened? -- Time for action-making our site fluid -- What just happened? -- Have a go hero -- Moving on-planning for our media queries -- Identifying our breakpoints -- In what ways should a site be different on different devices? -- Before setting media queries-getting the browser to behave -- Time for action-adding the code to set our width correctly -- What just happened? -- Writing our media queries -- Time for action-writing our first media query -- What just happened? -- Testing our fluid layout on a smartphone -- Time for action-a media query for smartphones in landscape mode -- Reviewing what we've done -- What just happened? -- Have a go hero-trying it out -- Pop quiz -- Summary -- 4. Adjusting the Layout -- Need for adjusting the layout -- Altering the layout of our header -- Time for action-adjusting the header for iPads -- What just happened? -- Time for action-adjusting the header layout for phones in landscape mode -- What just happened?.

Time for action-adjusting the header layout for phones in portrait mode -- What just happened? -- Moving the sidebar below the content -- Time for action-moving the sidebar below the content for tablets in portrait mode -- What just happened? -- Time for action-rearranging our widgets -- What just happened? -- Adjusting the layout for more than two widgets -- Three widgets side by side -- Four widgets in a grid -- Time for action-tweaking the content and sidebar layout for phones in landscape mode -- What just happened? -- Time for action-rearranging the sidebar widgets for phones in portrait mode -- What just happened? -- Moving on to the footer -- Time for action-changing our footer layout for phones -- What just happened? -- Altering the layout of a fat footer -- Reviewing what we've learned about the layout for different screen widths -- Pop quiz -- Summary -- 5. Working with Text and Navigation -- A note on testing -- Optimizing text for small screens -- Time for action-changing text settings -- What just happened? -- Why use ems ? -- Time for action-setting up text sizing in our media queries -- What just happened? -- Time for action-adjusting the text size on phones in landscape mode -- What just happened? -- Pop quiz-I -- Optimizing fonts for mobile devices -- Time for action-specifying different fonts for mobile devices -- What just happened? -- Optimizing navigation menus for mobile devices -- Time for action-changing the layout of the menu on small screens -- What just happened? -- Time for action-changing the position of the navigation -- What just happened? -- Time for action-linking to the repositioned navigation -- What just happened? -- Pop quiz-II -- Have a go hero -- Summary -- 6. Optimizing Images and Video -- Making images fit into a responsive layout -- Ensuring images don't stray outside their container.

Time for action-making our images responsive -- What just happened? -- Resizing narrower images within the layout -- Time for action-giving our images a percentage width -- What just happened? -- Using CSS to resize images-the hitch -- Proper responsive images-sending different image files to different devices -- Are mobiles always slow? -- Setting up our responsive images -- Time for action-editing the media settings -- What just happened? -- Time for action-installing the mobble plugin -- What just happened? -- Time for action-using PHP to display the featured image -- What just happened? -- Time for action-adding a featured image to each page -- What just happened? -- Have a go hero -- Featured images-the disadvantages -- Have a go hero -- Adding video to our site -- Displaying video-choosing a method -- Using Flash -- Inserting our video into the HTML -- Using a service such as YouTube to stream video to our site -- Streaming YouTube video responsively -- Time for action-adding a video to our site -- What just happened? -- Time for action-adjusting the video width -- What just happened? -- Time for action-making our video responsive -- What just happened? -- But are these videos truly responsive? I hear you ask -- Summary -- 7. Sending Different Content to Different Devices -- Mobile-specific content-some considerations -- Why send different content to different devices? -- What differences will there be for our mobile site? -- Methods to send different content to different devices -- Hiding content using CSS -- Delivering different content using PHP -- Mobile First -- Using CSS to hide page elements -- Time for action-hiding elements using CSS -- What just happened? -- Using PHP to send different content to different devices -- Time for action-removing a widget using PHP -- What just happened? -- Have a go hero.

Adding a mobile-only menu to the site -- Identifying the changes we need to make -- Time for action-setting up our mobile menus -- What just happened? -- Time for action-coding mobile menus into the theme -- What just happened? -- Time for action-styling the new mobile menus -- What just happened? -- Time for action-adding a select menu -- What just happened? -- Have a go hero -- Pop Quiz -- Summary -- 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 -- Pros and cons of the different methods -- Creating a web app using a plugin -- Creating a web app using a responsive design -- Making a backup before we start -- Hiding elements to create our web app's home page -- Time for action-hiding home page content -- What just happened? -- Changing our web app's design with CSS -- Time for action-adjusting the header layout -- What just happened? -- Time for action-editing the site description -- What just happened? -- Time for action-setting up our web app's navigation -- What just happened? -- Time for action-adjusting the footer layout -- What just happened? -- Creating a responsive web app-review -- Using a mobile theme to create a web app -- Creating our mobile theme files -- Time for action-copying our theme files to create a new theme -- What just happened? -- Time for action-editing our mobile theme files -- What just happened? -- Time for action-uploading and activating our web app theme -- What just happened? -- Using a mobile theme to create a web app-review -- Summary -- 9. Adding Web App Functionality -- What might we use a web app for? -- Current WordPress plugins for web apps -- Events, bookings, and management plugins -- E-commerce and subscription plugins -- Geolocation and mapping plugins -- Social media plugins.

Photography plugins.