Book Image

WordPress Mobile Applications with PhoneGap

By : Eugene Liang
Book Image

WordPress Mobile Applications with PhoneGap

By: Eugene Liang

Overview of this book

With the explosive popularity of mobile apps and its much anticipated continued growth for the foreseeable future, developers will want to get their hands dirty and build some cool mobile apps. But we know that building mobile apps is not easy: we need to handle cross-platform issues, mobile devices of different screen sizes, not to mention traditional issues such as providing a content management system of the content served in the application. Enter "WordPress Mobile Applications with PhoneGap". We leverage on some of the most popular open source projects: Wordpress, jQuery, jQuery Mobile and PhoneGap and discover how they can be pieced together to build a fully functional cross platform mobile application. "WordPress Mobile Applications with PhoneGap" teaches you how to build mobile application with minimal effort and coding by leveraging on some of the most popular open source projects such as Wordpress, jQuery, jQuery Mobile and PhoneGap. This book looks at some of the most popular open source projects: Wordpress, jQuery, jQuery Mobile and PhoneGap and breaks down the nitty gritty details on how to leverage on these projects to build a fully functional cross-platform mobile application with minimal coding and effort. You will start off by quickly going through the capabilities of Wordpress. Then you will prepare some groundwork on how to make use of plugins and the GeoPlaces theme to provide geographic and API capabilities to WordPress. Next you will learn how to create an external HTML/CSS/JavaScript that consumes and posts data to your Wordpress blog. More importantly, you will see how to convert this external app into a PhoneGap in as little as five minutes. Finally, you will learn how to apply all these techniques and skills to a Wordpress app based on the Twenty-Ten theme and create a cross-platform mobile app using PhoneGap. By the end of "Wordpress Mobile Applications with PhoneGap" you will learn how to piece Wordpress, jQuery, jQuery Mobile and PhoneGap together into a fully functional mobile app.
Table of Contents (13 chapters)

Introducing jQuery Mobile


jQuery Mobile (http://jquerymobile.com/) is a unified HTML5-based user interface for most popular mobile device platforms. It is based on jQuery (http://jquery.com/) and jQuery UI (http://jqueryui.com/). Our focus in this section is on jQuery Mobile, so let's get our hands dirty. We'll start by implementing jQuery Mobile using the example we created in Chapter 3, Extending WordPress Using JSON-API.

Installing jQuery Mobile and theming

Installing jQuery Mobile is straightforward and easy:

  1. Open up app_advanced.html and copy and paste the following code directly within the <head> tags:

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js">
    </script>
    <script src="https:/...