You are previewing WordPress Mobile Web Development Beginner's Guide.
O'Reilly logo
WordPress Mobile Web Development Beginner's Guide

Book Description

"

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.

  • 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

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.

"

Table of Contents

  1. WordPress Mobile Web Development Beginner's Guide
    1. Table of Contents
    2. WordPress Mobile Web Development Beginner's Guide
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. Acknowledgement
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Time for action—heading
        1. What just happened?
        2. Pop quiz—heading
        3. Have a go hero—heading
      6. Reader feedback
      7. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Using Plugins to Make Your Site Mobile-friendly
      1. Before we start
      2. Plugins or responsive design—what to choose
      3. How do mobile plugins work?
      4. Identifying the right plugin for our site
      5. Time for action—identifying how your site should work on mobiles
        1. What just happened?
      6. Plugins that will make our site mobile
      7. Time for action—installing and configuring WPtouch
        1. What just happened?
      8. WordPress Mobile Pack—number two in the charts
      9. Time for action—installing and configuring WordPress Mobile Pack
        1. What just happened?
        2. Have a go hero
      10. Summary
    10. 2. Using Responsive Themes
      1. Mobile themes versus responsive themes
      2. Identifying the best approach for your site
        1. Options for developing a mobile site
        2. Identifying the best approach for our site
      3. Twenty Eleven—configuring the default WordPress theme
      4. Time for action—configuring the Twenty Eleven theme
        1. What just happened?
        2. Have a go hero—making Twenty Eleven your own
      5. More responsive themes—installation and configuration
        1. Scherzo—installation and configuration
      6. Time for action—installing and configuring the Scherzo theme
        1. What just happened?
        2. Have a go hero
        3. Ari—another clean minimal theme
      7. Time for action—installing and configuring the Ari theme
        1. What just happened?
        2. Have a go hero
        3. Codium Extend
      8. Time for action—installing and configuring the Codium Extend theme
        1. What just happened?
        2. More responsive themes
      9. Taking it further—using a responsive theme just for mobile devices
        1. Showing visitors different themes on different devices—how to do it
        2. Stage 1—installing and configuring themes
        3. Stage 2—installing and configuring a theme switcher
      10. Time for action—configuring the WordPress Mobile Pack plugin as a theme switcher
        1. What just happened?
        2. Pop quiz
      11. Summary
    11. 3. Setting up Media Queries
      1. What you will need for this chapter
      2. Working with the WordPress Editor
      3. Time for action—opening our stylesheet in the WordPress Editor
      4. Creating a fluid layout
      5. Time for action—digging into the Carborelli's layout styling
        1. What just happened?
      6. Time for action—making our site fluid
        1. What just happened?
        2. Have a go hero
      7. Moving on—planning for our media queries
        1. Identifying our breakpoints
        2. In what ways should a site be different on different devices?
      8. Before setting media queries—getting the browser to behave
      9. Time for action—adding the code to set our width correctly
        1. What just happened?
      10. Writing our media queries
      11. Time for action—writing our first media query
        1. What just happened?
      12. Testing our fluid layout on a smartphone
      13. Time for action—a media query for smartphones in landscape mode
      14. Reviewing what we've done
        1. What just happened?
        2. Have a go hero—trying it out
        3. Pop quiz
      15. Summary
    12. 4. Adjusting the Layout
      1. Need for adjusting the layout
      2. Altering the layout of our header
      3. Time for action—adjusting the header for iPads
        1. What just happened?
      4. Time for action—adjusting the header layout for phones in landscape mode
        1. What just happened?
      5. Time for action—adjusting the header layout for phones in portrait mode
        1. What just happened?
      6. Moving the sidebar below the content
      7. Time for action—moving the sidebar below the content for tablets in portrait mode
        1. What just happened?
      8. Time for action—rearranging our widgets
        1. What just happened?
        2. Adjusting the layout for more than two widgets
          1. Three widgets side by side
          2. Four widgets in a grid
      9. Time for action—tweaking the content and sidebar layout for phones in landscape mode
        1. What just happened?
      10. Time for action—rearranging the sidebar widgets for phones in portrait mode
        1. What just happened?
      11. Moving on to the footer
      12. Time for action—changing our footer layout for phones
        1. What just happened?
        2. Altering the layout of a fat footer
      13. Reviewing what we've learned about the layout for different screen widths
        1. Pop quiz
      14. Summary
    13. 5. Working with Text and Navigation
      1. A note on testing
      2. Optimizing text for small screens
      3. Time for action—changing text settings
        1. What just happened?
        2. Why use ems ?
      4. Time for action—setting up text sizing in our media queries
        1. What just happened?
      5. Time for action—adjusting the text size on phones in landscape mode
        1. What just happened?
        2. Pop quiz-I
      6. Optimizing fonts for mobile devices
      7. Time for action—specifying different fonts for mobile devices
        1. What just happened?
      8. Optimizing navigation menus for mobile devices
      9. Time for action—changing the layout of the menu on small screens
        1. What just happened?
      10. Time for action—changing the position of the navigation
        1. What just happened?
      11. Time for action—linking to the repositioned navigation
        1. What just happened?
        2. Pop quiz-II
        3. Have a go hero
      12. Summary
    14. 6. Optimizing Images and Video
      1. Making images fit into a responsive layout
        1. Ensuring images don't stray outside their container
      2. Time for action—making our images responsive
        1. What just happened?
        2. Resizing narrower images within the layout
      3. Time for action—giving our images a percentage width
        1. What just happened?
        2. Using CSS to resize images—the hitch
      4. Proper responsive images—sending different image files to different devices
        1. Are mobiles always slow?
        2. Setting up our responsive images
      5. Time for action—editing the media settings
        1. What just happened?
      6. Time for action—installing the mobble plugin
        1. What just happened?
      7. Time for action—using PHP to display the featured image
        1. What just happened?
      8. Time for action—adding a featured image to each page
        1. What just happened?
        2. Have a go hero
          1. Featured images—the disadvantages
        3. Have a go hero
      9. Adding video to our site
        1. Displaying video—choosing a method
          1. Using Flash
          2. Inserting our video into the HTML
          3. Using a service such as YouTube to stream video to our site
        2. Streaming YouTube video responsively
      10. Time for action—adding a video to our site
        1. What just happened?
      11. Time for action—adjusting the video width
        1. What just happened?
      12. Time for action—making our video responsive
        1. What just happened?
        2. But are these videos truly responsive? I hear you ask
      13. Summary
    15. 7. Sending Different Content to Different Devices
      1. Mobile-specific content—some considerations
        1. Why send different content to different devices?
        2. What differences will there be for our mobile site?
        3. Methods to send different content to different devices
          1. Hiding content using CSS
          2. Delivering different content using PHP
          3. Mobile First
      2. Using CSS to hide page elements
      3. Time for action—hiding elements using CSS
        1. What just happened?
      4. Using PHP to send different content to different devices
      5. Time for action—removing a widget using PHP
        1. What just happened?
        2. Have a go hero
      6. Adding a mobile-only menu to the site
        1. Identifying the changes we need to make
      7. Time for action—setting up our mobile menus
        1. What just happened?
      8. Time for action—coding mobile menus into the theme
        1. What just happened?
      9. Time for action—styling the new mobile menus
        1. What just happened?
      10. Time for action—adding a select menu
        1. What just happened?
        2. Have a go hero
        3. Pop Quiz
      11. Summary
    16. 8. Creating a Web App Interface
      1. What is a web app and why would we develop one?
      2. Developing a web app—designing the app
      3. Choosing how to develop our web app
        1. Pros and cons of the different methods
      4. Creating a web app using a plugin
      5. Creating a web app using a responsive design
        1. Making a backup before we start
        2. Hiding elements to create our web app’s home page
      6. Time for action—hiding home page content
        1. What just happened?
        2. Changing our web app’s design with CSS
      7. Time for action—adjusting the header layout
        1. What just happened?
      8. Time for action—editing the site description
        1. What just happened?
      9. Time for action—setting up our web app’s navigation
        1. What just happened?
      10. Time for action—adjusting the footer layout
        1. What just happened?
        2. Creating a responsive web app—review
      11. Using a mobile theme to create a web app
        1. Creating our mobile theme files
      12. Time for action—copying our theme files to create a new theme
        1. What just happened?
      13. Time for action—editing our mobile theme files
        1. What just happened?
      14. Time for action—uploading and activating our web app theme
        1. What just happened?
        2. Using a mobile theme to create a web app—review
      15. Summary
    17. 9. Adding Web App Functionality
      1. What might we use a web app for?
      2. Current WordPress plugins for web apps
        1. Events, bookings, and management plugins
        2. E-commerce and subscription plugins
        3. Geolocation and mapping plugins
        4. Social media plugins
        5. Photography plugins
      3. Creating our ice cream sundae builder
      4. Time for action—adding a form to our web app
        1. What just happened?
      5. Time for action—integrating with PayPal
        1. What just happened?
      6. Time for action—providing the visitor with directions
        1. What just happened?
        2. Have a go hero
      7. Outside WordPress—third-party APIs
        1. Have a go hero
      8. Summary
    18. 10. Testing and Updating your Mobile Site
      1. Testing your mobile site
        1. Testing on mobile devices
        2. Resizing our browser window
      2. Time for action—using an extension to resize the Chrome browser window
        1. What just happened?
        2. Switching desktop Safari's User Agent to simulate an iPhone
      3. Time for action—switching our User Agent
        1. What just happened?
        2. Using a website to test responsive layouts
      4. Time for action—testing your site on responsinator.com
        1. What just happened?
        2. Using mobile browser emulators
      5. Time for action—setting up Opera Mobile Emulator
        1. What just happened?
      6. Time for action—testing our site in Opera Mini Simulator
        1. What just happened?
      7. Time for action—testing with the Ripple extension for Chrome
        1. What just happened?
        2. Have a go hero
      8. Using a mobile device to update your website
        1. Using the WordPress app
      9. Time for action—setting up and using the WordPress app
        1. What just happened?
      10. Summary
    19. A. Pop quiz—Answers
      1. Chapter 2, Using Responsive Themes
      2. Chapter 3, Setting up Media Queries
      3. Chapter 4, Adjusting the Layout
      4. Chapter 5, Working with Text and Navigation
      5. Chapter 7, Sending Different Content to Different Devices
    20. Index