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:
MAMP:This can be downloaded and installed from http://www.mamp.info
XAMPP: This can be downloaded and installed from http://www.apachefriends.org/en/xampp.html
There are many options for installing and configuring your environment. Some of the options are as follows:
XAMPP: This can be downloaded and installed from http://www.apachefriends.org/en/xampp.html
WAMP: This can be downloaded and installed from http://www.wampserver.com
EasyPHP: This can be downloaded and installed from http://www.easyphp.org
If you are still having issues, please visit http://codex.WordPress.org/Installing_WordPress#Things_to_Know_Before_Installing_WordPress.
Tip
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.
Now, let us quickly install WordPress so we are on the same frequency:
Pop over to
http://WordPress.org/download/and download WordPress in either the.zipor.tar.gzformat. 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.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 databasewordpress_phonegapusing phpMyAdmin:
Creating a database using phpMyAdmin
Type in
wordpress_phonegapand click on Create.Now, go to the root of your
WordPressfolder and you should see a file namedwp-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');. Changedatabase_name_here,username_here, andpassword_hereto the appropriate values and save the file aswp-config.php.Now open up your web browser and navigate to the location where you have placed your WordPress installation. In my case, I renamed the
WordPressfolder toworpress_phonegapand I have placed the folder athttp://localhost/public_html. Hence, this is what I will see when I visithttp://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
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:
Log in to your WordPress site and navigate to Plugins | Add New.
Search for BuddyPress.
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.