- Advertisement -

How to Create Mobile App For Your WordPress Site


You’probably have thought about having a mobile app for your WordPress website. The advantage of getting that icon on a home screen, one faucet to engagement. Maybe simply the approval of having the ability to mention “of course we’ve Associate in Nursing app”.

But you tried the choices and that they area unit either too difficult or too pricey. So the thought got reluctantly tossed into the “too hard” basket.

Well, go rummage in this basket and retrieve that thought as a result of here’s a DIY approach that may permit you, for tiny price, to make that basic app.

PhoneGap Build + WordPress = Mobile App

The reasons for making a mobile app have modified because the sheer volume of apps within the varied app stores has exploded. Gone ar the times of having the ability to use associate degree app store as a kind of selling. Because the probabilities of your app being discovered sink ever nearer to zero.

Today, it’s concerning giving your readers choice: property them decide however and wherever they have interaction along with your content. And, of course, with the continuing rise of web access via mobile devices (in the U.S. in January 2014, access via mobile apps surpassed desktop access. And was massively additional widespread than mobile net browsing) having a mobile app is changing into increasing widespread.

The really expert news is that additionally gone ar the times of needing a hard-core developer, data of Java or C associate degreed an outsized money reserve to make an app.

You can build associate degree app victimisation freely out there tools and acquire it onto associate degree automaton device at no cost. On iOS, Apple being Apple implies that they need to inject themselves into the method somewhere, thus you’ll got to pay a minimum of the $99/yr to affix the iOS Developer Program in order that you’ll build and distribute your app (either directly or via the app store).

Let Maine additionally build one thing else fully clear: this can be concerning making a mobile app to induce your WordPress content into the hands of your readers’ mobile devices. It’s not concerning making “proper” apps victimization WordPress as associate degree application framework.

Before You Start

Whilst internet apps ar simply tested exploitation emulators, mobile apps ar abundant easier to check on Associate in Nursing actual device. As i discussed higher than, golem is that the best OS to check with, therefore if you don’t have Associate in Nursing golem device use this as Associate in Nursing excuse to travel get one, or to form use of Associate in Nursing recent device that’s gathering mud somewhere.

If you haven’t used PGB before, you’ll have to be compelled to produce Associate in Nursing account. PGB contains a free set up that permits for one non-public app (which you’ll produce by uploading a zipper file) or unlimited open supply apps (which should be force from a public GitHub repository).

If you’re beginning out with PGB then i’d suggest exploitation it in conjunction with GitHub because it makes the method of change and reconstruction your app abundant power tool. It conjointly means you’ll use your GitHub credentials to sign into PGB.

Step 1. Create The PGB App Files

The structure is incredibly easy, with a root directory containing associate degree index.html, the all-important Directory listing showing layout for the appconfig.xml, a few of default icon files in png format and a res directory that contains OS specific icons for home screens and splash pages.


You can download this app to use as a starter for your own app.






Step 2. Create The App Icons

The app icons area unit important: they’re what the app can use once adding associate icon to the device’s home screen and what it’ll use as a splash screen once the app is opened.

To generate the icons, use a service like App Icon or build App Icon. they have an inclination to use an equivalent file names, thus it ought to be a matter of uploading your raw icon style (png format, 1024×1024 for each services), holding the service run so downloading the acceptable pictures to the right folder.


Step 3. Configuring The App

All the configuration is contained at intervals the config.xml file. For your own app, you’ll ought to amendment the following:

  • widget @id – convention is to reverse your site’s name and add a suffix of .app
  • name – the title of your website.
  • description – a brief description for your website
  • author (@email, @href) – your details
  • content @src – amendment this to the house page of your website
  • access @origin – this determines that websites the app will browse. the two extremes ar to enter your name and so prohibit the app to solely browsing your web site or to use ‘*’ and permit any web site to be browsed.

There are variety of gap:plugin components during this configuration file, most of that you don’t want. However, it’s value building the app with these plugins as this may enable you to require advantage of options like geolocation down the track without having to reconstruct, and therefore update, your app.

You’ll conjointly notice that there are variety of icon and gap:splash components that the app can use for the device’s home screen and for the apps splash page. If you’ve moved your generated icons into the right folders then you must realize that there’s nothing to vary here.

PS: Just remember, though, that the names are case-sensitive!

Step 4. Kick-off The PGB Build Process

Go to the PGB web site and sign on. You’ll be conferred with the Apps screen which can be empty, of course.

Screenshot of the create app screen

Screenshot of the produce app screen
PhoneGap Build is far easier once employed in conjunction with GitHub
Assuming that you’ve signed in along with your GitHub account which you’re aiming to build Associate in Nursing ASCII text file app. all of your GitHub public repositories are offered within the “find existing repo”, thus click on the arrow, choose your repo and click on on pull from GitHub repository.

PGB can pull in your repository then gift you with Associate in Nursing app details screen

The app screen showing the ready to build button

The app screen showing the able to build button
Once PGB has force within the files from GitHub, you’re able to build
Click on able to build.

The page currently changes to administer you progress on however the build goes. By default, PGB tries to make Associate in Nursing app for iOS, golem and Windows eight. Red suggests that the build has unsuccessful, while blue indicates a thriving build.

The PhoneGap Build app screen
PGB can try and build for golem, iOS and Windows. Blue is success.
iOS can perpetually fail unless you have got provided PGB along with your iOS developer certificates which needs the change of integrity of the iOS Developer Program that i discussed earlier.

The PhoneGap Build app screen

Hopefully, though, the golem build has been thriving and you’re able to test!

You can transfer the .apk by clicking on the golem icon. Otherwise, and maybe a better thanks to get the .apk onto Associate in Nursing golem device is to navigate to the app’s public page on Associate in Nursing golem device (there’s a QR code to help) and faucet on the golem link. this may transfer the .apk to the device, thus it’s simply a matter of jumping into Downloads and sound on the file to put in the app.

Yet Associate in Nursingother different is to access the PGB web site on an golem device.

Whichever methodology you used, you must currently notice your app’s icon on your home screen (if the icon isn’t what you were expecting then it’s possible you’ve got the address wrong within the config.xml file).

Tap on the icon and also the app can open and you may be greeted with the splash screen then the front page of your web site (depending on the verbal description of your device there could also be slight delays in moving from the splash screen to the website).

Congratulations you’ve designed your 1st app!

How sensible it’s, can rely entirely on however you’ve discovered your WordPress web site however the advantage now could be that you simply solely ought to add WordPress to create enhancements.

If for a few reason, like Associate in Nursing incorrect image address, you wish to build the app then:

  1. Update the files in your GitHub repo
  2. Go to the app page in PGB and click on on Update code – this may pull within the files from your GitHub repo
  3. PGB ought to mechanically begin the build method – if it doesn’t click on build All

Barest Of Bones!

This is the barest of bones form of mobile app, that naturally means there’s aiming to be the odd “if solely it….” or two.

The major missing part is notifications that is annoying as they’ll be implausibly helpful. while it entirely potential to feature them to a PGB app (AppPresser has done therefore via the Pushwoosh service however you’ll have to be compelled to get their $199/yr Starter Plan) it’s on the far side this post.

In fact, if you would like to require a lot of advantage of the mobile device capabilities then it’s price taking a more in-depth explore AppPresser.

But if you’re simply desirous to offer your readers with selection by providing them with a mobile app then this method will the duty. It’s even easy enough for North American country WordPress implementers!


You might also like More from author


  1. Michel Bay says

    Nice Collection

  2. Sabina says

    This website is really interesting, but why it is
    on 18th place in google’s search results.

    It deserves to be in top 5. Many webmasters think that seo is dead in 2016, but it is not true.
    There is sneaky method to reach google’s top 5 that not many
    people know. Just search for: pandatsor’s tools

    Also visit my website – Elvis74

Leave A Reply

Your email address will not be published.