Creating A Mobile App For Your WordPress Site: A DIY Guide

Creating A Mobile App For Your WordPress Site: A DIY Guide

You’ve probably thought before about how good it would be to create a mobile app for your WordPress site. The advantage of having that icon on a home screen, a single tap to engagement, perhaps just the kudos of being able to say “of course we have an app”.

But you checked out the options and they are either too complicated or too expensive and so the thought got reluctantly tossed into the “too hard” basket.

Well, go rummage in that basket and retrieve that thought because here’s a DIY approach that will allow you, for little cost, to create that basic app.

PhoneGap Build + WordPress = Mobile App
PhoneGap Build offers a simple and cost-effective way to bring your WordPress site to a mobile app

The reasons for creating a mobile app have changed as the sheer volume of apps in the various app stores has exploded. Gone are the days of being able to use an app store as a form of marketing as the chances of your app being discovered sink ever closer to zero.

Today, it’s about giving your readers choice: letting them decide how and where they engage with your content. And, of course, with the continued rise of internet access via mobile devices (in the US in January 2014, access via mobile apps surpassed desktop access and was massively more popular than mobile web browsing) having a mobile app is becoming increasing popular.

The really good news is that also gone are the days of needing a hard-core developer, knowledge of Java or C and a large cash reserve to build an app.

You can build an app using freely available tools and get it onto an Android device at no cost; on iOS, Apple being Apple means that they have to inject themselves into the process somewhere, so you’ll need to spend at least the $99/yr to join the iOS Developer Program so that you can build and distribute your app (either directly or via the app store).

Let me also make something else absolutely clear: this is about creating a mobile app to get your WordPress content into the hands of your readers’ mobile devices. It’s not about creating “proper” apps using WordPress as an application framework.

How It Works

PhoneGap Build logo
PGB makes building apps much more streamlined

This solution is based on creating the simplest mobile app possible, using the PhoneGap Build service (PGB) which really does live up to its claim to:

Take the pain out of developing mobile apps.

The app’s sole purpose is to fire-up the device’s inappbrowser and point it to the homepage of your site. Almost as if your reader was using a mobile web browser.

The beauty of this approach is that everything is effectively controlled in WordPress and using tools, techniques and technologies you are already familiar with. If you want to tweak the look and feel it’s a matter of updating the WordPress theme, no need to roll out an update to the app itself.

The solution is, then, 1% app, 99% WordPress which means that you must, must, must pay attention to what your WordPress site is delivering. Even the most responsive of themes is likely to fall short of an expectation that with mobile apps is far higher than it is with mobile web. You have to make sure you are optimizing for the mobile experience which means thinking about the theme, the content, menus and the interaction.

This post is going to focus on the building of the app and setting up WordPress, so I would encourage you first to take a look at the following couple of articles to ensure that you are on the right track:

Get WordPress right first – you can test that by simply browsing on a mobile device or using a simulator – before you build the app.

And, always remember that deleting an app from a home screen is easier than putting there in the first place.

4 Steps To A Mobile App

Let’s walkthrough how to build the app. As Android is easier and doesn’t require any signing-up to programs we’ll concentrate on that OS but keep in mind that the process for any OS is pretty much the same.

For this post, I built an app for an old podcast that I used to produce and co-host, A Game Of Two Halves, as it had plenty of publicly available content. You can download the .apk from the app’s public page on PhoneGap Build.

Before You Start

Whilst web apps are easily tested using emulators, mobile apps are much easier to test on an actual device. As I mentioned above, Android is the easiest OS to test with, so if you don’t have an Android device use this as an excuse to go get one, or to make use of an old device that’s gathering dust somewhere.

If you haven’t used PGB before, you’ll need to create an account. PGB has a free plan that allows for a single private app (which you can create by uploading a zip file) or unlimited open source apps (which must be pulled from a public GitHub repository).

If you are starting out with PGB then I would recommend using it in conjunction with GitHub as it makes the process of updating and rebuilding your app much smoother. It also means that you can use your GitHub credentials to sign into PGB.

Step 1. Create The PGB App Files

Directory listing showing layout for the app
Most of the files for this app are logos and splash screens!

The structure is very simple, with a root directory containing an index.html, the all-important config.xml, a couple of default icon files in png format and a res directory that contains OS specific icons for home screens and splash pages.

Step 2. Create The App Icons

The app icons are important: they are what the app will use when adding an icon to the device’s home screen and what it will use as a splash screen when the app is opened.

To generate the icons, use a service such as App Icon or Make App Icon. They tend to use the same file names, so it should be a matter of uploading your raw icon design (png format, 1024×1024 for both services), letting the service run and then downloading the appropriate images to the correct folder.

Step 3. Configuring The App

All the configuration is contained within the config.xml file. For your own app, you’ll should change the following:

  • widget @id – convention is to reverse your site’s domain name and add a suffix of .app
  • name – the title of your site.
  • description – a short description for your site
  • author (@email, @href) – your details
  • content @src – change this to the home page of your site
  • access @origin – this determines which websites the app can browse. The 2 extremes are to enter your domain name and therefore restrict the app to only browsing your website or to use ‘*’ and allow any website to be browsed

There are a number of gap:plugin elements in this configuration file, most of which you don’t need. However, it’s worth building the app with these plugins as this will allow you to take advantage of features such as geolocation down the track without needing to rebuild, and thus update, your app.

You’ll also notice that there are a number of icon and gap:splash elements which the app will use for the device’s home screen and for the apps splash page. If you’ve moved your generated icons into the correct folders then you should find that there’s nothing to change here.

Just be aware, though, that the names are case-sensitive!

Step 4. Kick-off The PGB Build Process

Go to the PGB website and sign in. You’ll be presented with the Apps screen which will be empty, of course.

Screenshot of the create app screen
PhoneGap Build is much easier when used in conjunction with GitHub

Assuming that you’ve signed in with your GitHub account and that you are going to build an open-source app. All your GitHub public repositories will be available in the “find existing repo”, so click on the arrow, select your repo and click on pull from GitHub repository.

PGB will pull in your repository and then present you with an app details screen

The app screen showing the ready to build button
Once PGB has pulled in the files from GitHub, you are ready to build

Click on Ready to build.

The page now changes to give you progress on how the build is going. By default, PGB tries to build an app for iOS, Android and Windows 8. Red means the build has failed, whilst blue indicates a successful build.

The PhoneGap Build app screen
PGB will try to build for Android, iOS and Windows. Blue is success.

iOS will always fail unless you have provided PGB with your iOS developer certificates which requires the joining of the iOS Developer Program that I mentioned earlier.

Hopefully, though, the Android build has been successful and you are ready to test!

You can download the .apk by clicking on the Android icon. Otherwise, and perhaps an easier way to get the .apk onto an Android device is to navigate to the app’s public page on an Android device (there’s a QR code to help) and tap on the Android link. This will download the .apk to the device, so it’s just a matter of jumping into Downloads and tapping on the file to install the app.

Yet another alternative is to access the PGB website on an Android device.

Whichever method you used, you should now find your app’s icon on your home screen (if the icon is not what you were expecting then it’s likely you’ve got the URL wrong in the config.xml file).

Tap on the icon and the app will open and you will be greeted with the splash screen and then the front page of your website (depending on the spec of your device there may be slight delays in moving from the splash screen to the website).

Congratulations you’ve built your first app!

How good it is, will depend entirely on how you’ve set up your WordPress site but the advantage now is that you only need to work in WordPress to make improvements.

If for some reason, such as an incorrect image URL, you need to rebuild the app then:

  1. Update the files in your GitHub repo
  2. Go to the app page in PGB and click on Update code – this will pull in the files from your GitHub repo
  3. PGB should automatically start the rebuild process – if it doesn’t click on Rebuild All

Barest Of Bones

This is the barest of bones type of mobile app, which naturally means that there’s going to be the odd “if only it….” or two.

The major missing component is notifications which is annoying as they can be incredibly useful. Whilst it entirely possible to add them to a PGB app (AppPresser has done so via the Pushwoosh service but you’ll need to buy their $199/yr Starter Plan) it is beyond this post.

In fact, if you want to take more advantage of the mobile device capabilities then it’s worth taking a closer look at AppPresser.

But if you are just wanting to provide your readers with choice by providing them with a mobile app then this process does the job. It’s even simple enough for us WordPress implementers!

Have you ever created a mobile app for your WordPress site? Let us know in the comments!
Chris Knowles
Chris Knowles A WordPress pro, Chris has a bent for hacking WordPress, content management and online media.