It’s now possible to make iOS and Android mobile apps with WordPress.
I’m not talking about using WordPress as a data source, but using the whole thing. That means using themes and plugins to build your app.
It’s all done with AppPresser, the first mobile app framework for WordPress.
This opens up a whole new realm of possibilities for how you can use WordPress. For example, you can now use a plugin like WooCommerce to create an eCommerce app, like the one shown above.
eCommerce is just the beginning, you can create almost any type of app.
You can add a shortcode to a post or page that adds a “Take Photo” button inside your app, and uploads a photo to your media gallery. Pinpoint user location on a Google map, add a touch enabled image slider, and much more.
What This Means for You
The really amazing thing about this is that it gives WordPress developers like you and I a completely new product to offer to our clients.
Normally you sell them a WordPress site, and maybe a maintenance plan, and it ends there. Now you can upsell them an app for X amount more, which can give you a big increase the amount of revenue you are getting from each client.
It also allows you to use the technology you love in a new and exciting way.
How it Works
AppPresser integrates Phonegap with WordPress.
Phonegap allows you to create mobile apps using HTML, CSS and Javascript. No native code like Objective C or Java is required.
Phonegap does not work with WordPress on its own, but the free AppPresser core plugin brings these two technologies together. This gives you the vast feature set and ease of use of WordPress, combined with the power of Phonegap to create mobile apps.
Since the entire Phonegap API is exposed, you can create a WordPress plugin that uses any Phonegap feature. For example, add geolocation, integrate with device contacts, use the device camera, and much more.
How to Make an App
To make your app, you need 4 things:
- The AppPresser core plugin
- An ‘AppAware’ theme
- App features
- Test/Build the app
Let’s cover each of those in more detail.
1. The AppPresser core plugin
You can either download the AppPresser plugin from our website, or go to Plugins -> Add New in your WordPress admin area and search for AppPresser.
Activating this plugin will give you a settings page that allows you to configure your app. I’m not going to go over all of them, but you can choose which theme to load, a custom homepage, and custom menus for your app.
AppPresser does not actually change the look of your site, it is only active inside the mobile app.
Choosing a custom theme for the app brings me to my next point…
2. An AppAware Theme for Your App
AppPresser displays a separate theme for your app, so you can use a theme designed to look and work like a native app.
Normal responsive themes are not recommended, your app should not look like a mobile website. The AppPresser Theme is the first theme that is built strictly for a mobile app, and it is fully customizable.
You can also use your own theme, but please see our documentation on making your theme AppAware. You can set the theme for your app in the AppPresser settings.
3. Add App Features
Apps are about interactivity, they aren’t just for consuming content like a website. So let’s add some app features!
You can add app features, such as using the device camera, with Javascript using the Phonegap API. (Note: if Javascript scares you, we have some done-for-you features available called extensions.)
Here’s an example of using a really simple feature called the “In App Browser.” This opens up a new browser window on top of your app so you can visit an external webpage. You can paste this code into any post or page in “text” mode:
<button onclick="inAppBrowser(); return false;">In App Browser</button>
<script>
function inAppBrowser() {
window.open('http://apppresser.com', '_blank');
}
</script>
Clicking the button inside a device emulator in Xcode or Eclipse will let you see the result of that feature. This is a very simple example, there are lots more code examples in the Phonegap API documentation.
You will not be able to test app features unless you are in an app. This requires Xcode or Eclipse emulators, which brings me to my next point.
4. Testing and Building Your App
To test your app you’ll need a Phonegap project loaded up inside Xcode or Eclipse. It may seem a little scary to setup these new programs, but it’s not too bad.
You don’t need to know much about these programs, all we are using is the emulators. (It’s literally a matter of pressing one button once Xcode is setup)
The setup process for testing your app is too involved to cover here, but there are some good resources at the links below:
- http://apppresser.com/docs/
- http://docs.phonegap.com/en/3.3.0/guide_platforms_index.md.html#Platform%20Guides
Building Your App
AppPresser utilizes Phonegap Build to create the app.
Phonegap Build allows you to upload a .zip file of your project without messing with any Objective C or Java. That means you only have to change a few lines in the config.xml file, and add your own splash/icon images and you’re ready to go!
You can sign up for a free Phonegap Build account and build one app for free. Phonegap Build will generate the files you need to submit to the iOS and Android App Stores.
For more information on this process, please see this video.
If you don’t want to mess with building your app, we can do that for you with our app build service.
This is Just the Beginning
AppPresser has opened up a whole new world for development using WordPress.
Combining the world of mobile apps with WordPress has infinite possibilities, and there are a lot more exciting things on the way.
Most of all we are really excited to see what new and innovative things YOU are going to build with this. It’s time to start building mobile apps with WordPress!
Scott Bolinger is the co-founder of AppPresser, the first mobile app framework for WordPress. He is a front end developer of all things WordPress, with a specialization in themes. Scott also co-founded Press Coders, find him on Twitter @scottbolinger.
2 Comments