About 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.

Publication date:
November 2012


Chapter 1. WordPress Overview and Installation

Firstly, welcome to WordPress Mobile Applications with PhoneGap! Before we continue with this book, make sure to go through the Preamble section.



For a start, why would you be interested in using WordPress together with PhoneGap? I would ask, "Why wouldn't you?" My opinion is that WordPress is among the easiest-to-use content management systems with the required basic functions/features built-in, which includes registration, administration panel, posts management, and so on. More importantly, you can extend it in almost any way you want through the use of plugins and themes. How does this relate to PhoneGap? Using WordPress with PhoneGap means that all forms of common content management issues can be handled using WordPress, while all you need to focus on is to use PhoneGap to serve this content. As simple as that.

Before we begin, make sure your computer is capable of running PHP and MySQL. You should also install phpMyAdmin for easy management of MySQL databases. You should also have access to your web server (local or remote) via shell or FTP, a text editor, FTP client, and a web browser of your choice.

If you do not have a working web server on your computer, you can visit and download the appropriate distributions/packages shown in the next subsections, for your computer.


Mac OS ships with Apache and PHP. MySQL will have to be compiled to run natively, and this can be cumbersome. If you have limited experience in sysadmin skills, feel free to download and install pre-configured PHP-MySQL packages, such as the following:


There are many options for installing and configuring your environment. Some of the options are as follows:

If you are still having issues, please visit http://codex.WordPress.org/Installing_WordPress#Things_to_Know_Before_Installing_WordPress.


Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you. For the purposes of this book, I'll be developing the application on a local computer; feel free to follow suit by installing the required web server and other related web technologies mentioned earlier in this section.


The famous five minute installation of WordPress

Now, let us quickly install WordPress so we are on the same frequency:

  1. Pop over to http://WordPress.org/download/ and download WordPress in either the .zip or .tar.gz format. At the time of writing, the latest stable version of WordPress was 3.3.2. Unzip WordPress and place it into a desired location on your local web server.

  2. Next, let's create a database for WordPress on your website. For the purposes of this book, I've decided to name my database wordpress_phonegap. In my case, I created the database wordpress_phonegap using phpMyAdmin:

    Creating a database using phpMyAdmin

  3. Type in wordpress_phonegap and click on Create.

  4. Now, go to the root of your WordPress folder and you should see a file named wp-config-sample.php. Open up the file in the text editor of your choice and look for these lines: define('DB_NAME', 'database_name_here');, define('DB_USER' and 'username_here');, define('DB_PASSWORD', 'password_here');. Change database_name_here, username_here, and password_here to the appropriate values and save the file as wp-config.php.

  5. Now open up your web browser and navigate to the location where you have placed your WordPress installation. In my case, I renamed the WordPress folder to worpress_phonegap and I have placed the folder at http://loc alhost/public_html. Hence, this is what I will see when I visit http://localhost/public_html/WordPress_phonegap:

    Setup page for WordPress

Now enter the information for the Site Title, Username, Passwords, and Your E-mail fields. Once done, click on the button Install WordPress. For the purposes of this book, I named the site as WordPress and PhoneGap Mobile Applications and I am using admin as the username.

Once you have successfully installed WordPress, you should see the following on your browser:

Success message when you have installed WordPress successfully


A five minute introduction to WordPress

WordPress is a free and popular open source Content Management System (CMS) that started life as a simple blogging system. It evolved over the years and its look, feel, and capabilities can be easily extended by its themes and plugins.

We will quickly go through the capabilities of WordPress and see how we can leverage on WordPress to build mobile applications of it. The two main capabilities of WordPress that we can leverage on are: themes and plugins.


Themes in general control the look and feel of any WordPress installation. Going over to http://WordPress.org/extend/themes/, you will see a wide selection of themes that you can download and try for free (most of the time).

For a start, navigate to your WordPress site on your web browser. If you have not made any changes to the site, you should see something like the following on your screen:

Home page of your WordPress installation if you did not make any changes to it

The earlier screenshot is the default theme of WordPress. Now log in to your WordPress site at http://localhost/public_html/wordpress_phonegap/wp-admin and navigate to Appearance. You should see that the Available Themes option provides you with another theme to play with, called Twenty Ten. Click on Activate and navigate to your home page again. You should see the following:

The Twenty Ten theme

The look and feel of your WordPress site is now changed. With a wide variety of themes out there, you can quickly and easily make changes to how your site looks and feels in just a matter of seconds.

Note that we can easily create a mobile website with WordPress by using a mobile theme or themes that support mobile devices. This may be a quick and easy way to create mobile applications out of WordPress, but it does not provide a native interface for the application. Later in this book we will learn about PhoneGap, which is a great way to build native mobile apps using web development techniques. We will be using two themes for this book: one is the GeoPlaces theme that we will be using from Chapter 3, Extending WordPress Using JSON-API, to Chapter 5, Extending WordPress to the Mobile World; the other theme we will be using is the Twenty Ten theme that comes by default with all WordPress installations. We will be covering the Twenty Ten theme in Chapter 6, Using Open Source Themes, of this book.


As with all good CMSs, WordPress provides an Application Programming Interface (API) that allows developers to quickly and easily extend the functionalities of a WordPress site. Examples of uses of plugins include adding Facebook's popular "Like" button to each of your posts and extending the administration side of WordPress, such as user management, and adding in search engine optimization capabilities to your WordPress.

While this book is not about developing plugins for WordPress, it's good to understand the power of WordPress plugins. A good example as to how far plugins can take your WordPress site is WordPress's very own BuddyPress (http://codex.buddypress.org) plugin. We will not be making use of BuddyPress in this book, but it's good to see it in action for the purposes of this section:

  1. Log in to your WordPress site and navigate to Plugins | Add New.

  2. Search for BuddyPress.

  3. You can install BuddyPress by clicking on Install Now, and in no time you will have a working social networking site.

This is the power of WordPress plugins. In this book, we will check out an awesome plugin, called JSON API (http://WordPress.org/extend/plugins/json-api/), which can be readily adapted and used for extending our WordPress website.



By now, you have a working WordPress installation. You should also understand how themes and plugins can be used to extend WordPress. In the next chapter you will see how we can add geographic capabilities to your WordPress site using the GeoPlaces theme.

About the Author

  • Yuxian, Eugene Liang

    Yuxian, Eugene Liang is a frontend engineer with working knowledge of UX and data mining / machine learning. He builds applications predominantly using JavaScript/Python, and related frameworks such as AngularJS, ReactJS, Node.js, Tornado, and Django. He led a team of two (including himself) to win Startup Weekend at Taiwan recently. He has also completed academic research on social network analysis (link prediction) using machine learning techniques, while interning as a frontend engineer at Yahoo!. To know more about him, visit http://www.liangeugene.com.

    Browse publications by this author
WordPress Mobile Applications with PhoneGap
Unlock this book and the full library FREE for 7 days
Start now